程式碼片段 ~ 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 */