程式碼片段 ~ Extjs3

摘要： 標籤 ：程式碼片段 配置項 基礎通用配置 //定義一些比較常用的屬性，總是忘記，記錄下來，以便查詢 1.cls: String //新增一個額外的類樣式，自定義樣式，將類選擇器名放在這個配置裡 2.disabled : Boolean //為true時無效，Read-only...

標籤 ：程式碼片段

配置項

基礎通用配置

//定義一些比較常用的屬性，總是忘記，記錄下來，以便查詢
1.cls: String //新增一個額外的類樣式，自定義樣式，將類選擇器名放在這個配置裡
2.disabled : Boolean //為true時無效，Read-only
3.disabledClass : String //當元件處於無效狀態時新增到元件上的CSS類(預設為 'x-item-disabled')。 
4.hideBorders : Boolean //設定為true可以隱藏所包含的每個元件的邊框， false為遵照元件現有的邊框設置(預設為 false)。 
5.html : String/Object //一個HTML片段，或者一個 DomHelper 描述
6.itemCls : String //一個附加的CSS類，應用到div上，包裝當前field的表單元素。
7.labelSeparator : String //每個fieldLabel 文字後面現實的分隔符
8.labelStyle : String //field的label樣式 eg:labelStyle: 'font-weight:bold;'
9.layout : String/Object //佈局方式
10.listeners : Object //一個包含一個或多個事件處理器的配置物件
11.margins : Object //此配置只用於該元件展現在一個使用BorderLayout 或 BoxLayout的兩個子類之一作為佈局的容器
12.overCls : String //它將在滑鼠移過元素時CSS類
13.xtype : String //型別
14.ref : String //定義元件的訪問路徑 eg ref:'abc' 則可以使用他的父級.abc實現對元件的訪問
15.region : String //佈局為BorderLayout的容器中使用
renderTo : Mixed //該值可以是一個節點的id、一個DOM節點或者一個已存在的元素，選在在DOM內
applyTo: //將元件渲染在DOM節點後面
16.stateEvents stateful Ext.state.Provider //元件狀態儲存功能，不會用，也比較少用
17.style : String //style: {marginBottom: '10px'} 參考Ext.Element.applyStyles
bodyStyle: String //對元件起作用，也可用於佈局 style主要用於佈局
18.tabTip : String //Ext.QuickTips.init()呼叫的前提下，只用於當該元件作為TabPanel提示
19.tpl : Mixed //Ext.XTemplate的字串陣列。 與 data 和 tplWriteMode 配置項協同使用
20.pageX : Number | pageY : Number //表示頁面級的x y座標值
21.x y: Number //被包含在一個指定位置的容器中，這個值表示x(left) y(top)座標值

高階配置項

renderer

/*column的渲染配置項
格式為：renderer：function（value，metadata，record，rowIndex，colIndex，store）{}
value 當前單元格的值；metadata 可配置單元的css類和attr樣式屬性； record 從資料中提取的record； rowIndex 行號； colIndex 列號；Store 物件
*/
renderer: function(value, metaData, record){
for(i=0;i<ptypeStore.getCount();i++){
var rec = ptypeStore.getAt(i);
if(rec.get('pt_id')==value){
return rec.get('pt_name');
}
}
return value; 
}

editor

/* editor是對可編輯Column提供的編輯控制元件，目前發現僅支援系統控制元件，不支援自定義控制元件 */
editor: {
editor: {xtype: 'textfield', allowBlank: false}
}
editor:{xtype: 'combo', editable: false,triggerAction: 'all', valueField: 'wf_id',
displayField:'wf_name', forceSelection: true, mode: 'remote', store: procStore
}
/* editor裡面不需要filelabel、name、hiddenName這些屬於表單提交控制元件的屬性，因此可編輯Column也就不支援隱藏表單控制元件 */

region

//BorderLayout佈局定義區域配置項
region: 'north' | 'south' | 'west' | 'east' | 'center'

