CODEWITHSUNDEEP
listlayoutscrollsencha-touch
Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

List not scrolling

I have a panel (layout:'vbox') with two items; a panel and a list.

Code

this.currentFolderPnl = new Ext.Panel({
    cls:'document-current-folder-panel',
    html:'/'
});

this.list = new Ext.List({
    scroll: 'vertical',
    cls:'document-list',
    id: 'document-list',
    store: app.stores.Document,
    itemTpl: app.templates.document
});

app.views.DocumentList.superclass.constructor.call(this, {
    selectedCls : "x-item-selected",
    dockedItems: [{
        xtype: 'toolbar',
        ui:'dark',
        title: 'Documents',
        items:[this.backBtn,{xtype:'spacer'},this.newBtn]
    }],
    layout: {type:'vbox',align:'stretch'},
    items: [
        this.currentFolderPnl,
        this.list
    ]
});

I have tried many things but nothing worked. Could somebody tell me what to do.

Thanks

Upvotes: 0

Views: 414

Answers (1)

Swar
Swar

Reputation: 5503

A scroll can only appear while the child element is larger in size (either height or width or both) than the parent element. Because you are using a vbox layout, it expects height for each component. So, a list scroll will come while it fits inside a panel.

Now for your case, two options can be there:

Option 1:

You can provide a height to the first panel (which still you didn't provide) and add another panel after that with following details:

{
    flex : 1,
    layout : 'fit',
    items : [this.list]
}

This will fit the list within second panel and the scroll will come automatically.

Option 2:

Here you use a default layout (AutoContainerLayout) i.e. not providing any layout. And your above combination will work (better give a height to the first panel). Remove scrolling from list and add scroll vertical to main panel. This way:

this.currentFolderPnl = new Ext.Panel({
    ...
    height : 50
});

this.list = new Ext.List({
    scroll: FALSE,
    ....
});

app.views.DocumentList.superclass.constructor.call(this, {        
    scroll : 'vertical',
    ...
});

I didn't test the above option but this should work fine.

Upvotes: 1

Related Questions