第十七讲：ExtJS组件之GridPanel(中)

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:"www.ibeifeng.com" }, { id:2, name:"李四", age:23, homePage:"www.163.com" }, { 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(); });