屬性

1.ownerCt : Ext.Container //父類容器
2.disabled : Boolean //設定是否可用
3.hidden : Boolean //設定隱藏狀態
4.items : MixedCollection //子元件集合
5.refOwner : Ext.Container //通過ref配置的元件可以通過該屬性訪問引用祖先元件
6.rendered : Boolean //渲染狀態

方法

1.add (...Object/Array component) : Ext.Component/Array //向當前容器中新增Component(s),需要呼叫 doLayout 方法來重新整理檢視
2.addClass (string cls) : Ext.Component //新增CSS class樣式
3.destroy () : void //銷燬
4.disable () : Ext.Component //將元件置為無效狀態，並出發'disable'事件
5.doLayout ([ Boolean shallow ],[ Boolean force ] ) : Ext.Container //強制容器的佈局進行重新計算
引數:
shallow : Boolean 
(可選) 設定為true時將僅僅計算當前元件的佈局， 並且讓子元件在需要時自動計算佈局 (預設為flase，它將遞迴地呼叫每個子容器的doLayout方法) 
force : Boolean 
(可選) 設定為true將強制進行佈局，即使專案是隱藏的也進行。 
返回值:
Ext.Container 
this 
6.enable () : Ext.Component //將元件置為有效狀態並觸發'enable'事件
7.find (String prop ,String value) : Array //根據屬性查詢當前容器中任何層次上的元件 
8.findById (String id) : Ext.Component //通過id查詢容器中位於任何層級上的元件
9.findByType (String/Class xtype ,[ Boolean shallow ] ) : Array //根據xtype或者型別，查詢當前容器中任何層級上的元件
引數:
xtype : String/Class 
元件的xtype字串，或者直接是元件的class型別 
shallow : Boolean 
(可選) 此引數為flase時將檢查當前元件是否是指定xtype的後裔 (這是預設情況)，或者設定為true，將檢查當前元件是否直接是指定xtype型別（譯者注：即指不按照多型性進行檢查）。 
返回值:
Array 
Ext.Component陣列
10.findBy (Function fn ,[ Object scope ] ) : Array //自定義的函式查詢容器內的元件
//fn(component, this container) 函式將會被用如下引數(component, this container)進行呼叫
11.findParentBy (Function fn) : Ext.Container //查詢當前元件上層任何層次上的容器
//fn(container, this component)
12.findParentByType (String/Class xtype) : Ext.Container //根據xtype查詢父元件
13.fireEvent( String eventName, Object... args ) : Boolean
//用傳入的引數觸發指定的事件，一個事件可以被設定為冒泡到Observable父類繼承樹(參看Ext.Component.getBubbleTarget) 呼叫enableBubble實現。
14.focus ([ Boolean selectText ],[ Boolean/Number delay ] ) : Ext.Component 
嘗試將當前元件設為焦點。 
引數:
selectText : Boolean 
(可選) 如果可用，同時選中元件內部的文字 
delay : Boolean/Number 
(可選)將當前元件設定為焦點的延遲時間(設定為true等於0毫秒) 
返回值:
Ext.Component 
this 
15.get (String/Number key) : Ext.Component 
//根據索引獲取當前容器包含的一個元件（items.get(key)方法的別名）
16.getComponent (String/Number comp) : Ext.Component 
//檢查當前容器的 items property（id） 並且獲取當前容器的一個直接的子元件。
17.hide () : Ext.Component //隱藏當前元件。 監聽 beforehide' 事件並且返回false 可以取消隱藏元件的操作。 在隱藏元件之後觸發 ' hide' 事件。
18.insert (Number index ,Ext.Component component) : Ext.Component //在當前容器的指定索引處插入一個元件。 在插入之前觸發 beforeadd 事件， 然後在元件被插入之後觸發 add 事件
19.isXType (String xtype ,[ Boolean shallow ] ) : Boolean //判斷xtype
20.nextSibling () : Ext.ComponentpreviousSibling () : Ext.Component //兄弟元件
21.remove (Component/String component ,[ Boolean autoDestroy ] ) : Ext.Component //從當前容器中移除一個元件。 在移除之前觸發 beforeremove 事件， 然後在元件被移除之後觸發 remove 事件
22.removeAll ([ Boolean autoDestroy ] ) : Array //從當前容器中刪除所有元件
23.removeClass (string cls) : Ext.Component //從元件底層的元素上刪除一個CSS類
24.setPosition (Number left ,Number top) : Ext.BoxComponent 
//設定元件的left和top值。設定元件的頁面XY值
25.setPagePosition (Number x ,Number y) : Ext.BoxComponent //設定元件在頁面中的XY位置
26.setSize (Mixed width ,Mixed height) : Ext.BoxComponent 
//設定BoxComponent的寬度和高度
27.show () : Ext.Component //顯示元件
28.setVisible (Boolean visible) : Ext.Component //設定元件顯示或隱藏
29.on(String eventName, Function handler)un(String eventName, Function handler) 
//新增 刪除 事件監聽
30.

