ExtJS佈局控制項

来源:http://www.cnblogs.com/maxiaobing/archive/2017/07/25/7235734.html
-Advertisement-
Play Games

Layout Controls Auto Layout Ext JS4中的容器的預設佈局是自動佈局。這個佈局管理器會自動地將組件放在一個容器中。 Fit Layout Fit佈局安排了容器的內容完全占據空間，它適合於容器的大小。Fit佈局通常用於具有單個項目的容器。Fit佈局是Card佈局的基類 A ...


Layout Controls

Auto Layout 

Ext JS4中的容器的預設佈局是自動佈局。這個佈局管理器會自動地將組件放在一個容器中。

Fit Layout 

Fit佈局安排了容器的內容完全占據空間，它適合於容器的大小。Fit佈局通常用於具有單個項目的容器。Fit佈局是Card佈局的基類

 1 Ext.onReady(function() {
 2     Ext.create("Ext.panel.Panel", {
 3         layout: "fit",　　//fit佈局
 4         title : "Fit layout panel",
 5         height: 400,
 6         width: 600,
 7         renderTo: "panel",
 8         items: [{
 9             xtype: "textfield",
10             fieldLabel: "Email"    
11         }]
12     });
13 });

Anchor Layout

anchor佈局管理器將一個容器的項目與容器的大小相比較。當容器被調整時，anchor佈局管理器會重新安排相對於容器的新大小的項目。您可以將anchor屬性配置為子項。

您可以在 anchor屬性中配置寬度和高度值以及 anchor屬性中的偏移值，如下所示。

1 anchor : "width% height%"
2 (or)
3 anchor : "offsetWidth offsetHeight"

您還可以通過指定偏移值和百分比來混合這兩個選項。這裡有一個簡單的面板，它有一個文本框和一個按鈕，並配置了一個anchor佈局。項目配置了anchor屬性。當你點擊這個按鈕時，面板的寬度和高度會增加5px。

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         layout: "anchor",
 4         title : "Anchor layout panel",
 5         width: 600,
 6         height: 400,
 7         items: [{
 8             xtype: "textfield",
 9             fieldLabel: "Name",
10             anchor: "95% 15%"
11         }, {
12             xtype: "button",
13             text: "Resize",
14             anchor: "-50, 15%",
15             listeners: {
16                 "click": function() {
17                     panel.setWidth(panel.getWidth() + 5);
18                     panel.setHeight(panel.getHeight() + 5);
19                 }
20             }
21         }],
22         renderTo: "panel"
23     });
24 });

另一個例子

 1 Ext.onReady(function() {
 2     var panel1 = new Ext.Panel({
 3         title : "Panel1",
 4         height : 100,
 5         anchor : '-50',
 6         html : "高度等於100，寬度=容器寬度-50"
 7     });
 8     var panel2 = new Ext.Panel({
 9          title: "Panel2",
10          height: 100,
11          anchor: '50%',   
12          html: "高度等於100,寬度=容器寬度的50%"   
13     });      
14     var panel3 = new Ext.Panel({   
15         title: "Panel3",   
16         anchor: '-10, -250',   
17         html: "寬度=容器寬度-10,高度=容器高度-250"   
18     });       
19     var win = new Ext.Window({   
20         title: "Anchor Layout",   
21         height: 400, 
22         width: 400,   
23         layout: 'anchor',   
24         items: [panel1, panel2, panel3]               
25     });   
26     win.show();
27 });

Box Layout

Ext.layout.container.Box是VBox和HBox佈局的基礎類。VBox和HBox分別代表垂直盒和水平盒。

下麵顯示一個帶有三個按鈕(A、B和C)的面板。這些按鈕是垂直排列在面板的中心

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "VBox layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "vbox",
 8             pack : "center",    //水平居中
 9             align : "center"    //垂直居中
10         },
11         defaults : {
12             xtype : "button",
13             margin: "10"
14         },
15         items: [
16             {text : "A"},
17             {text : "B"},
18             {text : "C"}
19         ],
20         renderTo: "panel"
21     });
22 });

代碼可以修改為使用hbox佈局。可以修改佈局配置，如下所示。

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "VBox layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "hbox",
 8             pack : "center",
 9             align : "middle"
10         },
11         defaults : {
12             xtype : "button",
13             margin: "10"
14         },
15         items: [
16             {text : "A"},
17             {text : "B"},
18             {text : "C"}
19         ],
20         renderTo: "panel"
21     });
22 });

Accordion Layout

Accordion佈局是VBox佈局的擴展。它可以垂直地排列一組面板，以摺疊和可擴展的特性。下麵顯示了使用Accordion佈局的面板的代碼片段。

 1 Ext.onReady(function() {
 2     var panel = new Ext.panel.Panel({
 3         renderTo : 'panel',
 4         title : '容器組件',
 5         layout : 'accordion',
 6         width : 600,
 7         height : 400,
 8         items : [{
 9                     title : '元素1',
10                     html : '元素1'
11                 }, {
12                     title : '元素2',
13                     html : '元素2'
14                 }, {
15                     title : '元素3',
16                     html : '元素3'
17                 }, {
18                     title : '元素4',
19                     html : '元素4'
20                 }]
21     });
22 });

Table Layout

 表格佈局用於呈現HTML表格元素。它具有一個表的所有屬性，最常用的是列屬性。

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "Table layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "table",
 8             columns: 2
 9         },
10         defaults : {
11             xtype : "button",
12             margin: "10"
13         },
14         items: [
15             {text : "A"},
16             {text : "B"},
17             {text : "C"},
18             {text : "D"},
19             {text : "E"},
20             {text : "F"}
21         ],
22         renderTo: "panel"
23     });
24 });

另一個例子

 1 Ext.onReady(function() {
 2     var panel = Ext.create("Ext.panel.Panel", {
 3         title : "Table layout panel",
 4         width: 600,
 5         height: 400,
 6         layout : {
 7             type : "table",
 8             columns: 3
 9         },
10         items : [{
11             title : "子元素1",
12             html : "這是子元素1中的內容",
13             rowspan : 2,
14             height: 108
15         }, {
16             title : "子元素2",
17             html : "這是子元素2中的內容",
18             colspan : 2,
19             width: 400
20         }, {
21             title : "子元素3",
22             html : "這是子元素3中的內容"
23         }, {
24             title : "子元素4",
25             html : "這是子元素4中的內容"
26         }],
27         renderTo: "panel"
28     });
29 });

Column Layout

 列佈局將容器安排在從左到右的獨立列中。在容器中使用列佈局的每個條目都配置了一個columnWidth屬性。所有項的列寬度屬性的值之和必須等於容器的總寬度。

您可以按百分比或具體值提供列寬的值。百分比值作為一個十進位數，其中總列的寬度等於1。

 1 Ext.onReady(function() {
 2     new Ext.Panel({
 3         renderTo : document.body,
 4         layout : "column",
 5         width : 500,
 6         height : 400,
 7         items : [{
 8             title : "列1",
 9             width : 200
10         }, {
11             title : "列2",
12             columnWidth : .3
13         }, {
14             title : "列3",
15             columnWidth : .3
16         }, {
17             title : "列4",
18             columnWidth : .4
19         }]
20     });
21 });

Border Layout

邊界佈局通常是Ext JS 4應用程式的主佈局。您可以使用諸如頁眉、頁腳和菜單這樣的區域來設計一個主佈局。在Ext JS 4中，主要用於構建單頁面應用程式，邊界佈局用於設計頁面的整個佈局。

邊界佈局將頁面劃分為不同的區域，如南北、東、西、和中心。中心區域必須進行配置，而其他區域是可選的。

 1 Ext.onReady(function() {
 2     new Ext.Viewport({
 3         layout : 'border',
 4         items : [{
 5             region : "north",
 6             height : 50,
 7             title : "頂部面板"
 8         }, {
 9             region : "south",
10             height : 50,
11             title : "底部面板"
12         }, {
13             region : "center",
14             title : "中央面板"
15         }, {
16             region : "west",
17             width : 100,
18             title : "左邊面板"
19         }, {
20             region : "east",
21             width : 100,
22             title : "右邊面板"
23         }]
24     })
25 });

Card Layout

 

卡片佈局，當在一個容器上使用時，把它的物品當作一個卡片的集合，並且在任何時候只顯示一個項目。

卡片佈局有一個重要的屬性叫做activeItem，它包含要顯示的項的信息。必須對該屬性進行操作，以更改要顯示的項。

 

 1 Ext.onReady(function() {
 2     var testpanel = new Ext.Panel({
 3         layout : 'card', // 卡片式佈局
 4         activeItem : 0, // 設置預設顯示的第一個子面板
 5         title : 'Ext.layout.CardLayout',
 6         frame : true,
 7         renderTo : Ext.getBody(),
 8         bodyPadding : 5,
 9         width : 600,
10         height : 400,
11         defaults : {
12             bodyStyle : 'background-color:#FFFFFF'
13         },
14         // 面板items配置項預設的xtype類型為panel 該預設值可以通過defaultType配置項進行更改
15         items : [{
16             title : '嵌套面板一',
17             html : '說明一',
18             id : 'p1'
19         }, {
20             title : '嵌套面板二',
21             html : '說明二',
22             id : 'p2'
23         }, {
24             title : '嵌套面板三',
25             html : '說明三',
26             id : 'p3'
27         }],
28         buttons : [{
29             text : '上一頁',
30             handler : changePage
31         }, {
32             text : '下一頁',
33             handler : changePage
34         }]
35     });
36     // 切換子面板
37     function changePage(btn) {
38         var index = Number(testpanel.layout.activeItem.id.substring(1));
39         if (btn.text == '上一頁') {
40             index -= 1;
41             if (index < 1) {
42                 index = 1;
43             }
44         } else {
45             index += 1;
46             if (index > 3) {
47                 index = 3;
48             }
49         }
50         testpanel.layout.setActiveItem('p' + index);
51     }
52 });

Summary

在本章中，我討論了Ext JS 4的控制項和佈局。所有的UI控制項都是從ext.component繼承的。組件提供了幾個屬性、方法和事件。Ext.container。容器類充當所有容器控制項的基類，如面板、視圖和工具欄。表單面板表示標準的HTML表單，具有諸如驗證、處理等功能。您可以將欄位控制項添加到表單面板中。Ext.layout。佈局是所有佈局組件的基類。邊界佈局定義了應用程式的主佈局，而卡片佈局用於顯示任何時間點上的一個項目。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在vue-cli生成的項目中使用karma+chrome進行單元測試
    用vue-cli生成項目時，如果選擇了單元測試，那麼會採用karma+mocha作為單元測試框架，預設使用的瀏覽器是PhantomJs。 Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。可啟動所有主流Web瀏覽器作為測試容器，運行時會啟動一個w ...
  • jQuery學習路線。
    通過jQuery思維導圖，來進行計劃的溫習/掌握 jQuery技能。 通過思維導圖的思路學習，是很好的學習方法之一，思路清晰、跟上環節，易於貫通，重要的是少走彎路。 這裡一共有6張圖，第1張是大綱路線，順著路線可以掌握jQuery常用的操作，後面5張是關於jQuery相關Api及性能優化的細節。 結 ...
  • html5 01 隨記
    一 HTML 是一種製作網站的標記語言 二、HTML基本語法 html標簽是html中的最基本單位 也是最重要的部分 通常使用尖角號 開始”<”和結束”>” 標簽分為兩種(成對出現 和不成 對出現) 雙標簽:（成對）<標簽名>內容</標簽名> 例如:<body></body><html></html ...
  • JS數組操作中的經典演算法
    冒泡排序<script type="text/javascript"> var arr = [3,7,6,2,1,5]; 定義一個交換使用的中間變數var temp = 0;for(i=0;i<arr.length;i++){ for(j=0;j<arr.length;j++){如果下一個元素小於當 ...
  • nodejs cookie與session
    cookie、session cookie：在瀏覽器保存一些數據，每次請求都會帶過來 *不安全、有限(4K) session：保存數據，保存在服務端 *安全、無限 session：基於cookie實現的 *cookie中會有一個session的ID，伺服器利用sessionid找到session文件 ...
  • cookie亂碼處理 示例
    package com.log; import java.io.IOException; import java.net.URLEncoder; import java.util.ArrayList; import java.util.Enumeration; import java.util.Li... ...
  • nodejs body-parser 解析post數據
    安裝 API 可以通過body-parser 對象創建中間件，當接收到客戶端請求時所有的中間件都會給req.body 添加屬性，請求體為空，則解析為空{} （或者出現錯誤）。 bodyParser.json(options) 中間件只會解析 json ，允許請求提任意Unicode編碼支持 gzip ...
  • 【canvas學習筆記一】基本認識
    <canvas>標簽定義了一塊畫布，畫布可以在網頁中繪製2D和3D圖象，現在先學習如何繪製2D圖象，繪製3D圖象屬於WebGL的內容（也就是網頁版的OpenGL，3D圖形介面）。 屬性 <canvas>只有width和height兩個屬性。如果沒有設置width和height屬性，canvas的預設 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類