【正文】 :true})。 UserDAO userDao=new UserDAO()。 String username=(username)。 } })。 } })。系統(tǒng)登錄失敗 39。提示 39。)。,39。, //成功 success:function(form, action){ (39。,//去到后臺(tái)服務(wù) 器的地址 method:39。, url:39。 //登錄方法 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 21 頁 共 16 頁 function login(){ ({ clientValidation:true, waitMsg:39。reset39。button39。login39。button39。center39。under39。密碼不能為空 39。password39。pwd39。password39。textfield39。under39。請(qǐng)輸入用戶名 39。username39。username39。textfield39。center39。textalign:center39。elId39。LOGIN39。images/default/39。 表達(dá)能力有限，描述性的東西我就不多說了 ，如果你用上了 Ext 你就慢慢能理解它了。 } public void setItems(List items) { = items。 } public void setResults(long results) { = results。 private List items。 import 。 return ()。 return xml。 (temp[], c)。 String b=()。 i ()。 XStream xs=new XStream(new DomDriver())。 (total)。 (recordTotal)。 return ()。 (beanList)。 public class ExtHelper { //把 list數(shù)據(jù)轉(zhuǎn)換成 json格式的數(shù)據(jù) public static String getJsonFromList(long recordTotal,List beanList){ TotalJson total=new TotalJson()。 import 。 import 。 import 。 } } XX 項(xiàng)目業(yè)務(wù)需求說明書 第 18 頁 共 16 頁 這是把 Bean 轉(zhuǎn)換成 JSON和 XML 的幫助類 ，詳細(xì)內(nèi)容就不 做 解釋了，看代碼 就能明白一 切 ， 此類需要加載的 jar包 package util。 ().write(json)。 String json=(lst)。 UserDAO userDao=new UserDAO()。 public class TreeAction extends DispatchAction { public ActionForward getTreeDate(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws IOException { (charset=UTF8)。 import 。 import 。 import 。 import 。 import 。 })。//得到的節(jié)點(diǎn) = new ({//樹節(jié)點(diǎn)的數(shù)據(jù)來源 url : ?id=+,//請(qǐng)求的路徑 baseParams : {//請(qǐng)求參數(shù) //id : } })。beforeload39。樹形結(jié)構(gòu) 39。, id:101,//默認(rèn)為 0 draggable : false, iconCls:b })。 var root = new ({ expanded:true, text:39。我們來看下面的代碼： (function(){ =39。 樹的節(jié)點(diǎn)信息。 var tree=new ({ renderTo:() , root:root, width:100 })。 (new ({ id:c1, text:子節(jié)點(diǎn) 2 }))。 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 15 頁 共 16 頁 這里只做了些簡單的示例演示，如果想詳細(xì)了解表格控件請(qǐng)查閱 EXT 相關(guān)資料和書籍 樹形控件 樹控件由 類定義，控件的名稱為 treepanel， TreePanel 類繼承自 Panel 面板。 var grid = new ({ renderTo:(), ds: ds, cm: cm, width:300, autoHeight:true })。} ]) })。}, {name: 39。}, {name: 39。 //數(shù)據(jù)源定義 var ds = new ({ proxy: new (data), reader: new ({}, [ {name: 39。des539。name539。539。des439。name439。439。des339。name339。339。des239。name239。239。des139。name139。139。} ])。,dataIndex:39。}, {header:39。,dataIndex:39。}, {header:39。,dataIndex:39。表格的列信息由類 定義、而表格的數(shù)據(jù)存儲(chǔ)器由 定義，數(shù)據(jù)存儲(chǔ)器根據(jù)解析的數(shù)據(jù)不同分為 JsonStore、 SimpleStroe、 GroupingStore 等 廢話不多說了，直接看代碼： (function() { //定義列 var cm = new ([ {header:39。表格由類 定義，繼承自 Panel，其 xtype為 grid。 })。 })。center39。center39。west39。west39。east39。east39。south39。south39。north39。north39。border39。該布局把容器分成東南西北中五個(gè)區(qū)域，分別由 east， south, west， north, cente來表示，在往容器中添加子元素的時(shí)候，我們只需要指定這些子元素所在的位置， Border布局會(huì)自動(dòng)把子元素放到布局指定的位置。 })。 ExtJS的容器組件包含一個(gè) layout 及 layoutConfig 配置屬性，這兩個(gè)屬性用來指定容器使用的布局及布局的詳細(xì)配置信息，如果沒有指定容器組件的 layout 則默認(rèn)會(huì)使用 ContainerLayout 作為布局，該布局只是簡單的把元素放到容器 中，有的布局需要 layoutConfig 配置，有的則不需要 layoutConfig 配置。 Ext 的所有容器組件都支持而局操作，每一個(gè)容器都會(huì)有一個(gè)對(duì)應(yīng)的布局，布局負(fù)責(zé)管理容器組件中 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 10 頁 共 16 頁 子元素的排列、組合及渲染方式等。 })。htmleditor39。 })。底部工具欄 bottomToolbar39。頂部工具欄 topToolbar39。h1面板主區(qū)域 /h139。面板類中還內(nèi)置了面板展開、關(guān)閉等功能，并 提供一系列可重用的工具按鈕使得我 們可以輕松實(shí)現(xiàn)自定義的行為，面板可以放入其它任何容器中，面板本身是一個(gè)容器，他 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 8 頁 共 16 頁 里面又可以包含各種其它組件。應(yīng)用程序的界面一般情況下是由一個(gè)一個(gè)的面板通過不同組織方式形成。 效果如下圖 組件詳解 Panel 是 extjs 中最常用的一款組件，也是開發(fā)中用的最多的一款組件。 })] })。 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 7 頁 共 16 頁 }), new ({ title : 面板 3, height : 30, html:39。 }), new ({ title : 面板 2, height : 30, html:39。 效果如下圖 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 6 頁 共 16 頁 接下來我們創(chuàng)建一個(gè) tabpanel (function() { var panel = new ({ renderTo : (), width : 300, height : 200, activeTab:0, items : [new ({ title : 面板 1, height : 30, html:39。 })。, width:400, height:300, html:39。 基本組件有： xtype Class box 具有邊框?qū)傩缘慕M件 XX 項(xiàng)目業(yè)務(wù)需求說明書 第 4 頁 共 16 頁 button 按鈕 colorpalette 調(diào)色板 ponent 組件 container 容器 cycle dataview 數(shù)據(jù)顯示視圖 datepicker 日期選擇面板 editor 編輯器 editrid 可編輯的表格 grid 表格 paging 工具欄中的間隔 panel 面板 progress 進(jìn)度條 splitbutton 可分裂的按鈕 tabpanel 選項(xiàng)面板 treepanel 樹 viewport 視圖 window 窗口 工具欄組件有 toolbar 工具欄 tbbutton 按鈕 tbfill 文件 tbitem