1.表格视图。
|
<?xml version="1.0" encoding="UTF-8"?> <dataset> <row> <id>1</id> <name>张三</name> <age>43</age> <homePage>www.ibeifeng.com</homePage> <jianli> 本人来自**大学，。。。。。。。 </jianli> </row> <row> <id>2</id> <name>李四</name> <age>24</age> <homePage>www.ibeifeng.com</homePage> <jianli> 本人来自**大学，。。。。。。。 </jianli> </row> <row> <id>3</id> <name>王五</name> <age>45</age> <homePage>www.ibeifeng.com</homePage> <jianli> 本人来自**大学，。。。。。。。 </jianli> </row> <row> <id>4</id> <name>赵六</name> <age>12</age> <homePage>www.ibeifeng.com</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//隐藏分组列
}) }) });
|