+++ /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