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); //// } // ] });
原始mygrid中的定义是:bbar: Ext.create
错误应该是在这儿了,如果用json格式定义一个类的时候,类的属性不能用Ext.create
再简单点儿说,类的属性不是一个对象,否则就会产生引用冲突;只能是string,int等基本类型.
如果用json格式定义一个类,对象会在"类"产生前被创建,相当于成了一个静态成员,所有这个类的对象都调用这一个对象.先把所有属性的什都赋成null吧,然后在initComponet中给每个性创建对象,这样就没问题了.
这个只要了解了js的原理[对象的引用]和ext的执行顺序[先生成json对象,后生成"类"]就很容易理解了.
######我想说,这种写法是没有问题的。######感谢你的留言,不过在json格式中使用是可以使用Ext.create来进行的######
没看懂你在说什么,能说清楚点么。
你执行哪段代码出的错。
你的gridpanel是否动态创建。把情况描述清楚,不然怎么帮你分析呀?
######没看懂你在说什么,能说清楚点么。
你执行哪段代码出的错。
你的gridpanel是否动态创建。把情况描述清楚,不然怎么帮你分析呀?
代码没有报错,而是渲染出错,所有的东西跑到左上角
代码大致是这样的
Ext.create('Ext.Viewport', { //Ext.create('Ext.form.Panel', { layout: 'border', items: [{ region: 'north', ..... },{ region : 'west', ..... },{ region :'center', region : 'center', xtype : 'tabfiles',//这个是一个tabpanel layout:'fit', items:[ Ext.create('QXAPP.view.file.Lists',{ initfilegroup:0, title : '文档列表', id:'defaultflist' }), Ext.create('QXAPP.view.file.Lists',{ initfilegroup:0, title:'文件其他列表', id:'defa32ultflist' }) ] },{ region : 'south', ...... }] });其中
QXAPP.view.file.Lists
的代码大致是这样的
Ext.define('QXAPP.view.file.Lists', { extend: 'Ext.grid.Panel', alias : 'widget.filelists', //注意,store如果放在这里的话,那么会导致出现的两个file.lists都拥有同样的store,原因不明……redlz2500@20130627 // store: new Ext.create('QXAPP.store.Files'), columns: [ ...... ], // 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); //////// } //// ] // }), initComponent: function() { // this.callParent(arguments); this.store = Ext.create('QXAPP.store.Files'); this.store.proxy.extraParams={group:this.initfilegroup}; //this.id=this.initAppID; //this.bbar.store=this.store; this.bbar=Ext.create('Ext.PagingToolbar', { //store: 'Files', //想办法在后面增加上去. store : this.store, 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); //// } // ] }); this.callParent(); } });
这个代码可以看到有两处是bbar,在config中被注释掉的一处是最开始的,在config的时候,且在center中只有一个 filelist的时候一切正常,但是有两个filelist的时候就会渲染错误,逐个注释掉filelist的内容,发现bbar注释掉后就正常了,所 以才将bbar的东西放到了initComponet中来定义。
试过直接在lanuch中的tabpanel中用config格式写带有bbar的简单grid,同时写了两个,代码一模一样,完全没有问题,就是filelist不行。
问题就是为什么bbar放到config中就会出问题啊?
是不是因为你定义在config那边的时候,虽然生成了两个的gridpanel,但是引用了相同的一个bbar,导致渲染异常。
试试:定义自己的gridpanel的时候,传一个bbarId进去,然后在bbar那边加一个this.bbarId,
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。