第十八讲：ExtJS组件之GridPanel(下)

浅浅的花香味﹌ 2022-04-05 11:20 276阅读 0赞

1.表格视图。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;dataset&gt; &lt;row&gt; &lt;id&gt;1&lt;/id&gt; &lt;name&gt;张三&lt;/name&gt; &lt;age&gt;43&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;jianli&gt; 本人来自**大学，。。。。。。。 &lt;/jianli&gt; &lt;/row&gt; &lt;row&gt; &lt;id&gt;2&lt;/id&gt; &lt;name&gt;李四&lt;/name&gt; &lt;age&gt;24&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;jianli&gt; 本人来自**大学，。。。。。。。 &lt;/jianli&gt; &lt;/row&gt; &lt;row&gt; &lt;id&gt;3&lt;/id&gt; &lt;name&gt;王五&lt;/name&gt; &lt;age&gt;45&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;jianli&gt; 本人来自**大学，。。。。。。。 &lt;/jianli&gt; &lt;/row&gt; &lt;row&gt; &lt;id&gt;4&lt;/id&gt; &lt;name&gt;赵六&lt;/name&gt; &lt;age&gt;12&lt;/age&gt; &lt;homePage&gt;www.ibeifeng.com&lt;/homePage&gt; &lt;jianli&gt; 本人来自**大学，。。。。。。。 &lt;/jianli&gt; &lt;/row&gt; &lt;/dataset&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> function&nbsp;showUrl(value){ return&nbsp;"&lt;a href=http://"+value+" target='_blank'&gt;"+value+"&lt;/a&gt;"; } &nbsp; function&nbsp;formatAge(value,metadata){ if(value &gt; 30) { metadata.attr = 'style="color:red"'; } return&nbsp;value; } &nbsp; function&nbsp;formateID(value,metadata){ if(value % 2 == 0) { metadata.attr = 'style="background-color:red"'; } return&nbsp;value; } &nbsp; &nbsp; Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; &nbsp; //记录类型 var&nbsp;Person = new&nbsp;Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"}, {name:"jianli",mapping:"jianli"} ]); &nbsp; //存储器 var&nbsp;store = new&nbsp;Ext.data.Store({ url:"data.xml", reader:new&nbsp;Ext.data.XmlReader( {record: "row",id:"id"}, Person) }); &nbsp; store.load(); var&nbsp;sm = new&nbsp;Ext.grid.CheckboxSelectionModel(); &nbsp; //表格面板 var&nbsp;gridPanel = new&nbsp;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&nbsp;msg = ""; var&nbsp;row = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get("id") + ","&nbsp;+ rec.get("name") + ","&nbsp;+ rec.get("age") + ","&nbsp;+ rec.get("homePage") + "\n"; &nbsp; }); &nbsp; alert(msg); }} ], viewConfig:{ enableRowBody : true,//使用行体 getRowClass : function(record,index,rowParams,store){ rowParams.body = "&lt;div style='padding:10px,10px,10px,10px'&gt;"&nbsp;+ record.get("jianli") + "&lt;/div&gt;"; rowParams.cols=5; rowParams.bodyStyle="background-color:#FFFFCC" } } }) }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

2.可编辑的表格。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> function&nbsp;showUrl(value){ return&nbsp;"&lt;a href=http://"+value+" target='_blank'&gt;"+value+"&lt;/a&gt;"; } &nbsp; function&nbsp;formatAge(value,metadata){ if(value &gt; 30) { metadata.attr = 'style="color:red"'; } return&nbsp;value; } &nbsp; function&nbsp;formateID(value,metadata){ if(value % 2 == 0) { metadata.attr = 'style="background-color:red"'; } return&nbsp;value; } &nbsp; &nbsp; Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; &nbsp; //记录类型 var&nbsp;Person = new&nbsp;Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"}, {name:"jianli",mapping:"jianli"} ]); &nbsp; //存储器 var&nbsp;store = new&nbsp;Ext.data.Store({ url:"data.xml", reader:new&nbsp;Ext.data.XmlReader( {record: "row",id:"id"}, Person) }); &nbsp; store.load(); var&nbsp;sm = new&nbsp;Ext.grid.CheckboxSelectionModel(); &nbsp; //表格面板 var&nbsp;gridPanel = new&nbsp;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, &nbsp;&nbsp;&nbsp;&nbsp;editor:new&nbsp;Ext.form.TextField({ allowBlank:false &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;}, {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge}, {header:"个人主页",dataIndex:"homePage",sortable:true,renderer:showUrl} ], autoExpandColumn:4, sm:sm, bbar:[ {text:"获得所选行",handler:function(){ var&nbsp;msg = ""; var&nbsp;row = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get("id") + ","&nbsp;+ rec.get("name") + ","&nbsp;+ rec.get("age") + ","&nbsp;+ rec.get("homePage") + "\n"; &nbsp; }); &nbsp; alert(msg); }} ], viewConfig:{ enableRowBody : true,//使用行体 getRowClass : function(record,index,rowParams,store){ rowParams.body = "&lt;div style='padding:10px,10px,10px,10px'&gt;"&nbsp;+ record.get("jianli") + "&lt;/div&gt;"; rowParams.cols=5; rowParams.bodyStyle="background-color:#FFFFCC" } } }) }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

