extjs學習筆記

1。元件的建構函式中一般都可以包含乙個物件，這個物件包含建立元件所需要的配置屬性及值，元件根據建構函式中的引數屬性值來初始化元件。

var obj=;

var panel=new ext.panel(obj); panel.render("hello");

2。關於render

render 方法後面的引數表示頁面上的div 元素id，也可以直接在引數中通過renderto 參

數來省略手動讞用render 方法，只需要在建構函式的引數中新增乙個renderto 屬性即可，

如下：對於容器中的子元素元件，都支援延遲載入的方式建立控制項，此時可以直接通過在需要

父元件的建構函式中，通過給屬性items 傳遞陣列方式實現構造。如下面的**：

new ext.panel();

3。容器中的子元素元件，延遲載入子元素元件實現方式

對於容器中的子元素元件，都支援延遲載入的方式建立控制項，此時可以直接通過在需要父元件的建構函式中，通過給屬性items 傳遞陣列方式實現構造。如下面的**：

var panel=new ext.tabpanel(,,]});panel.render("hello");

注意中括號中加粗部份的**，這些**定義了tabpanel 這個容器控制項中的子元素，這裡包括三個面板。上面的**與下面的**等價：

var panel=new ext.tabpanel(),new

ext.panel(),new ext.panel()]});panel.render("hello");

前者不但省略掉了new ext.panel 這個建構函式，最重要前者只有在初始化tabpanel 的時候，才會建立子面板，而第二種方式則在程式一開始就會建立子面板。也就是說，前者實現的延遲載入。

4。元件的配置屬性

關注元件基類ext.component的配置屬性

5。元件的事件響應處理

ext.get("btnalert")得到乙個與頁面中按鈕btnalert 關聯的ext.element 物件，可以直接呼叫該物件上的addlistener 方法來給物件新增事件，同樣實現前面的效果。在呼叫addlistener方法的**中，第乙個引數表示事件名稱，第二個引數表示事件處理器或整個響應函式。

extjs 支援事件佇列，可以往物件的某乙個事件中新增多個事件響應函式：

ext.onready(function());

extjs 還支援事件延遲處理或事件處理快取等功能：

ext.onready(function());

});

延遲2000毫秒

第四章。。使用面板

6.面板panel的組成

面板由以下幾個部分組成，乙個頂部工具欄、乙個底部工具欄、面板頭部、面板尾部、面板主區域幾個部分元件。面板類中還內建了面板展開、關閉等功能，並提供一系列可重用的工具按鈕使得我們可以輕鬆實現自定義的行為，面板可以放入其它任何容器中，面板本身是乙個容器，他裡面又可以包含各種其它元件。

面板的類名為ext.panel，其xtype 為panel，下面的**可以顯示出面板的各個組成部分：

ext.onready(function()],

bbar:,

buttons:

});});

注意構造引數中的另乙個屬性tbar:

紅色部分多出乙個,導致整個面板都不能顯示。。

7.工具欄

注意概念上的區別：這裡的工具欄相當於視窗的工具欄，xtype值是tools，系統預設。頂部工具欄是使用者自定義的,xtype值是tbar，使用者自定義。

面板由乙個頂部工具欄、乙個底部工具欄、面板頭部、面板尾部、面板主區域幾個部分元件組成。

注意區分頂部工具欄和面板頭部的區別。

可新增的元件不同，位置不同，任務不同：

除了在面板頭部加入這些已經定義好的工具欄選擇按鈕以外，還可以在頂部或底工具欄

中加入各種工具欄選項。這些工具欄選項主要包括按鈕、文字、空白、填充條、分隔符等。

ext中的工具欄專案主要包含下面的類：

ext.*******.button－按鈕，xtype為tbbutton

textitem－文字資訊

ext.*******.fill－

separator－

spacer－

splitbutton－

8.選項面板的tabpanel

veiwport 代表整個瀏覽器顯示區域，該物件渲染到頁面的body 區域，並會隨著瀏覽器顯示區域的大小自動改變，乙個頁面中只能有乙個viewport 例項。

extjs學習筆記

extjs 學習筆記

extjs 學習筆記

Extjs學習筆記

extjs學習筆記

extjs 學習筆記

extjs 學習筆記

Extjs學習筆記

相關推薦