第1個示例Pay是我們family168所做的例子中我最喜歡的一個,這是一個簡易的信息統計查詢工具,它甚至沒有服務器端的代碼,完全依靠JavaScript提供各種數據,在這個小系統中我們可以分類查看不同客戶的信息,以及由這這些信息匯總的圖形報表。
其中包月包年的用戶情況的統計使用的是maven2中的cobertura里的效果,這樣哪些vip已經過期,哪些vip快到期就一目了然,當然最重要的是視覺效果好。
首頁效果如下圖所示:
系統的最后一項功能是統計報表,我們可以按照用戶類型和是否過期生成兩種統計報表,報表圖形并不是使用Ext
JS實現的,而是用svg畫的,不過我們在顯示報表頁面的時候使用了iframe,這樣做的好處是不用將所有代碼都加載到首頁中,雖然RIA宣揚one
page one application,但是使用iframe可以在一定程度上避免一次加載過多的資源文件,在實際中依然擁有適用的場景。
顯示效果如下圖所示:
第2個示例Tracker是一個簡易的任務跟蹤系統,它使用了最基本的ssh開發框架,通過嵌入式數據庫hsqldb保存數據,依靠maven2管理項目流程。儼然已經是一個小而全的企業系統了。
Ext JS在系統中負責前臺展示的部分,后臺通過struts2結合json-lib與前臺的Ext JS進行交互,在開發過程中,我們封裝了JsonGrid和JsonTree這些基本組件,很大程度上減少了編碼的數量,提高的開發效率。
系統界面如下:
系統左側是以JsonTree為基礎生成的樹形菜單,顯示了所有工程的信息,我們可以直接在左側面板部分進行添加,修改,刪除等操作。
進行詳細配置和右鍵功能菜單效果如下圖所示:
統計系統下載:
http://www.family168.com/demo/pay.rar
任務追蹤系統下載:
http://www.family168.com/demo/tracker.rar
由于第2個示例是使用maven2構建的,所以不會使用maven2的朋友可以查看我們的maven2教程
http://family168.com/oa/maven2/html/index.html。如果想知道這2個示例的詳細講解,可以上我們的論壇
http://family168.com/bbsindex.asp?boardid=13查看。
posted on 2009-06-25 15:12
卡宴 閱讀(1536)
評論(3) 編輯 收藏 所屬分類:
Ext