/*!
* 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();
});
ExtJs_edit-grid解释
最新推荐文章于 2016-03-12 13:25:00 发布