Use Ext.grid.EditorGridPanel
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/CheckColumn.js"></script> <style type="text/css"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ #grid-example .x-grid-col-1 { text-align: right; } #grid-example .x-grid-col-2{ text-align: right; } #grid-example .x-grid-col-3 { text-align: right; } #grid-example .x-grid-col-4 { text-align: right; } #grid-example.x-grid-mso{ border: 1px solid #6593cf; } #grid-example.x-grid-vista{ border: 1px solid #b3bcc0; } #xml-grid-example{ border: 1px solid #cbc7b8; left: 0; position: relative; top: 0; } #editor-grid .x-grid-col-2{ text-align:right; } .x-grid3-td-topic b { font-family:tahoma, verdana; display:block; } .x-grid3-td-topic b i { font-weight:normal; font-style: normal; color:#000; } .x-grid3-td-topic .x-grid3-cell-inner { white-space:normal; } .x-grid3-td-topic a { color: #385F95; text-decoration:none; } .x-grid3-td-topic a:hover { text-decoration:underline; } .details .x-btn-text { background-image: url(details.gif); } .x-resizable-pinned .x-resizable-handle-south{ background:url(ext-3.0.0/resources/images/default/sizer/s-handle-dark.gif); background-position: top; } </style> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ Ext.QuickTips.init(); function formatDate(value){ return value ? value.dateFormat('M d, Y') : ''; } // shorthand alias var fm = Ext.form; // custom column plugin example 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([{ 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:'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 ]); // by default columns are sortable cm.defaultSortable = true; // create the Data Store var store = new Ext.data.Store({ // load remote data using HTTP url: 'ext-3.0.0/examples/grid/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 [ // 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', title: 'Edit Plants?', frame: true, 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); } }] }); // trigger the data store load store.load(); }); </script> <!-- the custom editor for the 'Light' column references the id="light" --> <select name="light" id="light" style="display: none;"> <option value="Shade">Shade</option> <option value="Mostly Shady">Mostly Shady</option> <option value="Sun or Shade">Sun or Shade</option> <option value="Mostly Sunny">Mostly Sunny</option> <option value="Sunny">Sunny</option> </select> <div id="editor-grid"></div> </body> </html> Related examples in the same category
