PDA

View Full Version : cannot get scrollbar to work for ItemSelector



w_goldman
30 Sep 2015, 8:06 AM
I am using ExtJs 4.2.0.

Below is basically the code I am using (the store is not defined here, but I have several hundred selected values). By default I get no scrollbar, adding overflowY:'scroll' gets me a scrollbar, but it looks disabled and I cannot scroll.


Ext.define('APopupForItemSelector', {
extend: 'Ext.window.Window',
initComponent: function(){
var me = this;


var itemSelector = Ext.create('Ext.ux.form.ItemSelector',
{
margin: '10 0 10 0',
buttons: ['add','remove'],
name: 'myItemSelector',
id: 'myItemSelector',
overflowY: 'scroll', // without this I get no scrollbar, with it I get a what appears to be a disabled scrollbar
store: itemSelectorStore,
displayField: 'label',
valueField: 'value',
msgTarget: 'side',
fromTitle: 'Availables',
toTitle: 'Selected'
}
);


var fs = {
xtype:'fieldset',
title: 'My Item Selector Field Set',
items:[
itemSelector
]
};


var fs0 = {
xtype:'fieldset',
title: 'Preceding FieldSet',
items:[
//no items for now
]
};


me.items = [{
xtype: 'panel',
flex: 1,
items: [
fs0
, fs ]
}];
me.callParent(arguments);
}
});

w_goldman
30 Sep 2015, 10:11 AM
Oh and here is a fiddle that demonstrates my issues (cannot scroll to bottom of avaialable)https://fiddle.sencha.com/?fiddle=ung#fiddle/ung

bjdurham85
6 Oct 2015, 2:27 PM
You've posted in the ExtJS 4 forum but have an ExtJS 6 fiddle, which version are you after?


While I haven't tested your fiddle, have you tested moving/configuring an autoScroll: true at the panel level, additionally remove unnecessary nesting?


Regards,
Bryan

w_goldman
6 Oct 2015, 3:01 PM
So I did figure this out. You need

autoScroll: true,

height: 400,


I think I was incorrectly specifying height: '400', which does not work.