事件

1.add : (Ext.Container this ,Ext.Component component ,Number index) 
//將元件新增到容器子元件集合時的位置索引 
監聽器將會被使用如下的引數被呼叫:
this : Ext.Container 
component : Ext.Component 
被新增的元件 
index : Number 
 2.

特性：

extend

Component

BoxComponent

屬性

//BoxComponent 是盒子模型元件，用於佈局和封裝Html元素

Container

ViewPort

//ViewPort是一個特殊的容器，一個頁面只能有一個，使用於做單頁面應用，自動渲染到body上，並且寬高與瀏覽器一致
new Ext.Viewport({
layout: 'border', //*必選* 設定viewport的佈局方式
split: true,//元件之間的空隙
defaults:{//子類的預設配置
}，
items: []//*重要* 這是內容填充的必須屬性
});

Panel

//很常用的一個元件
new Ext.panel({
title: 'Panel', //標題
[layout: '', ]//佈局方式
[ x | y ]//這是相對於容器來說的講的位置，且只有 absoulte 佈局生效
[ pageX | pageY ] //頁面級的位置，一樣只有 absolute 佈局生效
[padding: Number/String,] //設定padding值 數值設定所有邊側，或者CSS的padding樣式
items: []//子元件
});

Window

//Ext視窗元件，常用於表單彈出窗的載體

佈局

border佈局

//border佈局 就是將container元件分為 東南西北中 5個區域，將子元件放入到各個區域中去；
//這5個區域的特點是：南北通欄，西中東在南北中間水平分佈，東西設定寬度，剩餘的是中的
new Ext.Viewport({
layout: 'border',
items: []//子元件需要設定 region: 'north' | 'south' | 'west' | 'east' | 'center'
});

absolute佈局

