Extjs面板和佈局初探

時間  2019-11-13
標籤 extjs 面板 佈局 初探 简体版
原文   原文鏈接

面板至關於一張乾淨的白紙，若是直接在上面添加內容，將很難控制面板中內容的顯示位置，面板元素越多就越顯得凌亂，因此須要在面板上劃分不一樣的區域，將面板內容展現到但願的位置上。ExtJS經過提供多種佈局類來爲面板提供支持，主要包括以下10種, 我本身總結了兩句話, 先把它背起來,再慢慢研究這十種佈局是怎麼玩的."列表自折容, 卡表錨(描)邊絕", 稍微胡說下, 供你們能更快記憶. 你們都知道html有列表, 那麼列表把本身的容貌給折毀了,這叫"列表自折容", 有卡(信用卡,銀行卡,隨意啦), 有表(瑞士, OMEGA) 固然給本身描邊(裝飾本身),天下一絕啊,因此叫"卡表描邊絕". 言歸正傳, 這十種佈局方式分別爲:javascript

•ColumnLayout（列布局）, 在面板設置的對應代碼：layout : 'column', 即layout配置項名稱爲：columnhtml

•FormLayout（表單佈局）, 在面板設置的對應代碼：layout : 'form', 即layout配置項名稱爲：formjava

•FitLayout（自適應佈局）, 在面板設置的對應代碼：layout : 'fit', 即layout配置項名稱爲：fitapp

•AccordionLayout（摺疊佈局）, 在面板設置的對應代碼：layout : 'accordion', 即layout配置項名稱爲：accordionide

•ContainerLayout（容器佈局）
工具

 

•CardLayout（卡片式佈局）, 在面板設置的對應代碼：layout : 'card', 即layout配置項名稱爲：card佈局

•TableLayout（表格佈局）, 在面板設置的對應代碼：layout : 'table', 即layout配置項名稱爲：table動畫

•AnchorLayout（錨點佈局）, 在面板設置的對應代碼：layout : 'anchor', 即layout配置項名稱爲：anchorui

•BorderLayout（邊框佈局）, 在面板設置的對應代碼：layout : 'border', 即layout配置項名稱爲：borderspa

•AbsoluteLayout（絕對位置佈局）, 在面板設置的對應代碼：layout : 'absolute', 即layout配置項名稱爲：absolute

接下來分別介紹這10種佈局類的特色及使用方式。

本文所用的html文本以下。

 

 1 <html>
 2 <head>
 3     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 4     <title>Test Extjs Panel</title>
 5     <script type="text/javascript" src="Ext-4-Lib/datagrid/include-ext.js"></script>
 6     <script type="text/javascript" src="Ext-4-Lib/datagrid/options-toolbar.js"></script>
 7     <script type="text/javascript" src="Ext-4-Lib/class/panel.js"></script>
 8 </head>
 9 <body>
10     <div id="panel">
11     </div>
12 </body>
13 </html>
Common Html

 

 

 

一: 列佈局

     列布局Ext.layout.ColumnLayout對應面板佈局layout配置項的名稱爲column。這是一種多列風格的佈局樣式，每一列的寬度均可以根據百分比或固定值來進行設置，高度容許根據內容進行變化，它支持一個特殊的屬性columnWidth，每個加入到容器中的子面板均可以經過columnWidth配置項指定百分比或使用width配置項指定固定值，來肯定列寬。width配置項是以像素爲單位的固定寬度，必須是大於或等於1的數字。columnWidth配置項是以百分比爲單位的相對寬度，必須是大於0小於1的小數，例如「.25」。注意：全部列的columnWidth值相加必須等於1。1. 指定固定列寬代碼5-15中將建立包含兩個子面板的列布局示例。

二: 表單佈局
      Ext.layout.FormLayout是爲表單特殊設計的佈局，用來管理表單字段的顯示，一般狀況下直接使用Ext.form.FormPanel表單面板，由於它已經內置了表單佈局，而且提供了表單提交、讀取等表單的功能。使用form佈局的容器可使用一些表單特有的配置項，它們包括：
