PDA

View Full Version : How to implement a select box with size > 1 in ExtJS 4.x



DocAhrens
11 Jan 2012, 4:14 PM
In ExtJS 4.x, how do you implement a select box with a size value (ex. size="6") such that instead of a dropdown, you have a bordered box with a scroll bar on the right allowing users see a number of options at once without needing to click the down arrow before they can select an item?

skirtle
11 Jan 2012, 4:20 PM
MultiSelect?

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/multiselect/multiselect-demo.html

DocAhrens
13 Jan 2012, 4:46 PM
Thanks! I have been working with that code, and there is a bug in extjs/examples/ux/form/MultiSelect.js (ver: ext-4.07), where if you set 'multiSelect: false' at line 185, then clicking the 'Clear' button results in the following error:


Uncaught TypeError: Cannot call method 'replace' of undefined
Uncaught TypeError: Cannot call method 'replace' of undefined
Ext.override.addCls -> ext-all-debug-w-comments.js:14024
Ext.define.onItemSelect -> ext-all-debug-w-comments.js:87616
...
Ext.define.setValue -> ext-all-debug-w-comments.js:96176
Ext.define.clearValue
...

at line 87615 of extjs/ext-all-debug-w-comments.js


if (node) {
Ext.fly(node).addCls(this.selectedItemCls);
}

because node is an empty array which is truthy and


Ext.fly(node).addCls(this.selectedItemCls);

is evaluating 'node' (an empty array which does not have a replace method), and it throws the above exception. Do you have a suggested fix for MultiSelect that will allow you to configure 'multiSelect: false' (a business requirement for my feature). Setting the 'maxSelections: 1' unfortunately doesn't work, because rather than disallowing multiSelect, it instead trips an error (as it is designed), but still allows the user to multiSelect. Any suggestions on fixing the bug in the MultiSelect.js example would be appreciated.