Extjs4之解决Tab中id冲突问题

当左侧为树形菜单，右侧为TabPanel时，点击左侧的对应的树形菜单，右侧则会加载对应的Tab。如在加载Tab的Extjs代码中包含有id属性配置的控件时，并且在右侧Tab中已经有该菜单对应的Tab，当再次点击左侧对应树形菜单加载Tab时，就有可能会报id冲突错误。这是因为当再次点击左侧菜单时，Tab对应的Extjs代码会再次运行一次，再创建一个Tab。id属性它是一个全局性的，在当前整个Extjs代码是有效的，并且id值必须是唯一的。所有当再次加载时，就会报该错误。要解决这种错误的方法是，通过控件中的itemId属性配置来代替id，这样就可以解决了。itemId是一个局部的，它在哪个控件定义的，作用就在那个控件范围内，通过它就可解决id值冲突问题。如果要获取该控件，通过getComponent(itemId)方法就可以获取。

示例代码：

创建一个列表，包含一个itemId的删除按钮。原来使用id，报id冲突错误。

    //创建列表
    var depclassGrid = Ext.create('Ext.grid.GridPanel', {
        store: depclassStore,
        loadMask: { msg: '数据加载中，请稍候...' },
        selModel: sm,
        stripeRows: true,
        columns: [
            { xtype: 'rownumberer' },
            { text: '班级编号', dataIndex: 'classId', width: 100, align: 'center' },
        ],
        tbar: Ext.create('Ext.toolbar.Toolbar', {
            style: 'background:#DFEAF2',
            itemId: 'toolbar1',//定义itemId
            items: [
                '->',
                {
                    text: '新增班级',
                    cls: 'button',
                    icon: 'icon/add.png',
                    handler: function () {
                        AddDepclass(null, depclassGrid);
                    }
                },
                '-',
                {
                    text: '删除选中行',
                    cls: 'button',
                    itemId: 'depclassDelete',//定义itemId
                    icon: 'icon/delete.png',
                    disabled: true,
                    handler: function () {
                        var item = depclassGrid.getSelectionModel().getSelection();
                        if (item.length == 0) {
                            Ext.Msg.alert('温馨提示', '请选择要删除的记录...');
                            return;
                        }
                        var classId = "";
                        for (var i = 0; i < item.length; i++) {
                            classId += item[i].data['classId'] + ",";
                        }
                        Ext.Msg.confirm('温馨提示', '确定要删除吗？', function (btn) {
                            if (btn == 'yes') {
                                Ext.Ajax.request({
                                    url: 'aspx/depclass/Delete.aspx',
                                    waitMsg: '数据处理中，请稍候...',
                                    success: function (response) {
                                        var json = Ext.decode(response.responseText);
                                        if (json.success) {
                                            Ext.Msg.alert("系统提示", json.msg, function () {
                                                depclassGrid.getStore().reload();
                                            });
                                        } else {
                                            Ext.Msg.alert("系统提示", json.msg);
                                        }
                                    },
                                    failure: function () {
                                        Ext.Msg.alert('系统提示', '删除失败');
                                        depclassGrid.getStore().reload();
                                    },
                                    params: { classId: classId }
                                });
                            }
                        });
                    }
                }
            ]
        })
    });

通过itemId获取删除

var sm = Ext.create('Ext.selection.CheckboxModel', {
        checkOnly: true,
        listeners: {
            select: function (model, record, index) {
                depclassGrid.getComponent('toolbar1').getComponent('depclassDelete').enable();//获取删除按钮，并启用
            },
            selectionchange: function (model, selected) {
                var records = model.getSelection();
                if (records.length <= 0) {
                    depclassGrid.getComponent('toolbar1').getComponent('depclassDelete').disable();
                }
            }
        }
    });