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(); });
|