•hideLabels: (Boolean)：是否隱藏字段標籤，默認爲false。
•itemCls: (String)：每一個字段項和字段標籤上的樣式類，默認值爲‘x-form-item’。•labelAlign: (String)：字段標籤的對齊方式，默認爲空表示左對齊。
•labelPad: (Number)：字段標籤與字段直接的空白，默認爲5，該項只在提供labelWidth配置項的狀況下生效。
•labelWidth: (Number)：字段標籤的寬度，默認爲100。
任何組件均可以加入到表單佈局的容器中，可是擴展自Ext.form.Field類的組件能夠支持一些表單項的特殊屬性，它們包括：
•clearCls: (String)：應用到專門的清除div上的樣式，默認爲‘x-form-clear-left’。•fieldLabel: (String)：字段標籤上的文本，默認爲‘’。
•hideLabel: (Boolean)：設置是否隱藏標籤和分割符，默認爲false。
•itemCls: (String)：應用到表單字段及標籤上的樣式類，默認爲‘x-form-item’。•labelSeparator: (String)：字段標籤和字段自己直接的分隔符，默認爲‘:’。•labelStyle: (String)：應用到字段標籤上的樣式類。

 

 1 Ext.onReady(function(){
 2 //    Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg';
 3     Ext.QuickTips.init();
 4     var panel = Ext.create('Ext.Panel', {
 5         title: '登陸',
 6 //        tbar : ['頂端工具欄(top toolbars)'],
 7 //        bbar : ['底端工具欄(bottom toolbars)'],
 8         height : 400,
 9         width : 600,
10         frame : true,
11 //        applyTo : 'panel',
12         layout : 'form',
13         renderTo: 'panel',
14         layoutSeparator : ': ',
15 //        autoLoad: 'testPaging.html',
16         collapsible : true,
17         closable : true,
18         bodyStyle : 'background-color:#FFFFAA',
19         defaultType : 'textfield',
20         defaults : {
21             msgTarget : 'side'
22         },
23 //        html : '<div>面板體(body)</div>',
24         items : [
25             {
26                 fieldLabel : '用戶名',
27                 allowBlank : false,
28                 width : 250
29             },
30             {
31                 fieldLabel : '密碼',
32                 allowBlank : false,
33                 width : 250
34             }
35         ],
36         tools : [//設置面板頭部功能區
37             {
38                 id : 'toggle',
39                 tooltip: 'toggle'
40             },
41             {id : 'maximize'}
42         ],
43         buttons : [
44             new Ext.Button({
45                 text : '登陸'
46             }),
47             new Ext.Button({
48                 text : '取消'
49             })
50         ]
51     });
52     panel.initResizable();
53     panel.initDraggable();
54     
55 });
Extjs_form

 

三: 自適應佈局

      Ext.layout.FitLayout是佈局的基礎類，對應面板佈局配置項（layout）的名稱爲fit，使用fit佈局將使面板子元素自動充滿容器，若是在當前容器中存在多個子面板則只有第一個會被顯示。

注意：在本節的示例以前會簡單地介紹新概念，組件的xtype類型。xtype類型至關於組件的別名，經過使用xtype類型能夠實現組件的延時建立，並提供通常組件對應xtype類型的詳細列表。讀者要造成使用xtype的習慣，而減小new關鍵字的使用。

四: 折疊佈局

      Ext.layout.Accordion擴展自Ext.layout.FitLayout佈局，對應面板佈局（layout）配置項的名稱爲accordion。該佈局會包含多個子面板，任什麼時候候都只有一個子面板處於打開狀態，每一個子面板都內置了對展開和收縮功能的支持。

 

 1 Ext.onReady(function(){
 2 //    Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg';
 3     Ext.QuickTips.init();
 4     var panel = Ext.create('Ext.Panel', {
 5         title: '登陸',
 6         height : 400,
 7         width : 400,
 8         frame : true,
 9         layout : 'accordion',
10         renderTo: 'panel',
11         layoutSeparator : ': ',
12         collapsible : true,
13         closable : true,
14         bodyStyle : 'background-color:#FFFFAA',
15         layoutConfig : {
16             activeOnTop : true, // 打開的子面板置頂
17             fill : true, // 子面板充滿父面板的剩餘空間
18             hideCollapseTool : false, // 是否隱藏子面板的展開收縮按鈕
19             titleCollapse : true, // 子面板標題            
20             animate : true // 使用動畫效果
21         },
22         items : [
23             {
24                 title : '摺疊面板一',
25                 html : 'hello1'
26             },
27             {
28                 title : '摺疊面板二',
29                 html : 'hello2'
30             },
31             {
32                 title : '摺疊面板三',
33                 html : 'hello3'
34             }
35         ],
36         buttons : [
37             new Ext.Button({
38                 text : '登陸'
39             }),
40             new Ext.Button({
41                 text : '取消'
42             })
43         ]
44     });
45     panel.initResizable();
46     panel.initDraggable();
47     
48 });
Extjs_accordion

 

 

五: 容器佈局

Ext.layout.ContainerLayout提供了全部佈局類的基本功能，它沒有可視化的外觀，只是提供容器做爲佈局的基本邏輯，這個類一般被擴展而不經過new關鍵字直接建立。若是面板（panel）沒有指定任何佈局類，則它將會做爲默認佈局來建立。

 

六: 卡片佈局

      Ext.layout.CardLayout擴展自Ext.layout.FitLayout佈局，對應面板佈局（layout）配置項的名稱爲card。該佈局會包含多個子面板，任什麼時候候都只有一個子面板處於顯示狀態，這種佈局類常常用來製做嚮導和標籤頁。該佈局的重點方式是setActiveItem，由於一次只能顯示一個子面板，因此切換子面板的惟一途徑就是調用setActiveItem方法，它接受一個子面板id或索引做爲參數。CardLayout佈局並無提供一個子面板的導航機制，導航邏輯須要開發人員本身實現。

