开发者社区> 问答> 正文

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

非常奇怪,这样的,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);
	////			}
	//		]
		});


展开
收起
爱吃鱼的程序员 2020-06-22 18:42:45 552 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    原始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">

    引用来自“我是潮汐”的答案

    <divclass="ref_body">

    没看懂你在说什么,能说清楚点么。

    你执行哪段代码出的错。

    你的gridpanel是否动态创建。把情况描述清楚,不然怎么帮你分析呀?

    话这么多时间发贴求助不如看官方文档。确保每个id都不一样吗?<divclass="ref">

    引用来自“cr2121”的答案

    <divclass=ref_body>话这么多时间发贴求助不如看官方文档。<divclass="ref">

    引用来自“我是潮汐”的答案

    <divclass=ref_body>确保每个id都不一样吗?tabfiles发来看看

    是不是因为你定义在config那边的时候,虽然生成了两个的gridpanel,但是引用了相同的一个bbar,导致渲染异常。
    试试:定义自己的gridpanel的时候,传一个bbarId进去,然后在bbar那边加一个this.bbarId,

    2020-06-22 18:43:02
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
UI2CODE智能生成flutter代码--整体架构 【上叶】 立即下载
JSPatch 成长之路 立即下载
APP加固新方向 --混淆和瘦身 立即下载