extjs培訓進階教程(編輯修改稿)
2025-07-22 06:42 本頁面
【文章內容簡介】 0。 工具欄分隔符tbspacer 工具欄空白tbsplit 工具欄分隔按鈕tbtext 工具欄文本項 在傳統(tǒng)Web UI中，表單時重要的界面元素了。ExtJS的表單組件對普通HTML的表單進行了封裝，不僅提供了更靚麗的外觀表現(xiàn)，同時也擴充了功能。使用EXTJS時限Web應用，表單組件也是使用最為頻繁的組件了。表單及字段組件包含：form Form面板 checkbox checkbox錄入框bo bo選擇項datefield 日期選擇項field 表單字段fieldset 表單字段組hidden 表單隱藏域htmleditor html編輯器numberfield 數(shù)字編輯器radio 單選按鈕textarea 區(qū)域文本框textfield 表單文本框timefield 時間錄入項trigger 觸發(fā)錄入項6 ExtJs常用組件介紹 Panel組件 面板本身是一個容器，應用程序界面一般由一個個面板，通過不同的方式組合而成，里面可以包含各種其他的組件；面板一般由以下幾個部分組成：一個頂部工具欄、一個底部工具欄、面板頭部（即title）、面板底部、面板主區(qū)域。 panel示例 簡單的panel tabPanel panel的組成 panel的布局 panel的布局主要有十種之多，主要包括ContainerLayout (容器布局)、FitLayout (自適應布局)、AccordionLayout (折疊布局)、CardLayoutLayout (卡片式布局)、AbsoluteLayout (絕對位置布局)、FormLayout(表單布局)、ColumnLayout (列布局)、BoderLayout (邊框布局)、TableLayout (表格布局），下面介紹幾個常用的布局方式： ContainerLayout (容器布局) 提供容器作為布局的基礎邏輯，通常會被擴展而不通過new 關鍵字直接創(chuàng)建，一般作為默認布局存在。 ColumnLayout (列布局) TableLayout (表格布局） BoderLayout (邊框布局)BorderLayout邊框布局將布局分為5部分：east,south,west,north,center panel屬性簡介：有效的url字符串，把那個url中的body中的數(shù)據(jù)自動加載顯示:設為true則內容溢出的時候產(chǎn)生滾動條，默認為false:底部條，顯示在主體內，//代碼：bbar:[{text:39。底部工具欄bottomToolbar39。}],工具條中也可以放置相應的按鈕，以及其他的組件，分頁條等等:頂部條，顯示在主體內，//代碼:tbar:[{text:39。頂部工具欄topToolbar39。}],:按鈕集合，自動添加到footer中（footer參數(shù)，顯示在主體外）//代碼：buttons:[{text:按鈕位于footer}]。buttons:[new ({text:39。確定39。})]:footer中按鈕的位置，枚舉值為：left,right,center,默認為right面板中按鈕的顯示位置，不過按鈕的顯示并沒有在panel的主體中，而是顯示在底部的工具條上：設為true，顯示右上角的收縮按鈕，默認為false:true則可拖動，但需要你提供操作過程，默認為false:主體的內容：id值，通過id可以找到這個組件，建議一般加上這個id值；注：頁面中不能出現(xiàn)兩個id相同的組件否則頁面就會發(fā)生沖突，導致某些組件的位置等顯示不正確。：寬度：高度:標題：設為true，則點擊標題欄的任何地方都能收縮，默認為false.：（id）渲染到某個html元素中：（id）將某個html元素里面的內容在panel中呈現(xiàn)出來，：（id）渲染到某個html元素//applyTo,renderTo這兩個和contentEl方向是相反的，在表面上看applyTo和renderTo沒有太大的區(qū)別。 ViewPort組件 在前面的示例中，為了顯示一個面板，我們需要在頁面上添加一個，然后把 Ext控件渲染到這個div上。VeiwPort代表整個瀏覽器顯示區(qū)域，該對象渲染到頁面的body區(qū)域，并會隨著瀏覽器顯示區(qū)域的大小自動改變，一個頁面中只能有一個ViewPort實例，Viewport不需要再指定renderTo。 在Viewport 上常用的布局有fit、border 等。fit布局示例：border布局示例： 表格控件及其內部屬性 EXT中的表格功能非常強大，包括排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等使用功能。 簡單的Grid 首先，grid表格是二維的，橫著的是行，豎著的是列，就像設計數(shù)據(jù)庫表一樣，要設置我們的表有幾列。創(chuàng)建表格的列信息： 代碼如下:var cm=new ([ {header:39。編號39。,dataIndex:39。id39。}, {header:39。名稱39。,dataIndex:39。name39。}, {header:39。描述39。,dataIndex:39。desn39。} ])。 添加數(shù)據(jù)信息： 代碼如下:var data=[ [39。139。,39。name139。,39。desn139。], [39。239。,39。name239。,39。desn239。], [39。339。,39。name339。,39。desn339。], [39。439。,39。name439。,39。desn439。], [39。539。,39。name539。,39。desn539。] ]。 此處定義了一個二維數(shù)組，顯示到grid中就應該是5行3列，其中的列，分別對應id、name、desn。創(chuàng)建數(shù)據(jù)存儲對象：（列和數(shù)據(jù)聯(lián)系的橋梁） 代碼如下:var ds = new ({ proxy:new (data), reader:new ({},[ {name:39。id39。}, {name:39。name39。}, {name:39。desn39。} ]) })。 ()。//這個相當?shù)闹匾? ，proxy：定義從哪里獲得數(shù)據(jù)，此處為從內存獲取數(shù)據(jù)；reader定義如何解析數(shù)據(jù)。()用于進行數(shù)據(jù)的初始化。 若與后臺結合，proxy定義如下： proxy : new ({ url:url }), reader定義如下： reader : new
電大資料相關推薦
鄂ICP備17016276號-1