ExtJs

/*!  * 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') : '';     }     /**功能：简化代码，用fm代替Ext.fomr。*/     var fm = Ext.form;     /**功能：给GridPanel添加一列checkColumn。*/     var checkColumn = new Ext.grid.CheckColumn({        header: 'Indoor?',    //说明：头信息。        dataIndex: 'indoor',    //说明：对应字段名称。        width: 55     });     /**功能：GridPanel参数之一，ColumnModel，既是cm。*/     var cm = new Ext.grid.ColumnModel([{            id: 'common',    //说明：指定ID。            header: 'Common Name',            dataIndex: 'common',            width: 220,            editor: new fm.TextField({    //提醒：这是设置行编辑。文本输入框TextField。                allowBlank: false            })         },{            header: 'Light',            dataIndex: 'light',            width: 130,            editor: new fm.ComboBox({    //提醒：这是设置行编辑。文本输入框ComboBox。                typeAhead: true,            /*  设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容，                                            如果找到了匹配的 内容则自动选中它 (typeAheadDelay ) (默认值为 false) */                            triggerAction: 'all',    /* 当触发器被点击时需要执行的操作。 'query':Default 使用原始值 执行查询；                                            'all':使用allQuery 指定的配置项 进行查询。 */                transform:'light',                lazyRender: true,                listClass: 'x-combo-list-small'             })         },{            header: 'Price',            dataIndex: 'price',            width: 70,            align: 'right',            renderer: 'usMoney',        //说明：渲染的时候转换成usMoney符号。            editor: new fm.NumberField({        //说明：NumberField：数字文本表单项，提供自动按键过滤和数值校验。                allowBlank: false,                allowNegative: false,        //说明：False将阻止输入负号(默认为true。                maxValue: 100000            })         },{            header: 'Available',            dataIndex: 'availDate',            width: 95,            renderer: formatDate,    //说明：渲染事件触发时间格式函数。            editor: new fm.DateField({        //说明：时间表单项DateField。                 format: 'm/d/y',                 minValue: '01/01/06',    //说明：设置最小值。                 disabledDays: [0, 6],    //说明：隐藏天数。这里隐藏星期天和星期六。                 disabledDaysText: 'Plants are not available on the weekends'    //说明：这是隐藏提醒信息。             })         },         checkColumn            //说明：添加checkColumn列。     ]);     /**功能：默认设置列能排序。*/     cm.defaultSortable = true;     /**功能：创建store。*/     var store = new Ext.data.Store({         // load remote data using HTTP         url: 'plants.xml',        //提醒：url也为store的一个配置项。         // specify a XmlReader (coincides with the XML format of the returned data)         reader: new Ext.data.XmlReader(    //说明：定义一个XmlReader解析。             {                 // records will have a 'plant' tag                 record: 'plant'        //说明：那意思就是每一条信息都由<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'}     });     /**功能：创建可编辑grideditor grid。*/     var grid = new Ext.grid.EditorGridPanel({         store: store,    //配置项：store。         cm: cm,            //配置项：cm。         renderTo: 'editor-grid',         width: 600,         height: 300,         autoExpandColumn: 'common',    //说明：扩展common列。         title: 'Edit Plants?',         frame: true,         plugins: checkColumn,    //说明：添加checkColumn插件。         clicksToEdit: 1,        //说明：点击几次能编辑。         tbar: [{        //添加：底部工具栏。             text: 'Add Plant',             handler : function(){    //说明：加入handler默认事件，这里是鼠标单击事件。                 // 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(); });