1. 程式人生 > >extjs學習之旅——元件的配置屬性

extjs學習之旅——元件的配置屬性

new Ext.Panel({
title:"面板",
html"面板內容",
height:100});

  再比如建立一個按鈕:

var b=new Ext.Button({
text:"新增",
pressed:true,
heigth:30,
handler:Ext.emptyFn
});

  再比如建立一個Viewport及其中的內容:

new Ext.Viewport({
layout:"border",
items:[
{
region:"north",
title:"面板",
html:"面板內容",
height:100},
{
region:"center",
xtype:"grid",
title:"學生資訊管理",
store:troe,
cm:colM,
store:store,
autoExpandColumn:3
}
]
});

  每一個元件除了繼承基類中的配置屬性以外,還會根據需要增加自己的配置屬性,另外子類中有的時候還會把父類的一些配置屬性的含義及用途重新定 義。學習及使用ExtJS,其中最關鍵的是掌握ExtJS中的各個元件的配置屬性及具體的含義,這些配置屬性在下載下來的ExtJS原始碼文件中都有詳細的 說明,可以通過這個文件詳細瞭解每一個元件的特性

 由於所有的元件都繼承自Ext.Component,因此在這裡我們列出元件基類Component中的配置屬性簡單介紹。

配置屬性名稱 型別 簡介
allowDomMove Boolean 當渲染這個元件時是否允許移動Dom節點(預設值為true)。
applyTo Mixed 混 合引數,表示把該元件應用指定的物件。引數可以是—節點的id,一個DOM節點或一個存在的元素或與之相對應的在document中已出現的id。當使用 applyTo,也可以提供一個id或CSS的class名稱,如果子元件允許它將嘗試建立一個。如果指寫applyTo選項,所有傳遞到 renderTo方法的值將被忽略,並且目標元素的父節點將自動指定為這個元件的容器。使用applyTo選項後,則不需要再呼叫render()方法來 渲染元件。
autoShow Boolean 自動顯示,如為true,則元件將檢查所有隱藏型別的class(如:’x-hidden’ 或’x-hide-display’並在渲染時移除(預設為false)。
cls String 給元件新增額外的樣式資訊,(預設值為''),如果想自定義元件或它的子元件的樣式,這個選項是非常有用的。
ctCls String 給元件的容器新增額外的樣式資訊,預設值為'')。
disabledClass String 給被禁用的元件新增額外的CSS樣式資訊,(預設為"x-item-disabled")。
hideMode String 元件的隱藏方式,支援的值有’visibility’,也就是css裡的visibility,’offsets’負數偏移位置的值和’display’也就是css裡的display,預設值為’display’。
hideParent Boolean 是否隱藏父容器,該值為true時將會顯示或隱藏元件的容器,false時則只隱藏和顯示元件本身(預設值為false)。
id String 元件的id,預設為一個自動分配置的id。
listeners Object 給物件配置多個事件監聽器,在物件初始化會初始化這些監聽器。
plugins Object/Array 一 個物件或陣列,將用於增加元件的自定義功能。一個有效的元件外掛必須包含一個init方法,該方法可以帶一個Ext.Component型別引數。當元件 建立後,如果該元件包含有效的外掛,將呼叫每一個外掛的init方法,把元件傳遞給外掛,外掛就能夠實現對元件的方法呼叫及事件應用等,從而實現對元件功 能的擴充。
renderTo Mixed 混合資料引數,指定要渲染到節點的id,一個DOM的節點或一個已存在的容器。如果使用了這個配置選項,則元件的render()就不是必需的了。
stateEvents Array 定義需要儲存元件狀態資訊的事件。當指定的事件發生時,元件會儲存它的狀態(預設為none),其值為這個元件支援的任意event型別,包含元件自身的或自定義事件。(例如:[‘click’,’customerchange’])。
stateId String 元件的狀態ID,狀態管理器使用該id來管理元件的狀態資訊,預設值為元件的id。
style String
xtype String 指定所要建立元件的xtype,用於建構函式中沒有意義。該引數用於在容器元件中建立建立子元件並延遲例項化和渲染時使用。如果是自定義的元件,則需要用Ext.ComponentMgr.registerType來進行註冊,才會支援延遲例項化和渲染。
el Mixed 相當於applyTo