在Ext.JS應用程序中應該避免的開發方法有哪些

這篇文章給大家分享的是有關在Ext.JS應用程序中應該避免的開發方法有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

1. 過多或不必要的組件嵌套

開發人員最常見的錯誤之一是沒理由的嵌套組件。這樣做，會影響性能和也會造成應用程序的不美觀，如爽邊框火意外的布局行為。在下面的示例1A，在面板內只包含了一個Grid。在這種情況下，該面板是不必要的。如示例1B所示，額外的面板可以取消。要記住的是，表單面板、樹面板、標簽面板和Grid面板都是從面板擴展的，隱藏，在使用這些組件的時候，應該特別注意不要的嵌套情況。

items: [{
    xtype : 'panel',
    title: ‘My Cool Grid’,
    layout: ‘fit’,
    items : [{
        xtype : 'grid',
        store : 'MyStore',
        columns : [{...}]
    }]
}]

示例1A  不好的：面板（panel）是不必要的

layout: ‘fit’,
items: [{
    xtype : 'grid',
    title: ‘My Cool Grid’,
    store : 'MyStore',
    columns : [{...}]
}]

示例1B 好：Grid已經是面板，因而可以直接在Grid中使用任何面板屬性

2. 清理未使用組件失敗造成內存泄漏

許多開發人員不知道為什么他們的應用程序隨著使用時間越長越來越慢。在用戶瀏覽整個應用程序期間清理未使用組件失敗是最大的一個原因。在下面的實例2A中，每次用戶右鍵單擊Grid的行，都會創建一個新的右鍵菜單。如果用戶保持應用程序處于打開狀態并右鍵單擊行上百次，那么，就會有上百個永遠不會被摧毀的右鍵菜單。對于開發人員和用戶來說，應用程序“看上去”顯示是爭取的是因為只有最后一個被創建的菜單能顯示在頁面上，而且與的則是隱藏的。由于沒有創建新菜單并沒有清理舊的，應用程序的內存利用率就會不斷增長，這最終將導致較慢的操作或瀏覽器崩潰。

示例2A就很好，由于右鍵菜單只在Grid初始化時創建一次，并在用戶每次右鍵單擊行時重復使用。不過，如果Grid被銷毀，右鍵菜單一直存在，盡管它不再需要。最好的方式是示例2C，在Grid銷毀的時候，把右鍵菜單也銷毀。

Ext.define('MyApp.view.MyGrid',{
    extend : 'Ext.grid.Panel',
    columns : [{...}],
    store: ‘MyStore’,
    initComponent : function(){
        this.callParent(arguments);
        this.on({
            scope : this,
            itemcontextmenu : this.onItemContextMenu
        });
    },
                                                                                                                                           
    onItemContextMenu : function(view,rec,item,index,event){
        event.stopEvent();
        Ext.create('Ext.menu.Menu',{
            items : [{
                text : 'Do Something'
            }]
        }).showAt(event.getXY());
                                                                                                                                           
    }
});

示例2A 不好：每一次右鍵單擊都會創建菜單，且永遠不會被銷毀

Ext.define('MyApp.view.MyGrid',{
    extend : 'Ext.grid.Panel',
    store : 'MyStore',
    columns : [{...}],
    initComponent : function(){
        this.menu = this.buildMenu();
        this.callParent(arguments);
        this.on({
            scope : this,
            itemcontextmenu : this.onItemContextMenu
        });
    },
                                                                                                                                   
    buildMenu : function(){
        return Ext.create('Ext.menu.Menu',{
            items : [{
                text : 'Do Something'
            }]
        });
    },
                                                                                                                                   
    onItemContextMenu : function(view,rec,item,index,event){
        event.stopEvent();
        this.menu.showAt(event.getXY());
    }
});

感謝各位的閱讀！關于“在Ext.JS應用程序中應該避免的開發方法有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！