3.属性表格面板。

设置时间格式。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> propertyGrid.getColumnModel().dateFormat = "Y年m月d日"; </td> 
 </tr> 
 </tbody> 
</table>

自定义编辑框。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="qtip"; &nbsp; var&nbsp;propertyGrid = new&nbsp;Ext.grid.PropertyGrid({ id:"propertyPanel", title:"propertyPanel", width:300, height:300, renderTo:"hello", source: { "员工名称"&nbsp;: "张三", "出生日期"&nbsp;: new&nbsp;Date(2008,4,23), "性别"&nbsp;: '男', "是否已婚"&nbsp;: false, "年龄"&nbsp;: 29 }, customEditors:{ "性别":new&nbsp;Ext.grid.GridEditor(new&nbsp;Ext.form.ComboBox({ mode: 'local', displayField:"sex", triggerAction:"all", store:new&nbsp;Ext.data.SimpleStore({ fields:["sex"], data:[["男"],["女"]] }) })), "年龄":new&nbsp;Ext.grid.GridEditor(new&nbsp;Ext.form.NumberField({ allowBlank:false, allowDecimals:false, allowNegative:false, maxValue:100, maxText:"年龄不能大于100", minValue:1, minText:"年龄不能小于1", selectOnFocus:true, blankText:"必须填写年龄信息" })) } }); &nbsp; propertyGrid.getColumnModel().dateFormat = "Y年m月d日"; }); </td> 
 </tr> 
 </tbody> 
</table>

4.创建分组。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> function&nbsp;showUrl(value){ return&nbsp;"&lt;a href=http://"+value+" target='_blank'&gt;"+value+"&lt;/a&gt;"; } &nbsp; function&nbsp;formatAge(value,metadata){ if(value &gt; 30) { metadata.attr = 'style="color:red"'; } return&nbsp;value; } &nbsp; function&nbsp;formateID(value,metadata){ if(value % 2 == 0) { metadata.attr = 'style="background-color:red"'; } return&nbsp;value; } &nbsp; &nbsp; Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; &nbsp; //记录类型 var&nbsp;Person = new&nbsp;Ext.data.Record.create([ {name:"id",mapping:"id"}, {name:"name",mapping:"name"}, {name:"age",mapping:"age"}, {name:"homePage",mapping:"homePage"}, {name:"jianli",mapping:"jianli"} ]); &nbsp; //存储器 var&nbsp;store = new&nbsp;Ext.data.GroupingStore({ url:"data.xml", reader:new&nbsp;Ext.data.XmlReader( {record: "row",id:"id"}, Person), groupField:"homePage" }); &nbsp; store.load(); var&nbsp;sm = new&nbsp;Ext.grid.CheckboxSelectionModel(); &nbsp; //表格面板 var&nbsp;gridPanel = new&nbsp;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&nbsp;msg = ""; var&nbsp;row = gridPanel.getSelectionModel().each(function(rec){ msg = msg + rec.get("id") + ","&nbsp;+ rec.get("name") + ","&nbsp;+ rec.get("age") + ","&nbsp;+ rec.get("homePage") + "\n"; &nbsp; }); &nbsp; alert(msg); }} ], view:new&nbsp;Ext.grid.GroupingView({ groupTextTpl : '{text}(共{[values.rs.length]}条)',//定义分组行模板 groupByText : '使用当前字段进行分组',//表头菜单提示信息 showGroupsText : '表格分组',//表头菜单提示信息 showGroupName : true,//显示分组字段名称 startCollapsed : false,//展开分组 hideGroupedColumn : true//隐藏分组列 &nbsp; }) }) }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>