跳到主要內容

Ext-Js Grid + DWR

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

留言

這個網誌中的熱門文章

使用Apache Http Server進行Proxy和LoadB alance

環境概述 OS:Linux Apache Http Server:2.2.21 安裝可以使用rpm或是抓source下來compile,建議前者 rpm –ivh apache-http-xxx.rpm 這裡請注意一下安裝的版本 http.conf 參數設定 Proxy < VirtualHost *:80>      ProxyPass targetPath fromPath | fromUrl < VirtualHost/>  範例如下 < VirtualHost *:80>      ProxyPass /app http://DomainName或IP:8888/app      ProxyPassReverse /app http://DomainName或IP:8888/app < VirtualHost/> 上述的參數設定為,將某主機的http通訊協定下的Web application(app),對應到本台Web Server的app下。這樣的Proxy架構的設定對企業內的Web應用程式相當有用處,若是遇到Web Application Server掛點只需要修改Proxy對應,不需要動到dns等等,是個滿便宜的Proxy架構設定喔。﹝不過要注意Web Application要注意redirectc和forward等的撰寫,盡量不要有絕對IP的出現﹞

IBM MQ Server To Server的簡易設定

IBM MQ 的STS建置方式,IBM Red Book已經說明的滿完整的,這裡稍微整理一下,步驟如下 在 MQ-A Server MQ QMGR(MQA) 上需要建立的物件定義如下: • 遠端佇列定義 PAYROLL.QUERY • 傳輸佇列定義 MQB(預設 = 遠端佇列管理程式名稱) • 程序定義 MQA.TO.MQB.PROCESS(對於 WebSphere MQ for AIX、HP-UX、Solaris 與 Windows,及 MQSeries for Compaq Tru64 UNIX 與 OS/2 Warp,並非必要) • 傳送端通道定義 MQA.TO.MQB • 接收端通道定義 MQB.TO.MQA • 本端佇列定義 MQ2 以下是必須建立在 MQ-B Server MQ QMGR(MQB) 中的物件定義: • 遠端佇列定義 PAYROLL.RESPONE • 傳輸佇列定義 MQA(預設值=遠端佇列管理程式名稱) • 程序定義 MQB.TO.MQA.PROCESS(對於 WebSphere MQ for AIX、HP-UX、Solaris 與 Windows,及 MQSeries for Compaq Tru64 UNIX 與 OS/2 Warp,並非必要) • 傳送端通道定義 MQB.TO.MQA • 接收端通道定義 MQA.TO.MQB • 本端佇列定義 MQ4 1.先啟動MQ-A Server上的QMGR(MQA),並使用Runmqsc進入。 2.在佇列管理程式 MQA 上執行下列指令。 遠端佇列定義 DEFINE QREMOTE(PAYROLL.QUERY) DESCR('MQA 的遠端佇列') REPLACE + PUT(ENABLED) XMITQ(MQB) RNAME(MQ4) RQMNAME(MQB) 註: 遠端佇列定義並非實體的佇列,但卻是引導訊息至傳輸佇列 (MQB) 的一種方式,以便能將訊息送至佇列管理程式 MQB。 傳輸佇列定義 DEFINE QLOCAL(MQB) DESCR('對 MQB 的傳輸佇列') REPLACE + USAGE(XMITQ) PUT(ENABLED) GET(ENABLED) TRIGGER TRIGTYPE(FIRST) + INITQ(SYSTEM.CHANN

IReport字型下拉選單中文亂碼

這個問題其實也不是很大啦,不過當你有很多的中文字型檔的時候可能就不知道要選哪一個,啟動IReport後,開啟報表後會發現左邊下拉選單中,最下面的字型清單中有出現方框,顯示不出該字型的名稱,這幾個字型應該是判斷新細明體,標楷體及細明體,如下圖 下載IReport的Source Code來檢查一下,it.businesslogic.ireport.gui.MainFrame發現這個JComboBox有特別設定Arial字型,當然只要是中文的都顯示不出來ㄚ,所以點掉這一行後重新編譯,嘿嘿就可以了。 jComboBoxFont.setFont(new java.awt.Font("Arial", 0, 11)); 我目前使用的版本為 IReport-3.0.0-src