var grid = new Ext.grid.EditorGridPanel({ autoHeight: true, renderTo: 'grid', store: store, cm: cm, tbar: new Ext.Toolbar(['-', { //-表示菜单分隔符 text: '添加一行', handler: function(){ var p = new MyRecord({ id:'', name:'' }); grid.stopEditing(); //关闭表格的编辑状态 store.insert(0, p); //创建的Record插入store的第一行 grid.startEditing(0, 0); //激活第一行第一列的编辑状态 } }, '-', { text: '删除一行', handler: function(){ Ext.Msg.confirm('信息', '确定要删除？', function(btn){ if (btn == 'yes') { var sm = grid.getSelectionModel(); //获取表格的选择模型 var cell = sm.getSelectedCell(); //获取选中的单元格 var record = store.getAt(cell[0]); //通过行号得到store这一行对应的Record store.remove(record); //移除数据 } }); } }, '-']) });
为可编辑表格保存修改的结果
在上面例子的基础之上，添加一个保存按钮
text: '保存', handler: function(){ var m = store.modified.slice(0); //获得store中修改过得数据 for (var i = 0; i < m.length; i++) { //验证表格信息是否正确，是否包含空格 var record = m[i]; var fields = record.fields.keys; for (var j = 0; j < fields.length; j++) { var name = fields[j]; var value = record.data[name]; var colIndex = cm.findColumnIndex(name); var rowIndex = store.indexOfId(record.id); var editor = cm.getCellEditor(colIndex).field; if (!editor.validateValue(value)) { Ext.Msg.alert('提示', '请检查输入的数据是否正确！', function(){ grid.startEditing(rowIndex, colIndex); }); return; } } } var jsonArray = []; Ext.each(m, function(item) { jsonArray.push(item.data); //把修改过得数据放到jsonArray中 }); Ext.lib.Ajax.request( //使用Ajax请求提交给后台 'POST', 'save_data.jsp', {success: function(response){ //返回成功 Ext.Msg.alert('信息', response.responseText, function(){ store.reload(); }); },failure: function(){ //返回失败 Ext.Msg.alert("错误", "服务器保存数据出错！"); }}, 'data=' + encodeURIComponent(Ext.encode(jsonArray)) ); }
另外store可以设置属性pruneModifiedRecords: true。这样，每次remove或load操作时store会自动清除modified标记，可以避免出现下次提交时还会把上次那些modified信息都带上的现象。
限制表格输入的数据类型
NumberField
{ header:'ID', dataIndex:'id', editor:new Ext.grid.GridEditor(new Ext.form.NumberField({ //NumberField限制只能输入数字 allowBlank: false, allowNegative: false, //不能输入减号 maxValue: 10 })) }
ComboBox
var comboData = [ ['0','Java'], ['1','Android'] ]; { header:'ComboBox', dataIndex:'combo', editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ fields:['value','text'], data: comboData }), emptyText: '请选择', mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', readOnly:true })), renderer: function(value){ return comboData[value][1]; } }
DateField
{ header:'Date', dataIndex:'date', editor:new Ext.grid.GridEditor(new Ext.form.DateField({ format: 'Y-m-d', minValue: '2011-07-24', disabledDays: [0, 6], disabledDaysText: '选择周一到周六之间的日期' })), renderer: function(value) { return value.format("Y-m-d"); } }
属性表格控件PropertyGrid的使用
是在EditorGrid的基础上开发的更智能的高级表格组件
var grid = new Ext.grid.PropertyGrid({ title: '属性表格控件PropertyGrid', autoHeight: true, width: 400, renderTo: 'grid', viewConfig: { forceFit: true }, source: { "String": "String", "Date": new Date(Date.parse('07/24/2011')), "boolean": false, "float": .01 } });
禁用PropertyGrid编辑功能的方法
grid.on('beforeedit', function(e){ e.cancel = true; return false; });
根据表格的name获取value
grid.store.getById('Jason').get(value);
ExtJS中实现嵌套表格
先看效果：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript"> </script> <link type="text/css" href="https://www.jb51.net/Lib/ExtJs/2_2/resources/css/ext-all.css" /> <script type="text/javascript" src="https://www.jb51.net/Lib/ExtJs/2_2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="https://www.jb51.net/Lib/ExtJs/2_2/ext-all-debug.js"></script> <script type="text/javascript" src="https://www.jb51.net/Lib/ExtJs/2_2/source/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="https://www.jb51.net/Lib/ExtJs/plus/RowExpander.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var testData=[ ["lugreen","男",26,[["数学",100],["语文",150]]] ,["lisi","男",25,[["数学",100],["语文",150]]] ,["zhangsan","男",27,[["数学",120],["语文",158]]] ]; // storeTest= new Ext.data.SimpleStore({ fields: ["name","sex","age","grade"] ,data: testData }); var expander = new Ext.grid.RowExpander({ tpl : new Ext.XTemplate( '<div>', '', '</div>' ) }); expander.on("expand",function(expander,r,body,rowIndex){ //查找 grid window.testEle=body; //alert(body.id); if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){ //alert("a"); var data=r.json[3]; var store=new Ext.data.SimpleStore({ fields: ["class","degrade"] ,data:data }); var cm = new Ext.grid.ColumnModel([ {header: "科目",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true} ,{header: "成绩",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true} ]); Ext.DomQuery.select("div.detailData")[0]; var grid = new Ext.grid.GridPanel( { store:store, cm:cm, renderTo:Ext.DomQuery.select("div.detailData",body)[0], autoWidth:true, autoHeight:true } ); } }); //var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true}); var cm = new Ext.grid.ColumnModel([ expander ,{header: "姓名",dataIndex: 'name',width: 50,hideable:false,sortable:false} ,{header: "性别",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true} ,{header: "年龄",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true} ]); var grid = new Ext.grid.GridPanel( { id:'testgrid', store:storeTest, cm:cm, renderTo:"grid1", width:780, autoHeight:false, height:300, listeners:{}, plugins:[expander] } ); }); </script> <style type="text/css"> #div2 h2 { font-weight:200; font-size:12px; } .c1 h2 { font-weight:200; } </style> </head> <body> <div> </div> <div> </div> </body> </html>
其中使用到的"RowExpander.js"为extjs官方示例中自带的。
实现这个嵌套表格要注意两点技巧：
1.提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。