ExtJs中使用的一些经验

最新推荐文章于 2021-06-15 14:50:18 发布

最新推荐文章于 2021-06-15 14:50:18 发布 · 144 阅读

文章标签：

#Extjs #组件动态替换 #组件复用 #字段合并

Extjs 专栏收录该内容

2 篇文章

订阅专栏

本文详细记录了在使用ExtJS框架过程中遇到的三个常见问题及其解决方案，包括面板元素的重用、边布局组件动态替换以及store中字段合并方法。文中提供了具体的代码示例，帮助开发者在遇到类似问题时快速定位并解决问题。

这里的经验不是指对这种框架总体上面的一些介绍，只是记录了本月中使用ExtJs中遇到的3个问题的解决方法，这里还是要感谢Extjs论坛的Animal和Condor，每次在我遇到拦路虎的时候，总能在他俩的Tread中找到对应的解决办法。好了下面来讲遇到的这三个问题：

1.penel中item被remove后不能被再次引用：

我遇到的一种问题是，我有2个panel，panel1为主面板，panel2为panel1的子面板，即panel2在panel1的items集合中，在我的应用中，我需要动态切换panel1的items中的内容，我采用的是panel面板的方法panel1.remove(panel2)，但是这样操作之后再次调用add(panel2)的话会报extjs的错误，一旦panel2被remove后，它会调用panel2的destory方法进行销毁，导致下次没办法再调用之前的panel2，而新创建的panel2又不符合要求（没有了之前的状态数据），解决办法如下，code：

panel1.remove(panel2, false);
panel2.hide();

采用这两句之后，panel2会被从panel1中移除，但又不会被销毁，那么下次还可以通过panel1.add(panel2)把panel2再加进来进行重复使用。

2.borderlayout布局中中不能动态替换组件：

呵呵，如果你的主面板的布局是borderlayout，那你不要指望能动态替换主面板的儿子级组件，因为ExtJs的官方文档里明确说了不支持对borderlayout类型的面板的组件进行动态替换，而且我也尝试了很多次都不成功，但是我们可以换个思路，去动态替换孙子级组件，我们看代码：

zkyg.main.view = new Ext.Viewport({
	layout: 'border',
	border: false,
	frame: false,
	items: [{
		region: 'north',
		height: 41,
		contentEl: 'header'
	}, 
               new Ext.Panel({
               region:'center',
               layout:'fit',
               id: 'mainPanel',
               items: [zkyg.main.centerPanel]
        })]
});

//其他的一些业务逻辑-------------------------------------------

if(Ext.getCmp('mainPanel').items != undefined){
    Ext.getCmp('mainPanel').items.each(function(item){
    Ext.getCmp('mainPanel').remove(item, false);
    item.hide();
    });
 }   
zkyg.vm.viewPanel.show();
Ext.getCmp('mainPanel').add(zkyg.vm.viewPanel);
Ext.getCmp('mainPanel').doLayout();

如果我们直接去替换mainPanel这个面板，明显是不成功的，但是我们可以将mainPanel固定，设置它本身的布局类型为fit类型，然后去动态替换它的子面板，这样操作是没有问题的，也就是上面讲的borderlayout你不要去替换儿子级组件，而是去替换他的孙子级组件。

还有一点，如果存在多层嵌套的面板（上中下三层）要进行动态替换的时候，最好将面板类型设置为Ext.Container类型，因为如果设置成Ext.Panel类型的话，在IE8及以下版本的IE浏览器中存在兼容性问题，add/remove方法可能会不成功。

3.store中多个字段如何进行合并：

实际工作中经常要用到把store中多个字段合并的问题（本来我有很多例子，但是一想说起来太麻烦，就不举例了，呵呵），直接看代码吧：

var vmstore = new Ext.data.JsonStore({
	url: '/vmmanage/query.do',
	root: 'rows',
	fields: [{name:'id',mapping:'id'}, {name: 'displayx',mapping: 'id + "(" + obj.nickname+")"'}]
});

再举个例子：

    var reader = new Ext.data.ArrayReader({}, [
        {name: 'full_name', type: 'string', mapping: 'first_name + " " + obj.last_name'},
        {name: 'age'}
    ]);

    var grid = new Ext.grid.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: Ext.grid.dummyData
        }),

        columns: [
            {header: 'Full Name', dataIndex: 'full_name'},
            {header: 'Age', dataIndex:'age'}
        ]
   });

通过mapping字段来构造一个适合自己的reader，就可以解析复杂的字段间的组合操作了。