JavaScript
Run Code
Open in Fiddle
Ext.application({ name: 'Fiddle', launch: function () { var getDataStore = (size) => { var ar = []; for (let i = 0; i < size; i++) { ar.push({ text: `item ${i}` }); } return ar; } var getGrid = (size, options = {}) => ({ xtype: 'grid', width: 200, hideHeaders: true, forceFit: true, selModel: { type: 'checkboxmodel', mode: 'SINGLE', toggleOnClick: true, allowDeselect: true }, tbar: { xtype: 'textfield', reference: 'searchField', hideFieldLabel: true, emptyText: 'Search language', triggers: { clear: { cls: Ext.baseCSSPrefix + 'form-clear-trigger', handler: 'onClearSearch', hidden: true } }, listeners: { specialKey: 'onSpecialKey', change: { fn: 'onSearchChange', buffer: 300 } } }, viewConfig: { deferEmptyText: false, emptyText: 'No results.' }, columns: [{ dataIndex: 'text' }], store: { fields: ['text'], data: getDataStore(size) }, ...options }) new Ext.Window({ height: 200, width: 1000, modal: true, tbar: ['Menu with Grid', { xtype: 'button', text: 'maxHeight, items 2000 - slow!', menu: { items: getGrid(2000, {maxHeight: 400}) } }, { xtype: 'button', text: 'height, items: 2000', menu: { items: getGrid(2000, {height: 400}) } }, { xtype: 'button', text: 'maxHeight, items: 3', menu: { items: getGrid(3, {maxHeight: 400}) } }, { xtype: 'button', text: 'height, items: 3 - with extra height', menu: { items: getGrid(3, {height: 400}) } }], bbar: ['Classic Menu',{ xtype: 'button', text: 'menu, items 500 - slow!', menu: { items: getDataStore(500) } }, { xtype: 'button', text: 'maxHeight, items: 3', menu: { items: getDataStore(3) } }] }).show(); } });