ExtJs_Grid的增加、删除、修改、查询操作
//创建edgrid.js
Ext.onReady(function(){
Ext.QuickTips.init();

// 格式化日期显示
function formatDate(value){
return value ? value.dateFormat('Y, M d') : '';
}
// 格式化性别显示,这是个 renderer, 渲染器
function formatSex(value) {
return value ? "男" : "女"
}
// 弄个缩写的别名
var fm = Ext.form;

// 列模型定义了表格所有列的信息,
// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
var cm = new Ext.grid.ColumnModel([
{
id:'id',
header: "编号",
dataIndex: 'id',
width: 50
},
{
id:'name',
header: "用户名",
dataIndex: 'name',
width: 250,
editor: new fm.TextField({
allowBlank: false// 不能为空
})
},
{
header: "地区",
dataIndex: 'area',
width: 100,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'area',// 对应的选择框的ID
lazyRender:true,
listClass: 'x-combo-list-small'
})
},
{
header: "电子邮件",
dataIndex: 'email',
width: 220,
align: 'left',
editor: new fm.TextField({
allowBlank: true
})
},
{
header: "年龄",
dataIndex: 'age',
width: 70,
align: 'right',
editor: new fm.NumberField({
allowBlank: true,
allowNegative: false,
maxValue: 100
})
},
{
header: "生日",
dataIndex: 'birthDay',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'y/m/d',
minValue: '1970/01/01',//最小值
disabledDays: [0, 6],// 禁止选择的日期
disabledDaysText: '不许周末出生孩子'
})
},
{
header: "性别",
dataIndex: 'sex',
width: 95,
renderer: formatSex,
editor: new fm.Checkbox()
}
]);

// 默认情况下列是可排序的
cm.defaultSortable = true;

// 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
var User = Ext.data.Record.create([
// 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
{name: 'id', type: 'int' },
{name: 'name', type: 'string'},
{name: 'area'},
{name: 'email', type: 'string'},
{name: 'age', type: 'int'}, // automatic date conversions
{name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
{name: 'sex', type: 'bool'}
]);

// 创建 Data Store
var store = new Ext.data.Store({
// 使用 HTTP 加载
url: 'users.xml',

// 因为返回值是 XML, 所以我们创建一个解析器
reader: new Ext.data.XmlReader({
// 记录必须包含 "user" 标签
record: 'user'
}, User),

sortInfo:{field:'name', direction:'ASC'}// 排序信息
});

// 创建编辑器表格
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:800,
height:300,
autoExpandColumn:'name',
title:'功能管理',// 标题
frame:true,
clicksToEdit:1,//设置点击几次才可编辑
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据

// 顶部工具栏按钮
tbar: [
{
text: '新增',
iconCls:'xz',//按钮图标的CSS名称
handler : function(){// 点击按钮执行的操作
var n = grid.getStore().getCount();// 获得总行数
var p = new User({
id: n + 1,
name: '新数据' + n,
area: '',
email: 'Benson@163.com',
age: 20,
birthDay: (new Date()).clearTime(),
sex: true
});
grid.stopEditing();// 停止编辑
store.insert(n, p);// 插入到最后一行
grid.startEditing(n, 1);// 开始编辑1单元格
}
},
{
text: '删除',
iconCls:'sc01',
handler : function(){
//var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
if(rows.length==0){
Ext.MessageBox.alert('警告', '最少选择一条信息，进行删除!');
}else{
Ext.MessageBox.confirm('提示框', '您确定要进行该操作？',function(btn){
if(btn=='yes'){
if(rows){
for (var i = 0; i < rows.length; i++) {
//alert(rows[i].get("id"));
store.remove(rows[i]);
//store.remov