extjs4中多个grid创造paging导致渲染出错? 400 报错

extjs4中多个grid创造paging导致渲染出错? 400 报错

非常奇怪，这样的，mvc了一个mygrid，然后在一个tabpanel中包括了两个mygrid

xtype:'tabpanel',
items:[{
    xtype:'mygrid'
},{
    xtype:'mygrid'
}]

但是渲染出错，全部挤到左上角，id属性是没有设置的，

mygrid的定义大致如下：

Ext.define('APP.view.file.Lists', {
    extend: 'Ext.grid.Panel',
    alias : 'widget.filelists',
    store: Ext.create('QXAPP.store.Files'),
    columns: [{
	text: 'File',
	flex: 50,
	dataIndex: 'name'
    },{
	text: 'Last Modified',
	xtype: 'datecolumn',
	format: 'm-d h:i a',
	flex: 35,
	dataIndex: 'lastmod'
    },{
	text: 'Size',
	dataIndex: 'size',
	tpl: '{size:fileSize}',
	align: 'right',
	flex: 15,
	cls: 'listview-filesize'
    }],
    bbar: Ext.create('Ext.PagingToolbar', {
       displayInfo: true,
	displayMsg: '显示文档 {0} - {1} of {2}',
	emptyMsg: "当前没有文档"
        items:[]
    })
});

如果只是创造单个grid，那么没有任何问题，但是如果在tabpanel下创造了两个grid，立马就报错

为了测试，先恢复到只有一个grid的情况，然后在tabpanel下面增加了两个grid，完全正常

xtype:'tabpanel',
items:[{
    xtype:'mygrid'
},{
    xtype:'grid',
        columns:[{
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            renderer: renderTopic,
            sortable: false
        },{
            id: 'last',
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 150,
            renderer: renderLast,
            sortable: true
        }],
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[]
        })
},{
    xtype:'grid',
        columns:[{
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            renderer: renderTopic,
            sortable: false
        },{
            id: 'last',
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 150,
            renderer: renderLast,
            sortable: true
        }],
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[]
        })
}]

一样的支持，完全正常，没办法，继续缩减mygrid的代码，然后发现……在mygrid中将bbar的定义去掉，立马就正常，可以同时显示两个，上面的代码大部分都是从example里面拷贝的，虽然grid和pagingToolbar说了store需要定义，但是为了测试我逐步逐步地将没必要的全部删除，成了上面的摸样，所以代码是没有问题的

问题就是……为什么同样的代码，卸载config中就会出错，现在没有办法，将同样的代码移到了mygrid的initComponet里面去，一切又都是正常的

错误代码是TypeError: ownerCt.el is undefined

位置在

(166548 out of range 150286)

166548行，超出firebug位置了看不出来，不过看起来150286附近都应该是grid的东西了，

原始mygrid中的定义是：

bbar: Ext.create('Ext.PagingToolbar', {
		//store: 'Files',		//想办法在后面增加上去.
		displayInfo: true,
		displayMsg: '显示文档 {0} - {1} of {2}',
		emptyMsg: "当前没有文档"
//		items:[
//////			'-', {
//////			text: 'Show Preview',
//////			pressed: pluginExpanded,
//////			enableToggle: true,
//////			toggleHandler: function(btn, pressed) {
//////				var preview = Ext.getCmp('gv').getPlugin('preview');
//////				preview.toggleExpanded(pressed);
//////			}
//		]
	}),

在initComponet中是：

this.bbar=Ext.create('Ext.PagingToolbar', {
			//store: 'Files',		//想办法在后面增加上去.
			displayInfo: true,
			displayMsg: '显示文档 {0} - {1} of {2}',
			emptyMsg: "当前没有文档"
	//		items:[
	////			'-', {
	////			text: 'Show Preview',
	////			pressed: pluginExpanded,
	////			enableToggle: true,
	////			toggleHandler: function(btn, pressed) {
	////				var preview = Ext.getCmp('gv').getPlugin('preview');
	////				preview.toggleExpanded(pressed);
	////			}
	//		]
		});