Ext.onReady(function() { Ext.QuickTips.init(); // 格式化性别显示,这是个 renderer, 渲染器 function formatSex(value) { return value ? "男" : "女"; } var fm = Ext.form; var memoEditor = null;// 声明一个行编辑控件的实例 // 声明一个行编辑控件的实例 memoEditor = new Ext.ux.grid.MyRowEditor({ saveText : '保存', cancelText : '取消' }); var sm = new Ext.grid.RadioboxSelectionModel({ singleSelect:true }); // 列模型定义了表格所有列的信息, // dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建) var cm = new Ext.grid.ColumnModel([sm,{ id:'str', header : "TEMP", dataIndex : 'str', hidden:true, width : 50 },{ id : 'id', header : "编号", dataIndex : 'id', width : 50, editor : new fm.TextField({ allowBlank : false // 不能为空 }) }, { 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 : Ext.util.Format.dateRenderer('Y-m-d'), // 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 : 'str', type : 'string' },{ name : 'id', type : 'int' }, { name : 'name', type : 'string' }, { name : 'area' }, { name : 'email', type : 'string' }, { name : 'age', type : 'int' }, { name : 'birthDay', mapping : 'birth', type : 'date', dateFormat : 'Y-m-d' }, { name : 'sex', type : 'bool' }]); // 创建 Data Store var store = new Ext.data.Store({ // 使用 HTTP 加载 url : 'jsonStore.txt', // 因为返回值是 XML, 所以我们创建一个解析器 reader : new Ext.data.JsonReader({ // 记录必须包含 "user" 标签 // totalProperty:"t", root : "total" }, User), sortInfo : { field : 'name', direction : 'ASC' }// 排序信息 }); // 创建编辑器表格 var grid = new Ext.grid.GridPanel({ store : store, cm : cm, renderTo : 'editor-grid', width : 800, height : 300, listeners:{ 'rowdblclick' : function() {//行双击事件 if (employBox.getSelected()) {//事先定义的复选框 var employBox = new Ext.grid.CheckboxSelectionModel({ singleSelect : 'true' }) var rec = grid.getSelectionModel().getSelected(); alert(rec.data['str']); } else { Ext.MessageBox.alert("操作提示", "请选择客户信息!"); } } }, buttons: [{text:'Save',handler:function(){alert("111")}},{text:'Cancel',handler:function(){alert("222")}}], region : 'center', loadMask : { msg : '正在加载数据,请稍侯……' }, plugins : [memoEditor], 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({ str:'', id : '', name : '', area : '', email : '', age : '', birthDay : '', sex : '' }); memoEditor.stopEditing();// 停止编辑 store.insert(0, p);// 插入到最后一行 memoEditor.startEditing(0, 1);// 开始编辑1单元格 firstAddRowNumber = true; } },{ text : '编辑', iconCls : 'xz',// 按钮图标的CSS名称 handler : function() { memoEditor.stopEditing();// 停止编辑 memoEditor.startEditing(updateBtnRowIndex,1);// 开始编辑1单元格 } }, { text : '删除', iconCls : 'sc01', handler : function() { var rec = grid.getSelectionModel().getSelected(); if (!rec) { return false; } grid.store.remove(rec); } }, { text : '保存', iconCls : 'bc', handler : function() { var m = store.modified.slice(0);// 得到修改过的记录 var jsonArray = [];// Ext.each(m, function(item) {// 循环得到每一个修改多的记录 alert(item.data['id']); jsonArray.push(item.data); }); var recordtoedit = grid.getSelectionModel() .getSelected();// 返回值为 Record 类型 if (recordtoedit) { Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名 } store.modified = [];// 保存后清楚修改过的记录,以便下次不再重复提交数据 } }/* * , { text : '查询', iconCls : 'cx', handler : function() { } } */] }); var sourceName = ""; memoEditor.on('afteredit', function(e) {//保存按钮事件 Ext.Msg.alert("提示","保存"); alert(e.record.data['id']); },grid); memoEditor.on('beforeedit', function(rowedit,index) {//编辑之前按钮事件 var rec = store.getAt(index); alert(rec.data['str']); if(firstAddRowNumber == true){ if(store.getAt(rowIndex).data['id'] == ''){ grid.store.remove(store.getAt(0)); } firstAddRowNumber = false; rowIndex = index; }else{ rowIndex = index; } }); memoEditor.on('validateedit', function() {//验证按钮事件 Ext.Msg.alert("提示","验证"); }); memoEditor.on('canceledit', function(rowedit,index) {//取消按钮事件 var rec = store.getAt(index); rec.data['name'] = sourceName; if(store.getAt(rowIndex).data['id'] == ''){//只有新增的行ID 才会是空的 grid.store.remove(store.getAt(rowIndex)); } }); grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) { updateBtnRowIndex = rowIdx; }); // 触发数据加载 store.load(); });