-/*\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.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
- editor: new fm.TextField({\r
- allowBlank: false\r
- })\r
- },{\r
- header: "Light",\r
- dataIndex: 'light',\r
- width: 130,\r
- editor: new Ext.form.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
- // 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
- 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
- });\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
-\r
- tbar: [{\r
- text: 'Add Plant',\r
- handler : function(){\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
-});\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
+/*!
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.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
+ });
+ }
+ });
+});
\ No newline at end of file