七: 表格佈局
      Ext.layout.TableLayout對應面板佈局layout配置項的名稱爲table。這種比較容許你很是容易地渲染內容到HTML表格中，能夠指定列數（columns），跨行（rowspan），跨列（colspan），能夠建立出複雜的表格佈局。
注意：必須使用layoutConfig屬性來指定屬於此佈局的配置，table佈局僅有惟一的佈局配置項columns，而包含在其中的子面板會具備rowspan和colspan兩個配置項。

八: 錨點佈局
      Ext.layout.AnchorLayout是根據容器大小爲其所包含的子面板進行定位的佈局，對應面板佈局（layout）配置項的名稱爲anchor。若是容器大小發生變化，全部子面板的位置都會根據規則從新計算，並自動渲染。使用anchor佈局須要注意配置項的使用。
anchorSize（父容器提供）。anchor佈局提供了anchorSize配置項用來設置虛擬容器的大小，默認狀況下anchor佈局是根據容器自身的大小來進行計算定位的。若是提供了anchorSize屬性則anchor佈局就會根據該尺寸生成一個虛擬容器，而後根據這個虛擬容器的大小來進行計算定位。anchor（子容器提供）。加入到使用anchor佈局面板中的子面板也都支持一個anchor配置項，

      它是一個包含2個值的字符串，水平值和垂直值，例如：‘100% 50%’，這個值告知父容器應該怎樣爲加入到其中的子面板進行定位，有效值包括以下3類。
百分比（Percentage）：1~100之間的任意百分比，第1項數值表示子面板佔父容器寬度的百分比，第2項數值表示子面板佔父容器寬高的百分比，例如‘100% 50%’表示，子面板寬度爲父容器的100%，而高度爲父容器的1/2，若是隻提供一個值（如：‘50%’）則只對子面板的寬度生效，高度保持默認值。
      偏移值（Offsets）：任意整數，能夠爲正數也能夠是負數，第1項數值表示子面板到父容器右邊緣的偏移量，第2項數值表示子面板到父容器下邊緣的偏移量，例如‘-50 -100’表示，子面板距父容器的右邊緣偏移50像素，即子面板的寬度爲父容器的寬度減去50像素；子面板距父容器的下邊緣偏移100像素，即子面板高度爲父容器的高度減去100像素。若是隻提供一個值（如：‘-50’）則只對子面板的寬度生效，高度保持默認值。
參考邊（Sides）：有效的值包括‘right’（或‘r’）和‘bottom’（或‘b’）。要求容器設置固定的大小或提供相應的anchorSize配置項纔會有正確的效果，例如‘r b’，說明父容器會計算與子容器寬度和高度的差值，而後按父容器體（body）的實際寬度和高度減去這個差值，從新爲子面板定位。

 

 1 Ext.onReady(function(){
 2 //    Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg';
 3     Ext.QuickTips.init();
 4     var panel = Ext.create('Ext.Panel', {
 5         title: '登陸',
 6         height : 400,
 7         width : 400,
 8         frame : true,
 9         layout : 'anchor',
10         renderTo: 'panel',
11         layoutSeparator : ': ',
12         collapsible : true,
13         closable : true,
14         bodyStyle : 'background-color:#FFFFAA',
15         items : [
16             {
17                 title : '錨點面板一',
18                 html : 'hello1',
19                 anchor : '30% 70%' // '-100 -200'
20             }//,
21 //            {
22 //                title : '錨點面板二',
23 //                html : 'hello2',
24 //                anchor : '30% 70%' // '-100 -200'
25 //            },
26 //            {
27 //                title : '錨點面板三',
28 //                html : 'hello3',
29 //                anchor : '30% 70%' // '-100 -200'
30 //            }
31         ],
32         buttons : [
33             new Ext.Button({
34                 text : '登陸'
35             }),
36             new Ext.Button({
37                 text : '取消'
38             })
39         ]
40     });
41     panel.initResizable();
42     panel.initDraggable();
43     
44 });
Extjs_anchor

 

 

 

九: 邊框佈局
      Ext.layout.BorderLayout對應面板佈局layout配置項的名稱爲
border。該佈局包含多個子面板，是一個面向應用的UI風格的佈局，它將整個容器分爲5個部分，分別是east、south、west、north、center。加入到容器中的子面板須要指定region配置項來告知容器要加入到哪一個部分，而且該佈局還內建了對面板分隔欄的支持。

十: 絕對位置佈局
      Ext.layout.AbsoluteLayout擴展自Ext.layout.AnchorLayout佈局，對應面板佈局（layout）配置項的名稱爲absolute。它能夠根據子面板中配置的x/y座標進行定位，而且座標值支持使用固定值和百分比兩種形式。

 

草原戰狼淘寶小店：http://xarxf.taobao.com/ 淘寶搜小矮人鞋坊，主營精緻美麗時尚女鞋，爲您的白雪公主挑一雙哦。謝謝各位博友的支持。

 

=================================================================================================

 

========================    以上分析僅表明我的觀點，歡迎指正與交流   ===============

 

========================    尊重勞動成果，轉載請註明出處，萬分感謝   ================

 

=================================================================================================

 

　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程