ExtJs中使用的一些经验

    这里的经验不是指对这种框架总体上面的一些介绍,只是记录了本月中使用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,就可以解析复杂的字段间的组合操作了。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值