在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应用程序中应该避免的开发方法有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！