--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.onReady(function(){\r
+ Ext.QuickTips.init();\r
+\r
+ function formatDate(value){\r
+ return value ? value.dateFormat('M d, Y') : '';\r
+ }\r
+ // shorthand alias\r
+ var fm = Ext.form;\r
+\r
+ // custom column plugin example\r
+ var checkColumn = new Ext.grid.CheckColumn({\r
+ header: 'Indoor?',\r
+ dataIndex: 'indoor',\r
+ width: 55\r
+ });\r
+\r
+ // the column model has information about grid columns\r
+ // dataIndex maps the column to the specific data field in\r
+ // the data store (created below)\r
+ var cm = new Ext.grid.ColumnModel([{\r
+ id: 'common',\r
+ header: 'Common Name',\r
+ dataIndex: 'common',\r
+ width: 220,\r
+ // use shorthand alias defined above\r
+ editor: new fm.TextField({\r
+ allowBlank: false\r
+ })\r
+ },{\r
+ header: 'Light',\r
+ dataIndex: 'light',\r
+ width: 130,\r
+ editor: new fm.ComboBox({\r
+ typeAhead: true,\r
+ triggerAction: 'all',\r
+ transform:'light',\r
+ lazyRender: true,\r
+ listClass: 'x-combo-list-small'\r
+ })\r
+ },{\r
+ header: 'Price',\r
+ dataIndex: 'price',\r
+ width: 70,\r
+ align: 'right',\r
+ renderer: 'usMoney',\r
+ editor: new fm.NumberField({\r
+ allowBlank: false,\r
+ allowNegative: false,\r
+ maxValue: 100000\r
+ })\r
+ },{\r
+ header: 'Available',\r
+ dataIndex: 'availDate',\r
+ width: 95,\r
+ renderer: formatDate,\r
+ editor: new fm.DateField({\r
+ format: 'm/d/y',\r
+ minValue: '01/01/06',\r
+ disabledDays: [0, 6],\r
+ disabledDaysText: 'Plants are not available on the weekends'\r
+ })\r
+ },\r
+ checkColumn\r
+ ]);\r
+\r
+ // by default columns are sortable\r
+ cm.defaultSortable = true;\r
+\r
+ // create the Data Store\r
+ var store = new Ext.data.Store({\r
+ // load remote data using HTTP\r
+ url: 'plants.xml',\r
+\r
+ // specify a XmlReader (coincides with the XML format of the returned data)\r
+ reader: new Ext.data.XmlReader(\r
+ {\r
+ // records will have a 'plant' tag\r
+ record: 'plant'\r
+ },\r
+ // use an Array of field definition objects to implicitly create a Record constructor\r
+ [\r
+ // the 'name' below matches the tag name to read, except 'availDate'\r
+ // which is mapped to the tag 'availability'\r
+ {name: 'common', type: 'string'},\r
+ {name: 'botanical', type: 'string'},\r
+ {name: 'light'},\r
+ {name: 'price', type: 'float'}, \r
+ // dates can be automatically converted by specifying dateFormat\r
+ {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
+ {name: 'indoor', type: 'bool'}\r
+ ]\r
+ ),\r
+\r
+ sortInfo: {field:'common', direction:'ASC'}\r
+ });\r
+\r
+ // create the editor grid\r
+ var grid = new Ext.grid.EditorGridPanel({\r
+ store: store,\r
+ cm: cm,\r
+ renderTo: 'editor-grid',\r
+ width: 600,\r
+ height: 300,\r
+ autoExpandColumn: 'common',\r
+ title: 'Edit Plants?',\r
+ frame: true,\r
+ plugins: checkColumn,\r
+ clicksToEdit: 1,\r
+ tbar: [{\r
+ text: 'Add Plant',\r
+ handler : function(){\r
+ // access the Record constructor through the grid's store\r
+ var Plant = grid.getStore().recordType;\r
+ var p = new Plant({\r
+ common: 'New Plant 1',\r
+ light: 'Mostly Shade',\r
+ price: 0,\r
+ availDate: (new Date()).clearTime(),\r
+ indoor: false\r
+ });\r
+ grid.stopEditing();\r
+ store.insert(0, p);\r
+ grid.startEditing(0, 0);\r
+ }\r
+ }]\r
+ });\r
+\r
+ // trigger the data store load\r
+ store.load();\r
+});</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff