Ext JS 6學習文檔–第2章–核心概念
核心概念
在下一章咱們會構建一個示例項目，而在這以前，你須要學習一些在 Ext JS 中的核心概念，這有助於你更容易理解示例項目。這一章咱們將學習如下知識點：html
- 類系統，建立和擴展類
- 事件
- Ext JS 對象的查詢
- 容器
- 佈局
class system(類系統)java
Ext JS 提供了不少功能，使得它建立和處理類變得簡單。如下是在 Ext JS 6 的類系統中的幾大組成類：git
- Ext
- Base
- Class
- ClassManager
- Loader
Ext 類
Ext 是一個全局單例的對象，在 Sencha library 中它封裝了全部的類和許多實用的方法。許多經常使用的函數都定義在 Ext 對象裏。它還提供了像其餘類中一些頻繁使用的方法的快速調用。github
咱們看一下在 Ext 類中定義的方法和屬性：數組
application 方法
這裏應用是用 Ext.application 方法初始化的。這個方法的參數是一個 Ext.app.Application 對象，這個方法會加載 Ext.app.Application 類，並在頁面加載完成後開始應用給定的配置。app
Ext.app.Application 這個類表明咱們的整個應用，這在第1章(入門指南)講過，講過的吧？是吧？下面是 Ext.app.Application 的使用例子：框架
|
1
2
3
4
5
6
7
|
Ext.application({
name: 'MyApp',
extend:'MyApp.Application',
launch: function() {
}
}) ;
|
上面代碼建立一個名爲 MyApp 的全局變量。咱們的應用裏全部的類都將歸屬於在這樣一個命名空間下面。這將下降全局變量產生衝突的可能。dom
define 方法
你能夠用這個方法定義或者重寫一個類。 這個方法有三個參數，如如下代碼所示。 在這裏 name 參數是你要定義的類名，data 參數是應用於這個類的屬性，callback 是可選參數，這個函數將會在這個類被建立後調用：異步
|
1
|
Ext.define(name,data, callback)
|
下列代碼建立一個名爲 Car 的類：ide
|
1
2
3
4
5
6
7
8
9
10
11
|
Ext.define('Car', {
name: null,
constructor: function(name) {
if (name) {
this.name = name;
}
},
start: function() {
alert('Car started');
}
}) ;
|
你還可使用 define 繼承擴展一個類：
|
1
2
3
4
5
6
|
Ext.define('ElectricCar', {
extend: 'Car',
start: function() {
alert("Electric car started");
}
}) ;
|
若是你想替換一個父類方法的實現，你可使用 Ext.define 來重寫這個方法，如如下代碼所示：
|
1
2
3
4
5
6
7
|
Ext.define('My.ux.field.Text', {
override: 'Ext.form.field.Text',
setValue: function(val) {
this.callParent(['In override']);
return this;
}
});
|
細心的同窗可能發現了當咱們繼承和重寫時使用的屬性是不一樣的，繼承咱們使用 extend 而重寫使用 override ，這二者之間有什麼區別呢？你必定感到疑惑，這裏我很是有必要給你解釋清楚，聽我慢慢道來。
首先說繼承並擴展一個類，這等同因而一個新的類，仍然能夠在這個新的類裏增長本身獨有的方法和屬性或者重寫父類的方法。
|
1
2
3
4
5
6
7
8
|
Ext.define('MyApp.view.main.Test', {
extend: 'Ext.grid.Panel',
xtype: 'maintest',
title: 'Personnel',
say:function(){
alert(123);
}
});
|
這裏我繼承了 gridpanel 類，並增長了一個 say方法，如下是輸出調用 say 方法的運行結果。
這應該很好理解，Test 繼承了 grid panel 以後是一個新的類了，而這裏若是建立 Ext.grid.Panel 對象是調用不了 say 方法的。
那麼如今我把 extend 改成 override 咱們再看一下：
|
1
2
3
4
5
6
7
8
|
Ext.define('MyApp.view.main.Test', {
override: 'Ext.grid.Panel',//改成 override 了
xtype: 'maintest',
title: 'Personnel',
say:function(){
alert(123);
}
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
name: 'MyApp',
requires: [
'MyApp.view.main.Main',
'MyApp.view.main.Test'//我這裏引入了 Test
],
stores: [
// TODO: add global / shared stores here
],
launch: function () {
var test = Ext.create("MyApp.view.main.Test",{
title: 'Personnel'
});
test.say();
},
onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});
|
運行結果：
咱們能夠看到我只是簡單的把 extend 替換成 override 就報錯說不能識別的類名。可是上面我也是引入了它的引用的(requires)，可見 extend 和 override 仍是有區別的，咱們不是重寫(override)的是 grid panel 嗎？那咱們試試建立一個 Ext.grid.Panel 對象試試。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
name: 'MyApp',
requires: [
'MyApp.view.main.Main',
'MyApp.view.main.Test'
],
stores: [
// TODO: add global / shared stores here
],
launch: function () {
//這裏改爲了 grid panel
var test = Ext.create("Ext.grid.Panel",{
title: 'Personnel'
});
test.say();
},
onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});
|
再次運行結果：
此次正常了，咱們使用 Ext.define 定義的類，使用了 override 重寫組件，發現並不能新建咱們定義的類，而是被重寫的父類被新增了 say 方法。
因此總結一下，extend 會建立一個新的類，並繼承父類的屬性和方法，你也能夠重寫父類的方法。而 override 並不會建立一個新的類，而是修改這個被重寫的父類。
- 注意：例如上面的例子，Test 重寫了 grid panel，我在其餘類中建立 grid panel 時若是不引用 Test 那麼重寫仍然是不生效的。只有引用了 Test 重寫纔會生效 grid panel 纔會具備 say 方法。不要問我爲何。
若是你想建立一個單例類，那麼你在定義類時用 singleton 屬性，如如下代碼所示：
|
1
2
3
4
5
6
|
Ext.define('Logger', {
singleton: true,
log: function(msg) {
console.log(msg);
}
}) ;
|
create 對象
你可使用下列代碼來建立一個類的實例：
|
1
|
Ext.create(Class,Options);
|
下列代碼建立了一個 ElectricCar 類的實例，並傳遞一個值(name)：
|
1
|
var myCar = Ext.create('ElectricCar',{ name: 'MyElectricCar' }) ;
|
若是 Ext.Loader 是開啓的，Ext.create 執行時若是 ElectricCar 類不存在將會自動的下載對應的 JS 文件。默認 Ext.Loader 是開啓的；你能夠經過如下方式來關閉它。
|
1
2
3
|
Ext.Loader.setConfig({
enabled: true
});
|
這裏你也可使用 new 關鍵字來建立一個實例，如如下代碼所示；但是若是這個類不存在，使用 new 關鍵字建立實例並不會自動下載對應的 JS 文件：
|
1
|
var myCar = new ElectricCar('MyElectricCar');
|
- ps：你只須要掌握使用 Ext.create 建立實例就好了，new 關鍵字多是兼容 Ext 3.x 的使用方式而繼續支持的。new 關鍵字官方是不推薦用的。
onReady
這個函數在頁面加載完成後調用：
|
1
2
3
4
5
6
|
Ext.onReady(function(){
new Ext.Component({
renderTo: document.body,
html: 'DOM ready!'
});
}) ;
|
大多時候，在你的代碼裏不會用到 onReady 這個方法，由於 Ext 建議你一個應用就是一個頁面(單頁式應用)，只有一個頁面的話天然沒有那麼多場景會須要用到。只有在極少數的一些特殊狀況，你可能須要用它。這裏要強調一點，若是你具備使用 jQuery 的基礎，不要把 onReady 方法像 jQuery 中的 $( document ).ready() 那樣頻繁使用。
widget (部件)
當定義一個類時，你能夠爲這個類增長一個便於記憶的別名。例如： Ext.panel.Panel 的別名爲 widget.panel 。定義別名時，如如下代碼所示指定 alias屬性：
|
1
2
3
4
|
Ext.define('Ext.panel.Panel', {
extend: 'Ext.container.Container',
alias: 'widget.panel'//這裏是定義的別名，
});
|
你也可使用 xtype 爲這個類給定一個別名。這個 xtype 是很是有用的，當你以指定 xtype 的方式應用部件時，並不會建立實例，而是在真正調用展現的時候纔會建立這個類的實例。在本章後面介紹 容器和佈局 時你將會學到更多關於 xtype 的使用。
Ext.widget 方法是經過類的 xtype 快速建立部件的。
例如，不使用 widget 方法，你能夠經過下列代碼建立 Ext.panel.Panel 的實例：
|
1
2
3
4
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Panel'
});
|
反之，經過如下方式快速建立 panel 的實例：
|
1
2
3
4
|
Ext.widget('panel', {
renderTo: Ext.getBody(),
title: 'Panel'
});
|
這裏 panel 是一個容器，關於 panel 會在後面詳細講解。下面代碼的做用至關於與上面：
|
1
2
3
4
|
Ext.create('widget.panel', {
renderTo: Ext.getBody(),
title: 'Panel'
});
|
注意： 你閱讀此文檔的同時，這裏面的大部分代碼都是能夠運行的，你能夠選擇在你本地設備上或者在 Sencha Fiddle 上執行這些示例代碼。你能夠訪問Sencha Fiddle 並將上面的代碼鍵入到 launch 函數中，運行並查看結果。若是你訪問了 https://fiddle.sencha.com 將會看到下列代碼：
|
1
2
3
4
5
6
|
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
}
}) ;
|
如今，粘貼建立 panel 部件的代碼如如下示例，運行並查看結果。複製粘貼時，注意單引號不要寫成中文標點單引號：
|
1
2
3
4
5
6
7
8
9
|
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('widget.panel', {
renderTo: Ext.getBody(),
title: 'Panel'
});
}
}) ;
|
- 不是全部的代碼均可以這樣運行，此外並不是全部的示例代碼都會有視覺呈現。
getClass
若是建立的實例是用 Ext.define 定義的，那麼返回這個給定對象的類，不然返回 null：
|
1
2
|
var button = new Ext.Button();
Ext.getClass(button); // returns Ext.Button
|
getClassName
經過它的引用或實例返回類名稱：
|
1
|
Ext.getClassName(Ext.Button); //returns "Ext.Button"
|
Ext.Base
這是全部 Ext 類的基礎。全部的 Ext 類都繼承自 Ext.Base。該類全部的原型和靜態成員都會傳遞給繼承它的類。
Ext.Class
這是一個低級別的工廠類，用於經過 Ext.ClassManager 定義一個類。因此不該該在你的代碼中直接訪問；你應該使用 Ext.define。
Ext.ClassManager
它管理全部的類同時處理類反射。一般經過下面幾個方法訪問：
- define
- create
- widget
- getClass
- getClassName
在本章咱們已經討論使用過這些方法。
Ext.Loader
用於動態的加載依賴。一般使用 Ext.require 來指定依賴。當你定義一個類時，這樣指定組件的依賴列表是一個很好的作法，如如下代碼所示：
|
1
|
Ext.require(['widget.window', 'layout.border','Ext.data.Connection']);
|
若是你須要引入一個指定命名空間下全部的 組件/類 時，使用通配符，如如下代碼所示：
|
1
|
Ext.require(['widget.*', 'layout.*', 'Ext.data.*');
|
使用如下語法排除掉不須要的類：
|
1
|
Ext.exclude('Ext.data.*').require('*');
|
用這種方式，依賴的類是異步加載的。若是在你定義的類中沒有指定依賴的類，那麼當使用 Ext.Create 建立實例時，若是它是未加載的，這時將會同步加載這些類文件。這對性能有必定的影響，因此當你定義類時，使用 Ext.require 指定所需的類老是更好的。
- requires 屬性加載須要的類時，當前類初始化以前被加載。
- uses 屬性加載須要的類時，當前類初始化以後被加載。
singleton:true 屬性當前類初始化時,該實例是一個單例對象。
注意：定位類的文件路徑是基於類名的。例如：MyApp.view.About 類的路徑應該是 \myapp\view\ about.js 。
Events(事件)
一個事件能夠是一個用戶操做，一個 Ajax 調用的響應等等。
Adding listeners(爲類添加監聽)
當你建立對象或者建立之後均可覺得這個對象添加監聽器。下列示例代碼爲這個對象添加了一個 單擊事件 的監聽：
|
1
2
3
4
5
6
7
8
|
Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
listeners: {
click: function() {
Ext.Msg.alert('Button clicked!');
}
}
}) ;
|
你能夠添加多個事件監聽，如如下代碼示例：
|
1
2
3
4
5
6
7
8
9
10
11
|
Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
listeners: {
mouseout: function() {
//Do something
},
click: function() {
// Do something
}
}
});
|
你也能夠在對象建立以後，使用 on 方法爲對象添加事件監聽：
|
1
2
3
4
|
var button = Ext.create('Ext.Button');
button.on('click', function() {
//Do something
}) ;
|
一樣的，你也可使用 on 方法一次添加多個事件的監聽，如如下代碼示例：
|
1
2
3
4
5
6
7
8
9
|
var button = Ext.create('Ext.Button');
button.on({
mouseover: function() {
//Do something
},
mouseover: function() {
//Do something
}
}) ;
|
Removing listeners (刪除事件監聽)
You can also remove the listeners, but you need the reference to the function; you can’t use the anonymous function.
|
1
2
3
4
5
6
7
8
9
10
11
|
var HandleClick= function() {
Ext.Msg.alert('My button clicked!');
}
Ext.create('Ext.Button', {
listeners: {
click: HandleClick
}
}) ;
button.un('click', HandleClick);
|
頁面 DOM 元素的事件處理
你能夠將監聽器添加到 DOM 元素，以下所示。
假設在你的 HTML 代碼中，有一個 div 元素 id=mydiv ，如如下代碼所示：
|
1
|
< div id="mydiv"></div >
|
用下列代碼爲它添加事件監聽：
|
1
2
3
4
|
var div = Ext.get('mydiv');
div.on('click', function(e, t, eOpts) {
// Do something
});
|
訪問 DOM
有三種方法來訪問 DOM 元素：get，query，和 select 。
Ext.get
get 方法是根據這個 DOM 元素的 ID 檢索獲取並封裝爲 Ext.dom.Element 對象：
|
1
|
var mydiv = Ext.get('myDivId');
|
Ext.query
這種方式基於傳入的 CSS 選擇器 從給定的根節點開始查找。它返回一個匹配選擇器的元素(HTMLElement[]/Ext.dom.Element[])數組。若是沒有匹配的，返回一個空值的數組對象。
在下面示例中，myCustomComponent.getEl().dom 是傳遞的根節點。Ext.query 將檢索這個節點內的子元素，並返回一個數組包含 CSS class 爲 ‘oddRow‘ 的的元素：
|
1
|
var someNodes = Ext.query('.oddRow', myCustomComponent.getEl().dom);
|
Ext.select
給出一些 CSS/XPath 選擇器，Ext.select 方法返回一個 CompositeElement 類型的對象，表明一個元素的集合。
這個 CompositeElement 對象能夠進行過濾，迭代，和對整個集合執行總體操做等等：
|
1
2
|
var rows = Ext.select('div.row'); ////Matches all divs with class
row rows.setWidth(100); // 這是設置全部元素的寬度爲 100
|
你也能夠用一行代碼，以下所示：
|
1
|
Ext.select('div.row').setWidth(100);
|
多重選擇器
在方法調用時經過指定多個搜索條件能夠用來匹配多個元素：
|
1
|
Ext.select('div.row, span.title'); //匹配全部的 class 用 .row 的 div 元素，和匹配全部 class 用 .title 的 span 元素
|
選擇器 根
當你使用 select ，它默認取 HTML body 做爲根並從默認的 body 開始檢索整個 DOM 樹。你能夠經過制定一個根元素來避免這種狀況，這樣它將只搜索給定的根的子節點。
|
1
|
Ext.get('myEl').select('div.row');
|
這兒使用了 ‘myEl’ 做爲根節點。這將首先找到 id 爲 ‘myEl’ 的元素，而後將在根元素(myEl)下面搜索出 class 爲 ‘row’ 的 div 標籤。
|
1
|
Ext.select('div.row', true, 'myEl');// This is equivalent to the previous line.
|
鏈式選擇器
下列的查詢方式會匹配 class 爲 row 而且 title 屬性值爲 bar 的 div ，這個 div 屬於其父元素的首個子元素：
|
1
|
Ext.select('div.row[title=bar]:first')
|
Ext.ComponentQuery
這容許你用 ID，xtype，和 屬性查找一個組件。你能夠全局搜索或者指定一個根組件。
下列查詢將返回全部的 xtype 爲 button 的組件：
|
1
|
Ext.ComponentQuery.query('button');
|
獲得一個 id 爲 foo 的組件，用如下代碼：
|
1
|
Ext.ComponentQuery.query('#foo');
|
下列代碼將返回全部的 xtype 爲 button 而且 title 屬性值爲 my button 的組件：
|
1
|
Ext.ComponentQuery.query("button[title='my button']");; //or parent.query('textfield[title=my button]');
|
你也可使用嵌套選擇器以下：You can also use nested selectors as follows:
|
1
|
Ext.ComponentQuery.query('formpanel numberfield'); // 這裏獲取 xtype 爲 frompanel 下面的 xtype 爲 numberfield 的組件
|
下列代碼返回這個 parent 容器內匹配傳遞進來的選擇器的第一個直接子組件，若是沒有匹配上，返回 null 。
|
1
|
parent.child('button[itemId=save]');
|
一樣的，你也可使用其餘的方法，例如 nextNode, up, down, previousSibling 等等。
組件，容器，和佈局
Ext JS 提供了一組豐富的組件和佈局，這使在 Ext JS 中開發 UI 變得超級簡單，甚至非專業 UI 開發人員也可以輕易的使用。
組件
從簡單的組件提及，例如 button 和 label ，到複雜的組件，例如 Tree Panel，Grids 等等，Ext JS 有大量的內置組件。全部的組件都派生自Ext.Component 類，它提供支持建立，重繪，渲染和處理組件。
全部的組件都有一個屬性叫作 xtype 。它是很是有用的，它用在當你不想立刻實例化這個組件時，而是想讓這個組件在實際被應用時才建立，就是咱們俗稱的懶加載。
容器
容器是一個特殊的組件類型，它可以持有其餘組件。在 Ext JS 中 Ext.container.Container 類是全部的容器的基礎類。
Ext.toolbar.Toolbar, Ext.panel.Panel, 和 Ext.Editor 是一些內置組件。這些組件都是能夠包含其餘組件。而像 Ext.button.Button 類就不是派生自Ext.container.Container ，因此它不可以包含其餘組件。
一個典型的 Ext JS 應用包含一組嵌套的組件。看下面這個例子並思考：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
Ext.create('Ext.panel.Panel', {
renderTo:Ext.getBody(),
width:700,
height:400,
items:[{
xtype: 'panel',
title: 'Panel 1',
},{
xtype: 'panel',
title: 'Panel 2',
height: 200,
items: [{
xtype: 'button',
text: 'Click Me'
}]
},{
xtype: 'panel',
title: 'Panel 3',
width: 150,
height: 100
}]
});
|
在前面的代碼中，這是嵌套的組件，結構以下圖所示：
上面的代碼運行後將輸出相似如下截圖：
佈局
佈局定義了包含的組件是如何定位的以及設定組件的尺寸大小。每個容器都有一個佈局。默認佈局是 auto 。這將不會爲子組件指定任何關於位置和大小的規則。
在上面的圖中，你可能已經注意到這些子組件只是一個接一個嵌套在父級容器中。這是在代碼中由於咱們尚未爲這些組件制定任何佈局，默認狀況下使用的是 auto 佈局。
如今，讓咱們在相同的代碼裏使用一些佈局。下列示例中，咱們將使用 column 佈局和 center 佈局。
當你使用 column 佈局，你能夠指定 columnWidth 。全部的列的 columnWidth 的值的總和必須等於 1 。你也能夠爲一些列指定固定寬度，如如下代碼所示。這裏，Panel3 取了一個 150 的固定寬度，而後剩下的兩列按照 columnWidth 的值分配剩下的寬度：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
Ext.create('Ext.panel.Panel', {
renderTo:Ext.getBody(),
width:700,
height:400,
layout:'column',
items: [{
xtype: 'panel',
title: 'Panel 1',
columnWidth: 0.4,
height: 400,
},{
xtype: 'panel',
title: 'Panel 2',
columnWidth: 0.6,
layout: 'center',
height: 400,
items: [{
xtype: 'button',
text: 'Click Me'
}]
},{
xtype: 'panel',
title: 'Panel 3',
width: 150,
height: 400
}]
});
|
以上代碼輸出爲：
updateLayout
updateLayout 是 Ext.container.Container 對象裏的一個方法。這能夠用來根據佈局規則從新定位子組件。例如你修改了佈局方式，須要動態的更新佈局時。
suspendLayout
大多數時候你不會用到這個 updateLayout 方法，然而有些時候你必須調用它。
這個 updateLayout 方法是在你重繪和當你添加或刪除了一個組件時自動調用。有時候你可能須要它暫停一下，不是立刻就調用，特別是當你添加或刪除多個子組件時。因此在這種狀況下，你能夠設置 suspendLayout 屬性爲 true ，一旦你完成添加或刪除組件的操做，你能夠設置 suspendLayout 爲 false 並在你的代碼中手動調用 updateLayout 方法。
一樣的若是你想對整個框架中止更新佈局，你能夠調用 Ext.suspendLayouts() ，而後在你的操做完成後你能夠經過調用 Ext.resumeLayouts(true) 恢復它。
如下是 Ext JS 中可用的佈局：
- absolute
- accordion
- anchor
- border
- card
- center
- column
- fit
- hbox
- table
- vbox
absolute 絕對佈局
這個佈局使用 x 和 y 屬性來指定組件的絕對定位：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
Ext.create('Ext.panel.Panel', {
renderTo:Ext.getBody(),
width:700,
height:400,
layout:'absolute',
items: [{
xtype: 'panel',
title: 'Panel 1',
x: 12,
y: 20,
height: 250
},{
xtype: 'panel',
title: 'Panel 2',
x: 200,
y: 150,
height: 200
},{
xtype: 'panel',
title: 'Panel 3',
x: 400,
y: 250,
width: 150,
height: 100
}]
});
|
這裏所示的輸出，你能夠重疊組件由於他們用絕對位置定位的：
accordion 手風琴(可摺疊)佈局
這個佈局展現了在一個時間裏只有一個內置的可支持摺疊和展開的子級 panel 。瞧一下如下示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'accordion',
items: [{
title: 'Item 1',
html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
},{
title: 'Item 2',
html: 'some content here'
},{
title: 'Item 3',
html: 'empty'
}]
});
|
這裏顯示的輸出，這個 Item 1 是展開的，而其餘的 panel 是摺疊的：
anchor 錨點佈局
這個佈局使你可以指定子級組件的大小，而這是相對於佈局容器的。首先容器根據指定的錨點規則調整而後全部的子級組件再做調整：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'anchor',
items: [{
title: 'Item 1',
html: 'Item 1',
anchor: '50%'
},{
title: 'Item 2',
html: 'Item 2',
anchor: '-20 -200'
},{
title: 'Item 3',
html: 'Item 3',
anchor: '-200'
}]
});
|
輸入如如下截圖：
border 佈局
這個佈局容許你爲子組件指定一個區域位置，例如 center，north，south，west 和 east。當你使用 border 佈局時，在其內的組件必須有一個指定區域爲 center，以下列代碼所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'border',
items: [{
title: 'Item 1',
html: 'Item 1',
region: 'center'
},{
title: 'Item 2',
html: 'Item 2',
region: 'east',
width: 200
},{
title: 'Item 3',
html: 'Item 3',
region: 'south',
height: 100
}]
}) ;
|
以上代碼輸出相似下列視圖：
card 卡片佈局
在此佈局中，只有一個子組件是可見的，這個組件基本上充滿整個容器。卡片佈局通常應用在嚮導或者 tabs：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'card',
defaultListenerScope: true,
bbar: ['->',{
itemId: 'btn-prev',
text: 'Previous',
handler: 'showPrevious',
disabled: true
},{
itemId: 'btn-next',
text: 'Next',
handler: 'showNext'
}],
items: [{
index: 0,
title: 'Item 1',
html: 'Item 1'
},{
index: 1,
title: 'Item 2',
html: 'Item 2'
},{
index:2,
title: 'Item 3',
html: 'Item 3'
}],
showNext: function () {
this.navigate(1);
},
showPrevious: function () {
this.navigate(-1);
},
navigate: function (incr) {
var layout = this.getLayout();
var index = layout.activeItem.index + incr;
layout.setActiveItem(index);
this.down('#btn-prev').setDisabled(index===0);
this.down('#btn-next').setDisabled(index===2);
}
});
|
卡片佈局的輸出。當你點擊 next 按鈕，將會顯示 Item 2 面板：
center 中心佈局
這種佈局，容器的子組件在中間。在本章中開始介紹佈局的部分，咱們已經有一個例子了。
column 列布局
用此佈局，你能夠將容器劃分爲指定數量的列並指定每列所佔的大小。這個例子也在本章開始介紹佈局的部分中能夠找到。
fit 適配佈局
在此佈局中，子組件將會自適應容器的尺寸。以下：
|
1
2
3
4
5
6
7
8
9
10
11
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'fit',
bodyPadding: 20,
items: [{
title: 'Item 1',
html: 'Fills the container',
}]
});
|
下列截圖展現以上代碼的輸出。注意：Item 1 組件與父級容器之間的空隙是咱們指定了 bodyPadding 屬性：
hbox 佈局
這種佈局與 column 佈局幾乎是同樣的，可是這種佈局容許你拉伸列的高度。這裏使用 flex 選項爲子組件設置水平的相對值：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout:{
type: 'hbox',
pack: 'start',
align: 'stretch',
},
items: [{
title: 'Item 1',
html: 'Item 1',
flex: 1
},{
title: 'Item 2',
html: 'Item 2',
width: 100
},{
title: 'Item 3',
html: 'Item 3',
flex: 2
}]
});
|
上面代碼輸出：
table 表格佈局
這個佈局容許你渲染一個表格出來。你能夠指定列數和行數，使用 rowspan 和 colspan 建立複雜佈局：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout:{
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [{
rowspan: 3,
title: 'Item 1',
html: 'Item 1'
},{
title: 'Item 2',
html: 'Item 2'
},{
title: 'Item 3',
rowspan: 2,
html: 'Item 3'
},{
title: 'Item 4',
html: 'Item 4'
},{
title: 'Item 5',
html: 'Item 5'
},{
title: 'Item 6',
html: 'Item 6'
},{
title: 'Item 7',
html: 'Item 7'
}]
});
|
如下截圖所示爲前面 table 佈局代碼的輸出結果：
VBox 佈局
這個佈局內，子組件是垂直向下一個接一個排列。看一下如下的示例代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout:{
type: 'vbox',
pack: 'start',
align: 'stretch',
},
items: [{
title: 'Item 1',
html: 'Item 1',
flex: 1
},{
title: 'Item 2',
html: 'Item 2',
height: 100
},{
title: 'Item 3',
html: 'Item 3',
flex: 2
}]
});
|
這段代碼所示的輸出：
總結
在本章中，咱們瞭解學習了在 Ext JS 中的基礎類和這些類中經常使用的方法，你還學習瞭如何建立和擴展一個類。還有如何使用 事件 和 查詢元素及組件的功能。
- 1. Ext JS 6學習文檔-第6章-高級組件
- 2. Ext JS 6學習文檔-第5章-表格組件(grid)
- 3. Ext JS 6學習文檔-第7章-圖表
- 4. Ext JS 6學習文檔-第4章-數據包
- 5. Ext JS 6學習文檔-第3章-基礎組件
- 6. Esper文檔-第2章基本概念
- 7. Ext JS 6學習文檔-第8章-主題和響應式設計
- 8. docker 學習 - 核心概念
- 9. Laravel核心概念學習
- 10. ElasticSearch核心概念和文檔的CRUD
- 更多相關文章...
- • WSDL 文檔 - WSDL 教程
- • XSL-FO 文檔 - XSL-FO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。