10.GridPanel
数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。
示例一:最简单的GridPanel。
Ext.onReady(function(){ var data = [ [1,"张三",20], [2,"李四",20], [3,"王五",20], [4,"赵六",20] ] var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age"] }); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, columns:[ {header:"id",dataIndex:"id"}, {header:"姓名",dataIndex:"name"}, {header:"年龄",dataInde:"age"} ], autoExpandColumn:2// 默认自动扩展宽度的字段 }); });
示例二:可排序的GridPanel。
Ext.onReady(function(){ var data = [ [1,"张三",43], [2,"李四",34], [3,"王五",26], [4,"赵六",67] ] var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age"] }); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, columns:[ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true} ], autoExpandColumn:2// 默认自动扩展宽度的字段 }); });
示例三:使用Ext.grid.ColumnModel来创建表格中列的定义信息。
Ext.onReady(function(){ var data = [ [1,"张三",43], [2,"李四",34], [3,"王五",26], [4,"赵六",67] ] var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age"] }); var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true} ]); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:400, height:400, store:store, cm:colM, autoExpandColumn:2// 默认自动扩展宽度的字段 }); });
示例四:添加链接。
function showUrl(value){ return "<a href=http://"+value+">"+value+"</a>"; } Ext.onReady(function(){ var data = [ [1,"张三",43,"#"], [2,"李四",34,"#"], [3,"王五",26,"#"], [4,"赵六",67,"#"] ] var store = new Ext.data.SimpleStore({ data:data, fields:["id","name","age","homePage"] }); var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); });
示例五:使用JsonStore数据存储器。
function showUrl(value){ return "<a href=http://"+value+">"+value+"</a>"; } Ext.onReady(function(){ var data = [ { id:1,name:"张三",age:43,omePage:"#" }, { id:2,ame:"李四",age:34,homePage:"#" }, { id:3,name:"王五",age:26,homePage:"#" }, { id:4,name:"赵六",age:67,homePage:"#" } ] var store = new Ext.data.JsonStore({ data:data, fields:["id","name","age","homePage"] }); var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); });
示例六:使用XML储存数据。
<?xml version="1.0" encoding="UTF-8"?> <dataset> <row> <id>1</id> <name>张三</name> <age>43</age> <homePage>#</homePage> </row> <row> <id>2</id> <name>李四</name> <age>24</age> <homePage>#</homePage> </row> <row> <id>3</id> <name>王五</name> <age>45</age> <homePage>#</homePage> </row> <row> <id>4</id> <name>赵六</name> <age>12</age> <homePage>#</homePage> </row> </dataset>
1.记录类型。
示例一:当数据为二维数组时
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; //数据 var data = [ [1,"张三",45], [2,"李四",23], [3,"王五",12], [4,"赵六",56] ]; //创建记录类型Person var Person = new Ext.data.Record.create([ {name:"id",mapping:0}, {name:"name",mapping:1}, {name:"age",mapping:2} ]); //存储器 var store = new Ext.data.Store({ reader:new Ext.data.ArrayReader({id:0},Person), data:data }) //表格面板 var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"hello", title:"人员信息", width:500, height:300, store:store, columns:[ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true} ], autoExpandColumn:1 }) });
示例二:当数据为Json对象数组时
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; //数据 var data = [ { id:1, name:"张三", age:45, homePage:"#" }, { id:2, name:"李四", age:23, homePage:"#" }, { id:3, name:"王五", age:45, homePage:"bbs.ibeifeng.com" }, { id:4, name:"赵六", age:90, homePage:"www.qq.com" } ]; //创建记录类型Person var Person = new Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"} ]); //存储器 var store = new Ext.data.Store({ reader:new Ext.data.JsonReader({id:0},Person), data:data }) //表格面板 var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"hello", title:"人员信息", width:500, height:300, store:store, columns:[ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",sortable:true} ], autoExpandColumn:3 }) });
示例三:当数据为xml文件时。
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; //创建记录类型Person var Person = new Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"} ]); //存储器 var store = new Ext.data.Store({ reader:new Ext.data.XmlReader({ record: "row", id: "id" },Person), url:"data.xml" }) store.load(); //表格面板 var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"hello", title:"人员信息", width:500, height:300, store:store, columns:[ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true}, {header:"个人主页",dataIndex:"homePage",sortable:true} ], autoExpandColumn:3 }) });
1.自定义表格渲染函数
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; } function formatAge(value,metadata){ if(value > 30) { metadata.attr = 'style="background-color:#CCFFFF"'; } return value; } Ext.onReady(function(){ var store=new Ext.data.Store({ url:"data.xml", reader:new Ext.data.XmlReader({ record:"row"}, ["id","name","age","homePage"]) }); var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, autoExpandColumn:3// 默认自动扩展宽度的字段 }); store.load(); });
2.单元格选择模式
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; } function formatAge(value,metadata){ if(value > 30) { metadata.attr = 'style="background-color:#CCFFFF"'; } return value; } Ext.onReady(function(){ var store=new Ext.data.Store({ url:"data.xml", reader:new Ext.data.XmlReader({ record:"row"}, ["id","name","age","homePage"]) }); var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, sm:new Ext.grid.CellSelectionModel(), autoExpandColumn:3,// 默认自动扩展宽度的字段, bbar:[ { text:"获得所选单元格", handler:function(){ var cell = gridPanel.getSelectionModel().getSelectedCell(); alert(cell); alert(cell[0]); alert(cell[1]); alert(gridPanel.getColumnModel().getDataIndex(cell[1])); var colName = gridPanel.getColumnModel().getDataIndex(cell[1]); alert(gridPanel.getStore().getAt(cell[0]).get(colName)); } } ] }); store.load(); });
3.行选择模式。
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; } function formatAge(value,metadata){ if(value > 30) { metadata.attr = 'style="background-color:#CCFFFF"'; } return value; } Ext.onReady(function(){ var store=new Ext.data.Store({ url:"data.xml", reader:new Ext.data.XmlReader({ record:"row"}, ["id","name","age","homePage"]) }); var colM = new Ext.grid.ColumnModel([ {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, sm:new Ext.grid.RowSelectionModel(), autoExpandColumn:3,// 默认自动扩展宽度的字段, bbar:[ { text:"获得所选行", handler:function(){ var msg = ''; var cell = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get('id') + "," + rec.get('name') + '\n'; }); alert(msg); } } ] }); store.load(); });
4.复选框选择模式。
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; } function formatAge(value,metadata){ if(value > 30) { metadata.attr = 'style="background-color:#CCFFFF"'; } return value; } Ext.onReady(function(){ var store=new Ext.data.Store({ url:"data.xml", reader:new Ext.data.XmlReader({ record:"row"}, ["id","name","age","homePage"]) }); var sm = new Ext.grid.CheckboxSelectionModel(); var colM = new Ext.grid.ColumnModel([ sm, {header:"id",dataIndex:"id",sortable:true}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",renderer:showUrl} ]); var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"showGrid", title:"员工信息", width:500, height:400, store:store, cm:colM, sm:sm, autoExpandColumn:3,// 默认自动扩展宽度的字段, bbar:[ { text:"获得所选行", handler:function(){ var msg = ''; var cell = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get('id') + "," + rec.get('name') + '\n'; }); alert(msg); } } ] }); store.load(); });
1.表格视图。
<?xml version="1.0" encoding="UTF-8"?> <dataset> <row> <id>1</id> <name>张三</name> <age>43</age> <homePage>#</homePage> <jianli> 本人来自**大学,。。。。。。。 </jianli> </row> <row> <id>2</id> <name>李四</name> <age>24</age> <homePage>#</homePage> <jianli> 本人来自**大学,。。。。。。。 </jianli> </row> <row> <id>3</id> <name>王五</name> <age>45</age> <homePage>#</homePage> <jianli> 本人来自**大学,。。。。。。。 </jianli> </row> <row> <id>4</id> <name>赵六</name> <age>12</age> <homePage>#</homePage> <jianli> 本人来自**大学,。。。。。。。 </jianli> </row> </dataset>
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; } function formatAge(value,metadata){ if(value > 30) { metadata.attr = 'style="color:red"'; } return value; } function formateID(value,metadata){ if(value % 2 == 0) { metadata.attr = 'style="background-color:red"'; } return value; } Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; //记录类型 var Person = new Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"}, {name:"jianli",mapping:"jianli"} ]); //存储器 var store = new Ext.data.Store({ url:"data.xml", reader:new Ext.data.XmlReader( {record: "row",id:"id"}, Person) }); store.load(); var sm = new Ext.grid.CheckboxSelectionModel(); //表格面板 var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"hello", title:"人员信息", width:700, height:300, store:store, columns:[ sm, {header:"id",dataIndex:"id",sortable:true,renderer:formateID}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",sortable:true,renderer:showUrl} ], autoExpandColumn:4, sm:sm, bbar:[ {text:"获得所选行",handler:function(){ var msg = ""; var row = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get("id") + "," + rec.get("name") + "," + rec.get("age") + "," + rec.get("homePage") + "\n"; }); alert(msg); }} ], viewConfig:{ enableRowBody : true,//使用行体 getRowClass : function(record,index,rowParams,store){ rowParams.body = "<div style='padding:10px,10px,10px,10px'>" + record.get("jianli") + "</div>"; rowParams.cols=5; rowParams.bodyStyle="background-color:#FFFFCC" } } }) });
2.可编辑的表格。
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; } function formatAge(value,metadata){ if(value > 30) { metadata.attr = 'style="color:red"'; } return value; } function formateID(value,metadata){ if(value % 2 == 0) { metadata.attr = 'style="background-color:red"'; } return value; } Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; //记录类型 var Person = new Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"}, {name:"jianli",mapping:"jianli"} ]); //存储器 var store = new Ext.data.Store({ url:"data.xml", reader:new Ext.data.XmlReader( {record: "row",id:"id"}, Person) }); store.load(); var sm = new Ext.grid.CheckboxSelectionModel(); //表格面板 var gridPanel = new Ext.grid.EditorGridPanel({ id:"gridPanel", renderTo:"hello", title:"人员信息", width:700, height:300, store:store, columns:[ sm, {header:"id",dataIndex:"id",sortable:true,renderer:formateID}, {header:"姓名",dataIndex:"name",sortable:true, editor:new Ext.form.TextField({ allowBlank:false }) }, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",sortable:true,renderer:showUrl} ], autoExpandColumn:4, sm:sm, bbar:[ {text:"获得所选行",handler:function(){ var msg = ""; var row = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get("id") + "," + rec.get("name") + "," + rec.get("age") + "," + rec.get("homePage") + "\n"; }); alert(msg); }} ], viewConfig:{ enableRowBody : true,//使用行体 getRowClass : function(record,index,rowParams,store){ rowParams.body = "<div style='padding:10px,10px,10px,10px'>" + record.get("jianli") + "</div>"; rowParams.cols=5; rowParams.bodyStyle="background-color:#FFFFCC" } } }) });
3.属性表格面板。
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="qtip"; var propertyGrid = new Ext.grid.PropertyGrid({ id:"propertyPanel", title:"propertyPanel", width:300, height:300, renderTo:"hello", source: { "员工名称" : "张三", "出生日期" : new Date(2008,5,23), "性别" : '男', "是否已婚" : false, "年龄" : 29 } }) });
设置时间格式。
propertyGrid.getColumnModel().dateFormat = "Y年m月d日";
自定义编辑框。
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="qtip"; var propertyGrid = new Ext.grid.PropertyGrid({ id:"propertyPanel", title:"propertyPanel", width:300, height:300, renderTo:"hello", source: { "员工名称" : "张三", "出生日期" : new Date(2008,4,23), "性别" : '男', "是否已婚" : false, "年龄" : 29 }, customEditors:{ "性别":new Ext.grid.GridEditor(new Ext.form.ComboBox({ mode: 'local', displayField:"sex", triggerAction:"all", store:new Ext.data.SimpleStore({ fields:["sex"], data:[["男"],["女"]] }) })), "年龄":new Ext.grid.GridEditor(new Ext.form.NumberField({ allowBlank:false, allowDecimals:false, allowNegative:false, maxValue:100, maxText:"年龄不能大于100", minValue:1, minText:"年龄不能小于1", selectOnFocus:true, blankText:"必须填写年龄信息" })) } }); propertyGrid.getColumnModel().dateFormat = "Y年m月d日"; });
4.创建分组。
function showUrl(value){ return "<a href=http://"+value+" target='_blank'>"+value+"</a>"; } function formatAge(value,metadata){ if(value > 30) { metadata.attr = 'style="color:red"'; } return value; } function formateID(value,metadata){ if(value % 2 == 0) { metadata.attr = 'style="background-color:red"'; } return value; } Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; //记录类型 var Person = new Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"}, {name:"jianli",mapping:"jianli"} ]); //存储器 var store = new Ext.data.GroupingStore({ url:"data.xml", reader:new Ext.data.XmlReader( {record: "row",id:"id"}, Person), groupField:"homePage" }); store.load(); var sm = new Ext.grid.CheckboxSelectionModel(); //表格面板 var gridPanel = new Ext.grid.GridPanel({ id:"gridPanel", renderTo:"hello", title:"人员信息", width:700, height:300, store:store, columns:[ sm, {header:"id",dataIndex:"id",sortable:true,renderer:formateID}, {header:"姓名",dataIndex:"name",sortable:true}, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",sortable:true,renderer:showUrl} ], autoExpandColumn:4, sm:sm, bbar:[ {text:"获得所选行",handler:function(){ var msg = ""; var row = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get("id") + "," + rec.get("name") + "," + rec.get("age") + "," + rec.get("homePage") + "\n"; }); alert(msg); }} ], view:new Ext.grid.GroupingView({ groupTextTpl : '{text}(共{[values.rs.length]}条)',//定义分组行模板 groupByText : '使用当前字段进行分组',//表头菜单提示信息 showGroupsText : '表格分组',//表头菜单提示信息 showGroupName : true,//显示分组字段名称 startCollapsed : false,//展开分组 hideGroupedColumn : true//隐藏分组列 }) }) });