EXT JS常見問題FAQ

EXT JS 常見問題FAQ 收藏
1)

如果組件之間嵌套比較多的話,外面的Contaner 應盡量不要使用的 renderTo的屬性來加載到某個p的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 ); // 判斷是否是空,包括空字符串

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 一般是頁面中有一個p,id為tab1, 那麼當前的panel會自動將該p做為子元素納入管理

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

});

如何創建對象實例:
var app = function() { var privVar=11; return {p1:11, p2:22,init:function(){}};}();

js創建對象的原理:
實際上創建瞭一個匿名函數(沒有名字的函數),經過解釋之後讓它立刻運行(註意函數後面的())。最後將函數返回的對象(註意此時是一個object變量)分配到變量o。

對象的訪問控制

私有變量和私有函數直接定義在function和return這兩個聲明之間,由於這段代碼的會在head中加載,因此不能訪問頁面中的html
return 中的函數如init,是由匿名函數返回的對象的一個方法而已。它會在文檔全部加載後才運行。換言之整個DOM樹已經是可用的瞭

實例環境
在new的cmp裡指定scope:this; 把環境指向

Ext中的get、getDom、getCmp、getBody、getDoc的區別
get方法用來得到一個Ext元素,
getCmp方法-獲得Ext組件,Ext.getCmp("h2").來得到id為h2的組件
getDom方法-獲得DOM節點 Ext.getDom("p2"),得到id為p2的html DOM
getBody方法-得到文檔的body節點元素 (Element)。
getDoc方法-獲得與document對應的Ext元素(Element),實質上就是把當前html文檔對象,也就是把document對象封裝成ExtJS的Element對象返回,該方法不帶任何參數。

如何重寫公共變量
Ext.apply(app, { p1:33});

重寫(Overriding)公共函數
Ext.apply(ns.app,
{
  testfn: function()
   {
    alert('test');
   }
}
);

指定onReady的scope有什麼用
Ext.onReady(app.init, app);
用於公共函數中this調用其他公共函數
init : function(){
    this.checkCount();
}

如何向頁面dom id渲染
var p = new MyPanel({
renderTo:'hello',
title : 'My Second Panel'
});

var p = new MyPanel({
title : 'My Second Panel'
});
p.render("hello");

如保滿屏全屏顯示Ext組件 :
將組件放入ViewPort,前提是根佈局一定要有一個 region:'center'
var vp = new Ext.Viewport({
    layout : "fit",
    items : [{
     region:'center'
     ,border:true
     ,items: p
     ,layout:'fit'
     ,margins: '5 5 5 0'
     ,cmargins: '5 5 5 5'
    }]
});


如何繼承
// 構造器函數
var MyPanel = function(config) {
Ext.apply(this, {
    width : 300,
    height : 300
   });
MyPanel.superclass.constructor.apply(this, arguments);
};
// My Panel繼承瞭Ext.Panel
Ext.extend(MyPanel, Ext.Panel, {});

關於ext與JQ沖突的解決方法
         ext與JQ沖突最致命在於$(this)在EXT傳遞上有問題,原因在於jQuery很多函數返回的是jQuery類型,其實就是數組,是經過一定封裝的。
       螃哈哈同志已經給出瞭三個方案:
       1)通過jQuery中類似get()的方法,因為get()方法返回的是Element,那麼就可以傳入EXT.get()中瞭
       2)在jQuery回調函數function(e)(註:很多都可以帶有e這個事件參數)中做文章,通過 EXT.get(e.arget)來達到目的。
       3)通過 $('p').lt(5).gt(3).parent().attr("id","myId") 強行設置id,再通過 EXT.get("myId") 來得到

You May Also Like