Extjs4 一个棘手的问题:tabpanel关闭标签再打开报错,竟与grid的plugins有关

lippor 2012-07-15
问题描述:
有个tabpanel,新建一个tab标签,关闭的时候再打开就会报错。程序里已经设置了
closeAction: 'hide',
autoDestroy: false,

打开时判断是否已经存在,如果存在则显示并激活,如果不存在则创建并显示、激活。

调试结果:
在新建的tab标签里有grid,设置了行编辑插件:
plugins: [
                Ext.create("Ext.grid.plugin.RowEditing", {
                    clicksToEdit: 2   
                })
],

再调试后发现,grid里只要设置了:
plugins: []
就会会出这个问题
难道不能有插件??

我调试的过程发现一个奇怪现象,每次关闭(关闭时候调用hide(),隐藏),再创建的时候根本找不到,必须新建。求高手解决
deadlybug 2012-07-26
我测试了一下,并没有你说的问题,你可以把代码全部放出来大家看一下。

我测试的代码如下:
<script  type='text/javascript'>
Ext.define('demoTab', {
    extend: 'Ext.panel.Panel',

    layout: {
        align: 'stretch',
        type: 'hbox'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    title: 'My Grid Panel',
                    flex: 1,
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            text: 'Column1'
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            text: 'Column2'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            text: 'Column3'
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            text: 'Column4'
                        }
                    ],
					plugins: [
                        Ext.create('Ext.grid.plugin.RowEditing', {
                            ptype: 'rowediting',
                            clicksToEdit: 1
                        })
                    ],
                    viewConfig: {

                    }
                }
            ]
        });

        me.callParent(arguments);
    }

});
Ext.onReady(function(){  
Ext.define('demo', {
    extend: 'Ext.window.Window',

    height: 512,
    width: 720,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: 'tab panel demo',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    flex: 1,
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Add Tab',
                            listeners: {
                                click: {
                                    fn: me.onButtonClick,
                                    scope: me
                                }
                            }
                        }
                    ]
                }
            ],
            items: [
                {
                    xtype: 'tabpanel',
                    id: 'tabPanel',
                    itemId: 'tabPanel',
                    autoDestroy: false,
                    bodyPadding: 10,
                    closeAction: 'hide',
                    flex: 1
                }
            ]
        });

        me.callParent(arguments);
    },

    onButtonClick: function(button, e, options) {
        var id='myTab';
        var tabParent=Ext.getCmp('tabPanel');
        if (tabParent)
        {
            if (tabParent.getChildByElement(id))
            {
                tabParent.getChildByElement(id).show(button);
                tabParent.setActiveTab(id);
            }
            else
            {
                var newTab=Ext.create('demoTab',{
					id:id,
					title:'new tab',
					closable:true
				});
                tabParent.add(newTab);
                tabParent.setActiveTab(newTab);
            }
        }
    }

});
var  newWin = Ext.create('demo');
newWin.show();
});	
</script>

Global site tag (gtag.js) - Google Analytics