跳到主要內容

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

留言

這個網誌中的熱門文章

IBM MQ 5.3 如何匯出Qmgr

使用IBM MQ探險家也沒有匯出的功能,這樣其實在一些備份或是Cluster時,滿困擾的,不過你也知道IBM就是喜歡用SupportPacs等等的方式,ms03這個SupportPacs就是可以匯出Qmgr中所有的資訊也可以選擇想要的,以下是他的連結 http://www-1.ibm.com/support/docview.wss?rs=171&q1=mA1J&uid=swg24000673&loc=en_US&cs=utf-8&lang=en 若是Window的版本可以直接使用,若是unix或是linux系列的就請重新編譯了﹝makeFile﹞我有試過在RHEL編譯使用是可以的。 ※請注意一定要在有安裝MQ的Server方可執行喔 使用方式如下: saveqmgr -m xxx -v 53 -o xxx.cfg -m 指定需要匯出的Qmgr名稱 -v 版本 -o 匯出後檔案名稱 以下是相關參數的列表 Usage is: ./saveqmgr. [options], where [options] are one or more of the following optional switches -h | -? : gives help (this) -v version : determines which version of MQSC to generate and can be '2','5','51','52','53' or '6' The default is to generate mqsc at the version of the connected queue manager -m lqmgr : is the name of the local qmgr to connect (MQCONN) -r rqmgr : is the name of the remote qmgr (XMITQ name) -f [file] : allows the output file to be named, if -f is not specified, the outpu...

IBM MQ 5.3 Server安裝在RHEL 4

最近在整理一些文件,整理出來一些IBM MQ相關的文件,因為相關專案都是自己來開發,所以有些文件我個人覺得還滿有價值,其實安裝IBM MQ Server在RHEL還滿簡單的,只要注意幾個關鍵點,還有就是不要用光碟中的JRE就順多了,這個問題我有問過IBM,得到的答案是建議安裝Sun的JRE會比較好,真得讓我......步驟如下 1.先安裝RHEL 4 這裡就省略不說了 2.於Sun網站下載For Linux J2SDK1.4.2以上版本,建議下載.bin版本。進行安裝: 2.1 執行./xxx.bin,會自動解壓縮出xxx.rpm 2.2 rpm -ivh xxx.rpm 2.3 會詢問安裝目錄,請依需求安裝這裡為預設。 2.4 安裝完成後,調整/etc/profile檔案,設定JAVA_HOME指定到J2SDK安裝的目錄,並將J2SDK的bin目錄加入path中。 3.安裝IBM MQ 3.1安裝MQ需先進行License安裝,否則安裝程式不會執行,因光碟中提供的mqlicense.sh,IBM已有提供更新版,故建議下載IBM網站提供的update版本進行安裝。 ※mqlicense.sh一樣也要設定權限,chmod 755 mqlicense.sh 3.2安裝完後的license會在/tmp下建立一license的目錄所以要注意/tmp需要開777的權限Chmod 777 –R /tmp 3.3先設定變數(可以設定/etc/profile) Export LD_ASSUME_KERNEL=2.4.19 Export RPM_FORCE_NPTL=1 3.4依據下列順序安裝: rpm -i MQSeriesRuntime-5.3.0-1.i386.rpm rpm -i MQSeriesSDK-5.3.0-1.i386.rpm rpm -i MQSeriesServer-5.3.0-1.i386.rpm 3.5安裝後需要進行下列環境變數設定方可使用MQ ln –sf /opt/mqm/lib/xxx/* /opt/m...