NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统（4）--关于(3)报错"Cannot read property 'addCls' of null"

在《NHibernate3.3.0GA+ExtJS4.1.1+ASP.NET MVC3.0权限管理系统（3）--Grid编辑》中，view/SystemManage/menu/List.js的代码如下：

Ext.define('RoleManage.view.SystemManage.menu.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.menulist',
    id: 'menulist',
    title: '菜单列表',
    region: 'center',
    store: 'SystemManage.Menu',
    tbar:  Ext.create('Ext.Toolbar', {//添加工具栏按钮--新增，修改，删除按钮
        xtype: 'toolbar',
        items: [
        { id: 'add', action: 'add', text: '新增菜单', iconCls: 'add'}, '-',
        { id: 'edit', action: 'edit', text: '修改菜单', iconCls: 'option' }, '-',
        { id: 'delete', action: 'delete', text: '删除菜单', iconCls: 'remove' }
    ]}),
    initComponent: function () {//设置Grid显示信息列
        this.columns = [
              { header: '编号', dataIndex: 'id', flex: 1 },
              { header: '菜单名称', dataIndex: 'vcName', flex: 1 },
              { header: '地址', dataIndex: 'vcUrl', flex: 1 }
        ];
        this.callParent(arguments);
    }
});

 一开始，采用上面的代码，web也是可以运行，但是由于没有很好的进行测试，这个问题现在才暴露出来。

具体的问题是这样的：

我在单击菜单打开菜单信息tab选项卡之后，关闭该选项卡，再重新通过菜单打开菜单信息选项卡的时候，则会报一下错误--

Uncaught TypeError: Cannot read property 'addCls' of null.

这个问题的解决原理我也不是很懂，在通过查找相关资料（参考资料URL：Extjs4---Cannot read property 'addCls' of null），对该文件做了如下修改，问题就解决了。

Ext.define('RoleManage.view.SystemManage.menu.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.menulist',
    id: 'menulist',
    title: '菜单列表',
    initComponent: function () {
        Ext.apply(this, {
            store: 'SystemManage.Menu',
            columns: [
              { header: '编号', dataIndex: 'id', flex: 1 },
              { header: '菜单名称', dataIndex: 'vcName', flex: 1 },
              { header: '地址', dataIndex: 'vcUrl', flex: 1 }
            ], 
        tbar: {
            xtype: 'toolbar',
            items: [
                { id: 'add', action: 'add', text: '新增菜单', iconCls: 'add' }, '-',
                { id: 'edit', action: 'edit', text: '修改菜单', iconCls: 'option' }, '-',
                { id: 'delete', action: 'delete', text: '删除菜单', iconCls: 'remove' }
            ]
        },
            bbar: {
                xtype: 'pagingtoolbar',
                store: 'SystemManage.Menu', //Ext.create('RoleManage.store.SystemManage.Menu'),
                displayInfo: true,
                displayMsg: '显示 {0} - {1} 共 {2}条',
                emptyMsg: "没有数据需要显示"
            }
        }),
        this.callParent(arguments);
    }
});

然而，在这个更改的过程中，我又发现官网的例子，在userlist中，我只是添加了tbar和bbar的代码，内容和（3）的基本上是一样的，但是为什么会出错呢，然后我对两个List的代码进行了比较，发现在在两个属性初始化的方式存在差异：

tbar:   {
        xtype: 'toolbar',
        items: [
        { id: 'add', action: 'add', text: '新增菜单', iconCls: 'add'}, '-',
        { id: 'edit', action: 'edit', text: '修改菜单', iconCls: 'option' }, '-',
        { id: 'delete', action: 'delete', text: '删除菜单', iconCls: 'remove' }
    ]
    },
    bbar: {
        xtype: 'pagingtoolbar',
        store: 'SystemManage.Menu',
        displayInfo: true,
        displayMsg: '显示 {0} - {1} 共 {2}条',
        emptyMsg: "没有数据需要显示"
    },

这里，我没有采用Ext.create的方法进行初始化，然而达到的效果也是相同的，List.js完整的代码：

Ext.define('RoleManage.view.SystemManage.menu.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.menulist',
    id: 'menulist',
    title: '菜单列表',
    store: 'SystemManage.Menu',
    tbar:   {
        xtype: 'toolbar',
        items: [
        { id: 'add', action: 'add', text: '新增菜单', iconCls: 'add'}, '-',
        { id: 'edit', action: 'edit', text: '修改菜单', iconCls: 'option' }, '-',
        { id: 'delete', action: 'delete', text: '删除菜单', iconCls: 'remove' }
    ]
    },
    bbar: {
        xtype: 'pagingtoolbar',
        store: 'SystemManage.Menu', 
        displayInfo: true,
        displayMsg: '显示 {0} - {1} 共 {2}条',
        emptyMsg: "没有数据需要显示"
    },
    initComponent: function () {
        this.columns = [
              { header: '编号', dataIndex: 'id', flex: 1 },
              { header: '菜单名称', dataIndex: 'vcName', flex: 1 },
              { header: '地址', dataIndex: 'vcUrl', flex: 1 }
        ];
        this.callParent(arguments);
    }
});

对于报错信息：
Uncaught TypeError: Cannot read property 'addCls' of null.
网上也提供了在生成的tab选项卡时添加如下内容，但是我发现在即使没有以下语句，以上报错，依然解决，原因如何，还在探究中....

    closable: true,
    closeAction: 'destroy',
    autoDestroy: true

以上都是基于ExtJS4.1.1版本，如果大家有什么建议或者问题，希望我们能一起讨论，谢谢~

推荐下自己的淘宝小店女装：诗语情裳