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

1.记录类型。示例一：当数据为二维数组时Ext.onReady(function()Ext.BLANK_IMAGE_URL = ./Ext/resources/images/default/s.gif;/数据var data = 1,张三,45,2,李四,23,3,王五,12,4,赵六,56;/创建记录类型Personvar 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:,id:4,name:赵六,age:90,homePage:;/创建记录类型Personvar 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;/创建记录类型Personvar 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 +value+;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 +value+;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(cell0);alert(cell1);alert(gridPanel.getColumnModel().getDataIndex(cell1);var colName = gridPanel.getColumnModel().getDataIndex(cell1);alert(gridPanel.getStore().getAt(cell0).get(colName););store.load(););3.行选择模式。function showUrl(value)return +value+;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 +value+;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:showG