开发者社区> 问答> 正文

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);
	////			}
	//		]
		});


展开
收起
爱吃鱼的程序员 2020-05-30 21:46:19 632 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对象,后生成"类"]就很容易理解了.
    ######我想说,这种写法是没有问题的。######感谢你的留言,不过在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中就会出问题啊?

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

    引用来自“cr2121”的答案

    话这么多时间发贴求助不如看官方文档。
    没找到有用的东西,还请赐教
    ######

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

    确保每个id都不一样吗?
    确保不一致,在config中输入的id是可以传递到每一个filelist的,这个是试过的
    ######tabfiles 发来看看######

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

    2020-05-30 21:46:19
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
UI2CODE智能生成flutter代码--整体架构 【上叶】 立即下载
成功案例-Par...[幸运杰哥].1512720360.pdf 立即下载
APP加固新方向 --混淆和瘦身 立即下载