JavaScript
Run Code
Open in Fiddle
Ext.define('Ext.ux.form.field.GridPicker', { extend: 'Ext.form.field.Picker', columns: false, store: false, gridConfig: { minHeight: 100, maxHeight: 300, height: 200, selModel: { selType: 'checkboxmodel', mode: 'MULTI' } }, displayField: false, valueField: false, delimiter: ", ", selectedRecords: [], initComponent: function() { this.callParent(arguments); }, createPicker: function() { var config = Ext.applyIf({ width: this.bodyEl.getWidth(), maxHeight: this.maxHeight, scrollable: true, floating: true, store: this.getStore(), columns: this.getColumns(), renderTo: Ext.getBody(), listeners: { selectionchange: { fn: function(grid, selectedRecords) { this.setRecords(selectedRecords); this.fireEvent('select', this, selectedRecords); }, scope: this } } }, this.gridConfig); var grid = Ext.create('Ext.grid.Panel', config); return grid; }, setRecords: function(records) { if (records && !Ext.isArray(records)) { records = [records]; } this.selectedRecords = records; var rawValue = []; Ext.Array.each(records, function(record) { rawValue.push(record.get(this.displayField)); }, this); this.setRawValue(rawValue.join(this.delimiter)); }, getRecords: function() { return this.selectedRecords; }, getSubmitValue: function() { var values = []; Ext.Array.each(this.selectedRecords, function(record) { values.push(record.get(this.valueField)); }, this); return values; }, getValue: function() { return this.getSubmitValue(); }, beforeReset: function() { if(this.picker) { this.picker.getSelectionModel().deselectAll() } this.callParent(arguments); }, getStore: function() { if (!this.store) { this.store = Ext.create('Ext.data.Store', {}); } return this.store; }, getColumns: function() { if (!this.columns) { this.columns = []; } return this.columns; } }); Ext.application({ name: 'Fiddle', launch: function() { var userStore = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'items' } } }); for(var i=0; i<500; i++) { userStore.add({ 'name': "User_" + i, 'userId': i, 'email': 'user_' + i +"@mail.com", 'phone': "555-111-1224" }) } var gridPicker = Ext.create('Ext.ux.form.field.GridPicker', { fieldLabel: "Users", name: 'users', store: userStore, columns: [{ text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], displayField: 'name', valueField: 'userId' }); Ext.create('Ext.form.Panel', { title: "The Form", items: [gridPicker], layout: 'form', width: 600, height: 300, renderTo: Ext.getBody(), buttons: [{ text: 'Reset', handler: function() { this.up('form').getForm().reset(); } }, { text: 'Submit', formBind: true, //only enabled once the form is valid disabled: true, handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { console.log(form.getValues()); } } }], }); } });