Ext-Js中有Grid的sample,想說試試看加上DWR的效果如何?感覺上還不錯,以下是我參考Ext-Js附的grid array sample,加上DWR調整一下的code,我想可能還要加上資料在Loading的效果會比較好。
array-grid.js
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// example of custom renderer function
function change(val){
if(val > 0){
return '' + val + '';
}else if(val < color="red">' + val + '';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '' + val + '%';
}else if(val < color="red">' + val + '%';
}
return val;
}
//要設定Dwr傳回的Map的對應格式
var recordType = Ext.data.Record.create(
[
{name:"reportid",mapping:"reportid",type:"string"},
{name:"reportName",mapping:"reportName",type:"string"}
]
);
var myReader = new Ext.data.JsonReader(
{
totalProperty:"totalSize",
root:"data"
},recordType
);
// create the data store
//這裡是很重要的,這裡還可以加上listener等等的屬性喔
var store = new Ext.data.Store({
proxy:new Ext.ux.data.DWRProxy({
dwrFunction: DwrReportIdBean.getReportbyId
}),
reader:myReader
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'reportid',header: "reportid", width: 160, sortable: true, dataIndex: 'reportid'},
{header: "reportName", width: 75, sortable: true, dataIndex: 'reportName'}
],
stripeRows: true,
autoExpandColumn: 'reportid',
height:350,
width:600,
title:'Array Grid'
});
//範例是loadData,這裡是load就可以了
store.load();
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
});
因為下載下來的Ext-Js中並不會有DWRProxy.js,參考Ext-Js網站上的資料找到這個ux的套件
http://extjs.com/forum/showthread.php?t=23884&highlight=dwrproxy
Server端DWR程式的部份 ,我有省略一些部份主要在於傳回型態要使用Map物件,因為使用JsonReader關係,若是自行組成JavaScript的array字串傳回,我試過好像不行
public Map getReportbyId(){
QueryCmd cmd = new QueryCmd();
cmd.init();
cmd.excute();
List list = cmd.
List lists = new ArrayList();
Iterator iterator = list.iterator();
StringBuffer str = new StringBuffer();
while(iterator.hasNext()){
ReportCheckBean bean = (ReportCheckBean)iterator.next();
Map row = new HashMap();
row.put("reportid",bean.getReportId());
row.put("reportName",bean.getReportName());
lists.add(row);
}
HashMap maps = new HashMap();
maps.put("totalSize",1);
maps.put("data",lists);
return maps;
}
array-grid.js
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// example of custom renderer function
function change(val){
if(val > 0){
return '' + val + '';
}else if(val < color="red">' + val + '';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '' + val + '%';
}else if(val < color="red">' + val + '%';
}
return val;
}
//要設定Dwr傳回的Map的對應格式
var recordType = Ext.data.Record.create(
[
{name:"reportid",mapping:"reportid",type:"string"},
{name:"reportName",mapping:"reportName",type:"string"}
]
);
var myReader = new Ext.data.JsonReader(
{
totalProperty:"totalSize",
root:"data"
},recordType
);
// create the data store
//這裡是很重要的,這裡還可以加上listener等等的屬性喔
var store = new Ext.data.Store({
proxy:new Ext.ux.data.DWRProxy({
dwrFunction: DwrReportIdBean.getReportbyId
}),
reader:myReader
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'reportid',header: "reportid", width: 160, sortable: true, dataIndex: 'reportid'},
{header: "reportName", width: 75, sortable: true, dataIndex: 'reportName'}
],
stripeRows: true,
autoExpandColumn: 'reportid',
height:350,
width:600,
title:'Array Grid'
});
//範例是loadData,這裡是load就可以了
store.load();
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
});
因為下載下來的Ext-Js中並不會有DWRProxy.js,參考Ext-Js網站上的資料找到這個ux的套件
http://extjs.com/forum/showthread.php?t=23884&highlight=dwrproxy
Server端DWR程式的部份 ,我有省略一些部份主要在於傳回型態要使用Map物件,因為使用JsonReader關係,若是自行組成JavaScript的array字串傳回,我試過好像不行
public Map getReportbyId(){
QueryCmd cmd = new QueryCmd();
cmd.init();
cmd.excute();
List list = cmd.
List lists = new ArrayList();
Iterator iterator = list.iterator();
StringBuffer str = new StringBuffer();
while(iterator.hasNext()){
ReportCheckBean bean = (ReportCheckBean)iterator.next();
Map row = new HashMap();
row.put("reportid",bean.getReportId());
row.put("reportName",bean.getReportName());
lists.add(row);
}
HashMap maps = new HashMap();
maps.put("totalSize",1);
maps.put("data",lists);
return maps;
}
留言
張貼留言