第1個(gè)示例Pay是我們family168所做的例子中我最喜歡的一個(gè)，這是一個(gè)簡(jiǎn)易的信息統(tǒng)計(jì)查詢(xún)工具，它甚至沒(méi)有服務(wù)器端的代碼，完全依靠JavaScript提供各種數(shù)據(jù)，在這個(gè)小系統(tǒng)中我們可以分類(lèi)查看不同客戶(hù)的信息，以及由這這些信息匯總的圖形報(bào)表。
  其中包月包年的用戶(hù)情況的統(tǒng)計(jì)使用的是maven2中的cobertura里的效果，這樣哪些vip已經(jīng)過(guò)期，哪些vip快到期就一目了然，當(dāng)然最重要的是視覺(jué)效果好。
  首頁(yè)效果如下圖所示：

系統(tǒng)的最后一項(xiàng)功能是統(tǒng)計(jì)報(bào)表，我們可以按照用戶(hù)類(lèi)型和是否過(guò)期生成兩種統(tǒng)計(jì)報(bào)表，報(bào)表圖形并不是使用Ext JS實(shí)現(xiàn)的，而是用svg畫(huà)的，不過(guò)我們?cè)陲@示報(bào)表頁(yè)面的時(shí)候使用了iframe，這樣做的好處是不用將所有代碼都加載到首頁(yè)中，雖然RIA宣揚(yáng)one page one application，但是使用iframe可以在一定程度上避免一次加載過(guò)多的資源文件，在實(shí)際中依然擁有適用的場(chǎng)景。
    顯示效果如下圖所示：

第2個(gè)示例Tracker是一個(gè)簡(jiǎn)易的任務(wù)跟蹤系統(tǒng)，它使用了最基本的ssh開(kāi)發(fā)框架，通過(guò)嵌入式數(shù)據(jù)庫(kù)hsqldb保存數(shù)據(jù)，依靠maven2管理項(xiàng)目流程。儼然已經(jīng)是一個(gè)小而全的企業(yè)系統(tǒng)了。
Ext JS在系統(tǒng)中負(fù)責(zé)前臺(tái)展示的部分，后臺(tái)通過(guò)struts2結(jié)合json-lib與前臺(tái)的Ext JS進(jìn)行交互，在開(kāi)發(fā)過(guò)程中，我們封裝了JsonGrid和JsonTree這些基本組件，很大程度上減少了編碼的數(shù)量，提高的開(kāi)發(fā)效率。
  系統(tǒng)界面如下：

  系統(tǒng)左側(cè)是以JsonTree為基礎(chǔ)生成的樹(shù)形菜單，顯示了所有工程的信息，我們可以直接在左側(cè)面板部分進(jìn)行添加，修改，刪除等操作。
進(jìn)行詳細(xì)配置和右鍵功能菜單效果如下圖所示：


統(tǒng)計(jì)系統(tǒng)下載：http://www.family168.com/demo/pay.rar
任務(wù)追蹤系統(tǒng)下載：http://www.family168.com/demo/tracker.rar
由于第2個(gè)示例是使用maven2構(gòu)建的，所以不會(huì)使用maven2的朋友可以查看我們的maven2教程http://family168.com/oa/maven2/html/index.html。如果想知道這2個(gè)示例的詳細(xì)講解，可以上我們的論壇http://family168.com/bbsindex.asp?boardid=13查看。