//Absolute絕對定位佈局，通過設定 x、y 或者pageX、pageY 進行元件位置佈局
new Ext.Viewport({
layout: 'absolute',
items: [{
xtype: 'panel',
title: 'Absolute',
x: 50,
y: 50,
html: '<p>定位佈局</p>'
}]
}）

Accordion

//Accordion是手風琴摺疊佈局
new Ext.Viewport({
layout: 'accordion',
items: [{
xtype: 'panel',
title: 'Absolute'，
html: '<p>accordion</p>'
}]
}）

Grid

CheckBoxSelectionModel

//CheckBoxSelectionModel 繼承自RowSelectionModel 這個控制元件就是列表頁前面的選擇框
var Sm = new Ext.grid.CheckboxSelectionModel({
dataIndex: 'id',
singleSelect: false，//是否單選
});

//配置項：
width：//設定寬度
//公共屬性
sm.grid //grid的引用，但是為只讀
//公共方法
clearSelections ([ Boolean fast ] ) : void//清除所有的選中狀態。 
getCount (): Number ； //獲取選擇的總數
getSelected (): Record ; //獲取第一條選擇的
getSelections () : Array ;//返回所有選中的記錄

//公共事件

ColumnModel

//ColumnModel是資料的展現形式就是表格的展現形式 {dataSource}-mapping->{dataStore}-dataIndex->ColumnModel

editGrid

//editGrid,注意事項，儲存的時候傳送 list為key的son物件 儲存修改的資料

Data

Record

//簡單說就是Store裡資料的封裝物件，可以通過record訪問資料物件
1、get(String name);:Object查詢制定key的value；

Store

//比較常用的方法
1、store.getCount();: Number查詢Stroe的資料數量
2、store.getAt(Number index);: Record獲取指定位置記錄
3、store.load();: void使用配置的reader從遠端獲取資料
4、removeAll(Boolean silent);: void刪除所有資料，引數表示是否觸發clear事件
5、removeAt(Number index);: void刪除指定位置記錄,觸發remove事件
6、store.save();：Number儲存所有掛起的更改，返回儲存的條數|-1
7、

遠端資料Store

//資料型別
var recordType = Ext.data.Record.create([
{
name:'cit_id', type:'int', mapping:'cit_id'
},{
name:'cit_name', type:'string', mapping:'cit_name'
}]
);

//資料物件
var listStore = new Ext.data.Store({
remoteSort: true,
autoLoad:true,
proxy:new Ext.data.HttpProxy(
{
url:"data/getList",
method:"POST"
}),
reader:new Ext.data.JsonReader(
{
root : 'list',
totalProperty : 'totalSize',
id : 'cit_id'
}, recordType)//recordType也可以直接申明一個數組進行資料解析
});

表單控制元件

combo

/* 使用屬組作為備選資料 */
{name:【key】,layout:'form',anchor: '92%',xtype:'combo', fieldLabel: 【nameS】,
triggerAction: 'all', allowBlank: 【isBlank】,hiddenName:【key】,
forceSelection: true,valueField: 'code',displayField:'value',mode:'local',
store:newExt.data.ArrayStore({fields:['code','value'],data:
【Ext.decode(dataS)】})
};

/* 使用遠端資料作為資料來源（預設的資料來源） */
{name:【key】,layout:'form',anchor: '92%',xtype:'combo', fieldLabel: 【nameS】,
triggerAction: 'all',//觸發器點選時使用的操作，目前一般選 all 
allowBlank: 【isBlank】,//允許為空
hiddenName: 【key】,//Input 的 name
forceSelection: true,//限定單選
valueField: 【'cit_id'】,//值
displayField: 【'cit_name'】,//顯示text
mode: 【'remote'】, //資料 
store: listStore
};

/* 常用方法 */
getCount(); //獲取快取資料數量
getAt(i);//獲取制定位置資料 從0開始
get('key');//根據key取值

/* eg.遍歷 */
for(var i=0;i<store.getCount();i++){
var rec = store.getAt(i);
if(rec.get('id')==val){
return rec.get('name');
}
}

/* 加入使用的時候發現第一次載入不能實現鍵值的轉換，那麼可能是因為我們的store還沒有載入的原因，那麼可以選擇在控制元件上增加一個 beforerender 事件，來判斷是否store是否已經load，如果沒有就進行load() */

CheckColumn

/* 可編輯Grid中的打勾選項控制元件 Ext.ux.grid.CheckColumn */
{
dataIndex: '對應的資料名稱',
header: '控制元件的表頭',
xtype: 'checkcolumn',
align: 'center',
width: 80
}
/* 值得注意的是：使用該控制元件的時候它的值為 true和false，後臺儲存
的時候要注意對控制元件值做處理，最好對應的資料庫列為整數，讀取資料的時
候就可以匹配0和1 */