跳到主要內容

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

留言

這個網誌中的熱門文章

Pentaho kettle取指定目錄下的所有檔案

最近開始玩 BI的東西,而之前專案有使用到Pentaho Open Source這個好物.... Pentaho裡面很多東西,跟 Jasperreport一樣東西很多,我最先接觸到的是kettle ETL的工具,玩了一陣子,開始有空就把它寫下來,以免忘記。 Scan一個目錄下所有檔案,然後塞進去資料庫 1.先拉兩個 Input,一個Get File Names,一個是CSV file input,再拉一個 output 中的 Table output,然後把他連起來。 2.點開 Get File Names,File or directory設定你的指定目錄,Regular Expression則是輸入.*\.*$則是所有檔案,若是CSV則可.*\.torrent$這可以了,可以按一下 Preview rows看看是否正確。

Spring boot v1.5 (六) spring data jpa 基本操作

最近天氣好熱,做甚麼事都覺得很懶,想要寫個spring data jpa也是懶懶的,不過這部分卻也是滿重要的一部分,前一篇介紹 JDBCTemplate ,已經覺得跟以前寫SQL方式有所差異了,JPA帶來的是物件導向的設計面思考,說到JPA不得不提提 ORM ,Object-relational mapping主要想法為簡化及物件導向的設計,讓RDB更貼近Object,在設計上可以更加便利,甚至透過一些設計可以讓Table具有物件導向的特性如繼承等等,以往要使用ORM的框架,都會先以 Hibernate 進行,不過近來慢慢地轉向JPA,主要還是在減少程式碼、增加彈性等等,大體的功能沒有差異很大,所以從Hibernate轉到JPA問題不大,JPA要介紹的東西還滿多的,所以我這裡會再分成三個章節來介紹。 SPRING DATA JPA基本操作 JPQL & Named SQL & Native SQL Cache & DB Design Pattern SPRING DATA JPA更加簡化的程式撰寫,只需要一個 Interface內寫一些查詢 method就可以操作JPA,因為利用 method 組合查詢條件,確實很方便也很容易理解,若是都沒有辦法符合需求當然也可以自己實作一個來用當然沒有問題。 學習目的 :SPRING DATA JPA基本操作。 學習時數 :3.5hr 教學影片: pom.xml 說明 spring-boot-starter-web:配置 Web Project所需的函式庫。 spring-boot-starter-test:配置 unit or mock test 所需的函式庫。 spring-boot-starter-actuator:配置監控spring boot所需的函式庫,後續spring cloud會使用到,所以一開就導入。 spring-boot-starter-jdbc:配置使用jdbc所需的函式庫。 postgresql:配置postgresql連接Driver所需的函式庫。 jasypt-spring-boot-starter:加解密所需的函式庫。 spring-boot-starter-data-jpa:配置Spring data jpa所需的函式庫。

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