-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
Ext.onReady(function(){\r
Ext.QuickTips.init();\r
\r
function formatDate(value){\r
return value ? value.dateFormat('M d, Y') : '';\r
- };\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
+ header: 'Indoor?',\r
dataIndex: 'indoor',\r
width: 55\r
});\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
+ 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
+ header: 'Light',\r
dataIndex: 'light',\r
width: 130,\r
- editor: new Ext.form.ComboBox({\r
+ editor: new fm.ComboBox({\r
typeAhead: true,\r
triggerAction: 'all',\r
transform:'light',\r
- lazyRender:true,\r
+ lazyRender: true,\r
listClass: 'x-combo-list-small'\r
})\r
},{\r
- header: "Price",\r
+ header: 'Price',\r
dataIndex: 'price',\r
width: 70,\r
align: 'right',\r
maxValue: 100000\r
})\r
},{\r
- header: "Available",\r
+ header: 'Available',\r
dataIndex: 'availDate',\r
width: 95,\r
renderer: formatDate,\r
// by default columns are sortable\r
cm.defaultSortable = true;\r
\r
- // this could be inline, but we want to define the Plant record\r
- // type so we can add records dynamically\r
- var Plant = Ext.data.Record.create([\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'}, // automatic date conversions\r
- {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},\r
- {name: 'indoor', type: 'bool'}\r
- ]);\r
-\r
// create the Data Store\r
var store = new Ext.data.Store({\r
- // load using HTTP\r
+ // load remote data using HTTP\r
url: 'plants.xml',\r
\r
- // the return will be XML, so lets set up a reader\r
- reader: new Ext.data.XmlReader({\r
- // records will have a "plant" tag\r
- record: 'plant'\r
- }, Plant),\r
-\r
- sortInfo:{field:'common', direction:'ASC'}\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
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
-\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
\r
// trigger the data store load\r
store.load();\r
-});\r
-\r
-Ext.grid.CheckColumn = function(config){\r
- Ext.apply(this, config);\r
- if(!this.id){\r
- this.id = Ext.id();\r
- }\r
- this.renderer = this.renderer.createDelegate(this);\r
-};\r
-\r
-Ext.grid.CheckColumn.prototype ={\r
- init : function(grid){\r
- this.grid = grid;\r
- this.grid.on('render', function(){\r
- var view = this.grid.getView();\r
- view.mainBody.on('mousedown', this.onMouseDown, this);\r
- }, this);\r
- },\r
-\r
- onMouseDown : function(e, t){\r
- if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){\r
- e.stopEvent();\r
- var index = this.grid.getView().findRowIndex(t);\r
- var record = this.grid.store.getAt(index);\r
- record.set(this.dataIndex, !record.data[this.dataIndex]);\r
- }\r
- },\r
-\r
- renderer : function(v, p, record){\r
- p.css += ' x-grid3-check-col-td'; \r
- return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';\r
- }\r
-};
\ No newline at end of file
+});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff