X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/examples/grid/edit-grid.js?ds=inline diff --git a/examples/grid/edit-grid.js b/examples/grid/edit-grid.js index 3d9daff9..6ce50004 100644 --- a/examples/grid/edit-grid.js +++ b/examples/grid/edit-grid.js @@ -1,158 +1,151 @@ /*! - * Ext JS Library 3.1.1 - * Copyright(c) 2006-2010 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */ -Ext.onReady(function(){ - - /** - * Handler specified for the 'Available' column renderer - * @param {Object} value - */ - function formatDate(value){ - return value ? value.dateFormat('M d, Y') : ''; - } - - // shorthand alias - var fm = Ext.form; - - // the check column is created using a custom plugin - var checkColumn = new Ext.grid.CheckColumn({ - header: 'Indoor?', - dataIndex: 'indoor', - width: 55 - }); - - // the column model has information about grid columns - // dataIndex maps the column to the specific data field in - // the data store (created below) - var cm = new Ext.grid.ColumnModel({ - // specify any defaults for each column - defaults: { - sortable: true // columns are not sortable by default - }, - columns: [ - { - id: 'common', - header: 'Common Name', - dataIndex: 'common', - width: 220, - // use shorthand alias defined above - editor: new fm.TextField({ - allowBlank: false - }) - }, { - header: 'Light', - dataIndex: 'light', - width: 130, - editor: new fm.ComboBox({ - typeAhead: true, - triggerAction: 'all', - // transform the data already specified in html - transform: 'light', - lazyRender: true, - listClass: 'x-combo-list-small' - }) - }, { - header: 'Price', - dataIndex: 'price', - width: 70, - align: 'right', - renderer: 'usMoney', - editor: new fm.NumberField({ - allowBlank: false, - allowNegative: false, - maxValue: 100000 - }) - }, { - header: 'Available', - dataIndex: 'availDate', - width: 95, - renderer: formatDate, - editor: new fm.DateField({ - format: 'm/d/y', - minValue: '01/01/06', - disabledDays: [0, 6], - disabledDaysText: 'Plants are not available on the weekends' - }) - }, - checkColumn // the plugin instance - ] - }); - - // create the Data Store - var store = new Ext.data.Store({ - // destroy the store if the grid is destroyed - autoDestroy: true, - - // load remote data using HTTP - url: 'plants.xml', - - // specify a XmlReader (coincides with the XML format of the returned data) - reader: new Ext.data.XmlReader({ - // records will have a 'plant' tag - record: 'plant', - // use an Array of field definition objects to implicitly create a Record constructor - fields: [ - // the 'name' below matches the tag name to read, except 'availDate' - // which is mapped to the tag 'availability' - {name: 'common', type: 'string'}, - {name: 'botanical', type: 'string'}, - {name: 'light'}, - {name: 'price', type: 'float'}, - // dates can be automatically converted by specifying dateFormat - {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'}, - {name: 'indoor', type: 'bool'} - ] - }), - - sortInfo: {field:'common', direction:'ASC'} - }); - - // create the editor grid - var grid = new Ext.grid.EditorGridPanel({ - store: store, - cm: cm, - renderTo: 'editor-grid', - width: 600, - height: 300, - autoExpandColumn: 'common', // column with this id will be expanded - title: 'Edit Plants?', - frame: true, - // specify the check column plugin on the grid so the plugin is initialized - plugins: checkColumn, - clicksToEdit: 1, - tbar: [{ - text: 'Add Plant', - handler : function(){ - // access the Record constructor through the grid's store - var Plant = grid.getStore().recordType; - var p = new Plant({ - common: 'New Plant 1', - light: 'Mostly Shade', - price: 0, - availDate: (new Date()).clearTime(), - indoor: false - }); - grid.stopEditing(); - store.insert(0, p); - grid.startEditing(0, 0); - } - }] - }); - - // manually trigger the data store load - store.load({ - // store loading is asynchronous, use a load listener or callback to handle results - callback: function(){ - Ext.Msg.show({ - title: 'Store Load Callback', - msg: 'store was loaded, data available for processing', - modal: false, - icon: Ext.Msg.INFO, - buttons: Ext.Msg.OK - }); - } - }); +Ext.onReady(function(){ + + /** + * Handler specified for the 'Available' column renderer + * @param {Object} value + */ + function formatDate(value){ + return value ? value.dateFormat('M d, Y') : ''; + } + + // shorthand alias + var fm = Ext.form; + + // the column model has information about grid columns + // dataIndex maps the column to the specific data field in + // the data store (created below) + var cm = new Ext.grid.ColumnModel({ + // specify any defaults for each column + defaults: { + sortable: true // columns are not sortable by default + }, + columns: [{ + id: 'common', + header: 'Common Name', + dataIndex: 'common', + width: 220, + // use shorthand alias defined above + editor: new fm.TextField({ + allowBlank: false + }) + }, { + header: 'Light', + dataIndex: 'light', + width: 130, + editor: new fm.ComboBox({ + typeAhead: true, + triggerAction: 'all', + // transform the data already specified in html + transform: 'light', + lazyRender: true, + listClass: 'x-combo-list-small' + }) + }, { + header: 'Price', + dataIndex: 'price', + width: 70, + align: 'right', + renderer: 'usMoney', + editor: new fm.NumberField({ + allowBlank: false, + allowNegative: false, + maxValue: 100000 + }) + }, { + header: 'Available', + dataIndex: 'availDate', + width: 95, + renderer: formatDate, + editor: new fm.DateField({ + format: 'm/d/y', + minValue: '01/01/06', + disabledDays: [0, 6], + disabledDaysText: 'Plants are not available on the weekends' + }) + }, { + xtype: 'checkcolumn', + header: 'Indoor?', + dataIndex: 'indoor', + width: 55 + }] + }); + + // create the Data Store + var store = new Ext.data.Store({ + // destroy the store if the grid is destroyed + autoDestroy: true, + + // load remote data using HTTP + url: 'plants.xml', + + // specify a XmlReader (coincides with the XML format of the returned data) + reader: new Ext.data.XmlReader({ + // records will have a 'plant' tag + record: 'plant', + // use an Array of field definition objects to implicitly create a Record constructor + fields: [ + // the 'name' below matches the tag name to read, except 'availDate' + // which is mapped to the tag 'availability' + {name: 'common', type: 'string'}, + {name: 'botanical', type: 'string'}, + {name: 'light'}, + {name: 'price', type: 'float'}, + // dates can be automatically converted by specifying dateFormat + {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'}, + {name: 'indoor', type: 'bool'} + ] + }), + + sortInfo: {field:'common', direction:'ASC'} + }); + + // create the editor grid + var grid = new Ext.grid.EditorGridPanel({ + store: store, + cm: cm, + renderTo: 'editor-grid', + width: 600, + height: 300, + autoExpandColumn: 'common', // column with this id will be expanded + title: 'Edit Plants?', + frame: true, + clicksToEdit: 1, + tbar: [{ + text: 'Add Plant', + handler : function(){ + // access the Record constructor through the grid's store + var Plant = grid.getStore().recordType; + var p = new Plant({ + common: 'New Plant 1', + light: 'Mostly Shade', + price: 0, + availDate: (new Date()).clearTime(), + indoor: false + }); + grid.stopEditing(); + store.insert(0, p); + grid.startEditing(0, 0); + } + }] + }); + + // manually trigger the data store load + store.load({ + // store loading is asynchronous, use a load listener or callback to handle results + callback: function(){ + Ext.Msg.show({ + title: 'Store Load Callback', + msg: 'store was loaded, data available for processing', + modal: false, + icon: Ext.Msg.INFO, + buttons: Ext.Msg.OK + }); + } + }); }); \ No newline at end of file