跳到主要內容

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

留言

這個網誌中的熱門文章

IReport中的條碼類別BcImage

最近有一個繳費單的專案,需要列印條碼,因為IReport本身就有提供列印條碼的功能,所以就用IReport設計繳費單然後再用Jasperreport API寫批次程式去產生PDF,資料量大概3000多筆(頁)拆成幾個檔案,可是就發生了一個問題居然發生部分繳費單的條碼有問題,看了一下程式研判是Race Condition因為程式採用的是多執行緒,若是依序個別產生是不會有問題,但是同時執行的時候就會亂掉,而且都錯在條碼,令我覺得很奇怪,後來我查了一下發現it.businesslogic.ireport.barcode.BcImage 類別我猜是這裡的問題,就先加上synchronized重新編譯在去執行,嘿嘿條碼就對了,做了一下壓測也正常,程式碼如下,不過這樣事不是對了可能還要仔細查查看。 public class BcImage { private static net.sourceforge.barbecue.Barcode bc = null; public synchronized static net.sourceforge.barbecue.Barcode getBarcode() { return bc; } public synchronized static BufferedImage getBarcodeImage(int type, Object aText, boolean showText, boolean checkSum) { return getBarcodeImage(type, aText, showText, checkSum,"",0,0); } public synchronized static BufferedImage getBarcodeImage(int type, Object aText, boolean showText, boolean checkSum, String applicationIdentifier, int width, int height) { // 2of7, 3of9, Bookland, Codabar, Code128,...

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...