【正文】 工具條項目 tbseparator 工具欄分隔符 tbspacer 工具欄空白 tbsplit 工具欄分隔按鈕 tbtext 工具欄文本項 表單及字段組件包含： form Form 面板 checkbox checkbox 錄入框 bo bo 選擇項 datefield 日期選擇項 field 表單字段 fieldset 表單字段組 hidden 表單隱藏域 htmleditor html 編輯器 numberfield 數(shù)字編輯器 radio 單選按鈕 textarea 區(qū)域文本框 textfield 表單文本框 XX 項目業(yè)務(wù)需求說明書 第 5 頁 共 16 頁 timefield 時間錄入項 trigger 觸發(fā)錄入項 應(yīng)用 簡單示例 首先我們做一個簡單的 panel (function() { var myPanel=new ({ renderTo:(), title:39。 })。 /script 演示 HelloWord html xmlns= head meta equiv=ContentType content=text/html。)。 } (function () { alert(39。ExtJS庫已加載 !39。 } (fn)。ExtJS庫已加 39。Ext JS 學(xué)習(xí) 筆記 目 錄 1 開始 EXTJS .............................................................................................................. 1 獲取 EXTJS.......................................................................................................... 1 應(yīng)用 EXTJS.......................................................................................................... 1 演示 HELLOWORD............................................................................................... 2 2 組件的介紹和應(yīng)用 ..................................................................................................... 3 介紹 ................................................................................................................... 3 應(yīng)用 ................................................................................................................... 5 簡單示例 ..................................................................................................... 5 組件詳解 ............................................................................................................ 7 ................................................................................................... 7 布局控件 ..................................................................................................... 9 表格控件 ................................................................................................... 14 樹形控件 ................................................................................................... 15 表單控件 Form........................................................................................... 19 彈出窗口 ................................................................................................... 22 3 EXT 核心 ................................................................................................................ 28 ................................................................................................... 28 CSS 樣式操作 ................................................................................................... 29 DOM 操作 ........................................................................................................ 30 AJAX 介紹 ........................................................................................................ 34 XX 項目業(yè)務(wù)需求說明書 第 1 頁 共 16 頁 1 開始 extjs 獲取 extjs 要使用 ExtJS，那么首先要得到 ExtJS 庫文件，該框架是一個開源的，可以直接從官方網(wǎng)站下載，網(wǎng)址 把下載得到的 ZIP 壓縮文件解 壓 可以看到如下目錄和文件 應(yīng)用 extjs 應(yīng)用 extjs 需要在頁面中引入 extjs 的樣式及 extjs 庫文件，樣式文件為resources/css/， extjs 的 js 庫文件主要包含兩個， adapter/ext/ 及，其中 表示框架基礎(chǔ)庫， 是 extjs 的核心庫。 因此，要使用 ExtJS 框架的頁面中一般包括下面幾句： link rel=stylesheet type=text/css href=extjs/resources/css/ / 在 ExtJS 庫文件及頁面內(nèi)容加載完后， ExtJS 會執(zhí)行 中指定的函數(shù)，因此可以用，一般情況下每一個用戶的 ExtJS 應(yīng)用都是從 開始的，使用 ExtJS 應(yīng)用程序的代碼大致如下： script function fn() XX 項目業(yè)務(wù)需求說明書 第 2 頁 共 16 頁 { alert(39。)。 /script fn 也可以寫成一個匿名函數(shù)的形式，因此上面的代碼可以改成下面的形式： script function fn() { alert(39。)。ExtJS庫已加載 !39。 } )。 charset=utf8 / titleExtJS/title link rel=stylesheet type=text/css href=extjs/resources/css/ / script (function() { (hello,HelloWord)。 /script /head body /body XX 項目業(yè)務(wù)需求說明書 第 3 頁 共 16 頁 /html 2 組件的介紹和應(yīng)用 介紹 組件大致可以分成三大類，即基本組件、工具欄組件、表單及元素組件。test面板 39。test面板 39。 })。面板 139。面板 239。面板 139。 })。 最常見的UI 組件都是繼承自它 ,如果沒有 panel， extjs 可能就沒那么盛名咯 面板 Panel 是 ExtJS 控件的基礎(chǔ)，很高級控件都是在面板的基礎(chǔ)上擴展的，還有其它大多數(shù)控件也都直接或間接有關(guān)系。面板由以下幾個部分組成，一個頂部工具欄、一個底部工具欄、面板頭部、面板尾部、面板主區(qū)域幾個部分組件。 面板的類名為 ，其 xtype 為 panel，下面的代碼可以顯示出面板的各個組成部分： (function() { new ({ renderTo : (), title : 面板頭部 header, width : 300, height : 200, html : 39。, tbar : [{ text : 39。 }], bbar : [{ text : 39。 }], buttons : [{ text : 按鈕位于 footer }] })。 XX 項目業(yè)務(wù)需求說明書 第 9 頁 共 16 頁 在 panel 中有個很重要的屬性 Items 比較重要，設(shè)置它的值就是給 panel 添加子項 如下代碼 (function() { new ({ renderTo : (), title : 面板頭部 header, width : 300, height : 200, items:[{ xtype:39。 }] })。 顯示效果如下圖 同時 panel 如同一張白紙任我們再它上面進行任何布局，添加任何組件 布局控 件 所謂布局 就是指容器組件中子元素的分布、排列組合方式。 ExtJS 的布局基類為 ，其它布局都是繼承該類?？创a： 下面是列的布局 (function(){ new ({ renderTo:(), width:400, height:200, layout:column, items:[{columnWidth:.5, title:面板 1}, {columnWidth:.5, title:面板 2}] })。