非常奇怪,这样的,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对象,后生成"类"]就很容易理解了.<imgsrc="http://www.oschina.net/js/ke/plugins/emoticons/images/0.gif"alt=""/>
我想说,这种写法是没有问题的。感谢你的留言,不过在json格式中使用是可以使用Ext.create来进行的
没看懂你在说什么,能说清楚点么。
你执行哪段代码出的错。
你的gridpanel是否动态创建。把情况描述清楚,不然怎么帮你分析呀?
<divclass="ref">没看懂你在说什么,能说清楚点么。
你执行哪段代码出的错。
你的gridpanel是否动态创建。把情况描述清楚,不然怎么帮你分析呀?
话这么多时间发贴求助不如看官方文档。确保每个id都不一样吗?<divclass="ref">是不是因为你定义在config那边的时候,虽然生成了两个的gridpanel,但是引用了相同的一个bbar,导致渲染异常。
试试:定义自己的gridpanel的时候,传一个bbarId进去,然后在bbar那边加一个this.bbarId,
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。