學extjs筆記 — David Chen

以下是學習過程中記下來的一些小技巧,一定會有錯,不保證全對,因為我也剛接觸,只是將我的經驗列一下.

1) 如果組件之間嵌套比較多的話，外面的Contaner 應盡量不要使用的 renderTo的屬性來載入到某個div的id中,
應盡量在定義了Contaner後，用obj.render('id') 這個方面來載入組件，可以減少錯誤

2) 最好在最外層的Contaner組件(不是頁面html,是extjs組件)定義with,不用定義height, 然后里面的一些組件
比如panel等可以定義autoWidth: true, autoHeight: true, 就可以使用整個顯示自動適應了。

3) 要用到滑鼠移上後出現提示框的都要先執行這句 Ext.QuickTips.init();

4) 注意 Ext.onReady 的使用

5) 如果有全域函數或全域的屬性，不要放到onReady裡面，即使只有onReady裡面的對象調用了某個function,不然會提示
函數未定義，在onReady外定義全域函數，如果函數用到某個對象，可以用Ext.getCmp來取得ExtComponent,同樣的，
即使是全域變數也一樣，如果有iframe要調用parent中的變數，那更加要注意，這個變數只能定義在onReady外面，而
且該變數的賦值不能在onReady的結束處用getCmp等來賦值，要在某個具體的動作才賦值，比如按紐點擊等。

6) 如果TabPanel有tab是用html: '<iframe src=' 來載入頁面，但是要在iframe的頁面中關閉TabPanel中
的某一個tab,可以使用如下的方法實現
TabPanel所以頁面,定義一個全域變數 var tabPanel = null; 然後在 Ext.onReady 中給這個 變數賦
值,那麼在iframe頁面就可以通過 parent.tabPanel來取得這個變數了,然後再調用 tabPanel.remove('')
就可以刪除TabPanel中的某一個tab

7) 
Ext.get( 'htmlId' ); // 和document.getElementById('');不一樣，返回的是Element
Ext.get( 'htmlId' ).dom; // 和document.getElementById('');一樣，返回的是HTMLElement
Ext.getCmp( 'cmpId' ); // 返回的是 Ext.Component
Ext.isEmpty( Mixed value ); // 判斷是否是空，包括Null 字元串
Ext.num( Mixed value, Number defaultValue ); // 判斷是否是數字,不是就返回defaultValue
Ext.id( [Mixed el], [String prefix]  ); // 產生一個唯一的id,
// 包 Ext.util.Format , 包括多種的格式化函數

8)
render();
// 空參數，可以使組件的子組件，或包含的panel等複位，不包括孫組件
// 比如viewport中的panel拖放後，調用後,panel會回到原來的地方

9)
bodyStyle: 'width:100%', 定義組件寬度100%
viewConfig: { forceFit: true }, // 如果grid的column指定了width的值,最好使用這個強制寬度
layout: 'fit',
iconCls: '', //用這個可以控制panel的title與左邊框的距離

10)
用layout:'table'時記住要指明一下
    layoutConfig: {
        // The total column count must be specified here
        columns: 3
    },

11)
使panel自動適應面板的方法
首先定義一個 viewPort( {layout: 'border', items: []} ), 然後在items中添加一個
panel( {region: 'center', layout: 'fit', items:[]} ), 然後再在panel的items中添加
一個gridPanel( {autoHeight: true, layout: 'fit'} ), 這樣就可以了
以下這個代碼是非ViewPort使Panel自適應代碼:
    var panel = new Ext.Panel({
        id: 'subpanel',
                layout: 'column',
                frame: true,
                layoutConfig: { columns: 2 },
        items: [
            { columnWidth: .5, layout: 'fit', items: [ tabpanel ] },
            //tabpanel中不要指定width,但可以autoHeight: true, 但不能autoWidth: true,
            { columnWidth: .5, layout: 'fit', html:'<img id="imgpic" src="" style="width: 160px; height: 80px;" />' }
        ]
    });

12)
{contentEl:'tab1', title:'Tab 1'},
// contentEl 一般是頁面中有一個div,id為tab1, 那麼當前的panel會自動將該div做為子項目納入管理


13)js動態組裝json



var datacolumn= [];
for (var i = 0; i < colcount; i++) {
 datacolumn.push(['value'+i,'text'+i]);
}
var storecolumn = new Ext.data.SimpleStore({
 fields : ['value', 'text'],
 data : datacolumn
});