Ext.ux.SchemaGrid = Ext.extend(Ext.grid.GridPanel, { initComponent: function() { var me = this, schema = me.initialConfig.schema, fields = schema.fields, id = Ext.id(); var store = new Ext.data.JsonStore({ root: 'list', totalProperty: 'count', idProperty: schema.primaryKey, url: '/Server', baseParams: { method: me.initialConfig.method, }, fields: fields, listeners: { load: function() { me.updateToolbar(); } } }); var sm = new Ext.grid.RowSelectionModel({ singleSelect: false, listeners: { rowselect: function() { me.updateToolbar(); }, rowdeselect: function() { me.updateToolbar(); } } }); var columns = [], fieldHash = {}; var autoExpandColumn = undefined; for (var i in fields) { var field = fields[i]; fieldHash[field.name] = field; if (field.header && !field.serverOnly) { if (field.autoExpand) { autoExpandColumn = field.name; } columns.push({ header: field.header, id: field.name, format: field.format, dataIndex: field.name, width: field.width, renderer: me.renderField }); } } var config = { sm: sm, store: store, columns: columns, autoSizeColumns: true, autoFill: true, stripeRows: true, trackMouseOver: true, loadMask: true, autoExpandColumn: autoExpandColumn, buttonId: id }; Ext.apply(this, Ext.apply(this.initialConfig, config)); me.tbar = new Ext.Toolbar({ items: [ { text: 'Add', id: 'add-'+id, handler: function() { me.editRecord({}); } }, { text: 'Edit', id: 'edit-'+id, handler: function() { me.editRecord(me.getSelectionModel().getSelected().data); } }, { text: 'Delete', id: 'delete-'+id, handler: function() { me.deleteRecords(); } } ] }); me.bbar = new Ext.PagingToolbar({ store: store, pageSize: 25, displayInfo: true, displayMsg: 'Displaying ' + me.initialConfig.schema.name + '{0} - {1} of {2}', beforePageText: 'Page', emptyMsg: 'Nothing to Display' }); Ext.ux.SchemaGrid.superclass.initComponent.apply(me, arguments); me.on({ 'render': function() { store.reload(); } }); me.fieldHash = fieldHash; }, updateToolbar: function() { var me = this, id = this.buttonId; var selections = me.getSelectionModel().getSelections(); if (selections.length) { Ext.getCmp('delete-'+id).enable(); if (selections.length == 1) { Ext.getCmp('edit-'+id).enable(); } else { Ext.getCmp('edit-'+id).disable(); } } else { Ext.getCmp('delete-'+id).disable(); Ext.getCmp('edit-'+id).disable(); } }, editRecord: function(record) { var me = this, id = Ext.id(), schema = me.initialConfig.schema, fields = schema.fields, primaryKey = schema.primaryKey; record = record || {}; var items = []; for (i in fields) { var field = fields[i]; if (field.header && field.editable) { items.push({ xtype: 'textfield', fieldLabel: field.header, anchor: '100%', id: field.name + '-' + id, name: field.name, value: record[field.name] }) } } var dialog = new Ext.Window({ title: record[primaryKey] ? 'Edit Record' : 'Add Record', width: 640, height: 480, modal: true, layout: 'fit', items: [ { xtype: 'form', frame: true, labelWidth: 150, items: items } ], buttonAlign: 'center', buttons: [ { text: 'OK', handler: function() { for (var i=0, len = items.length; i