JAVA高级面试进阶训练营视频教程

admin

 这里的经验不是指对这种框架总体上面的一些介绍，只是记录了本月中使用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：

Js代码  

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

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

 

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

 

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

Js代码  

1. zkyg.main.view = new Ext.Viewport({  
2.     layout: 'border',  
3.     border: false,  
4.     frame: false,  
5.     items: [{  
6.         region: 'north',  
7.         height: 41,  
8.         contentEl: 'header'  
9.     },   
10.                new Ext.Panel({  
11.                region:'center',  
12.                layout:'fit',  
13.                id: 'mainPanel',  
14.                items: [zkyg.main.centerPanel]  
15.         })]  
16. });  
17.    

Js代码  

1. //其他的一些业务逻辑-------------------------------------------  
2.   
3. if(Ext.getCmp('mainPanel').items != undefined){  
4.     Ext.getCmp('mainPanel').items.each(function(item){  
5.     Ext.getCmp('mainPanel').remove(item, false);  
6.     item.hide();  
7.     });  
8.  }     
9. zkyg.vm.viewPanel.show();  
10. Ext.getCmp('mainPanel').add(zkyg.vm.viewPanel);  
11. Ext.getCmp('mainPanel').doLayout();  

 

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

 

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

 

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

 

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

Js代码  

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

  

  再举个例子：

Js代码  

1. var reader = new Ext.data.ArrayReader({}, [  
2.     {name: 'full_name', type: 'string', mapping: 'first_name + " " + obj.last_name'},  
3.     {name: 'age'}  
4. ]);  
5.   
6. var grid = new Ext.grid.GridPanel({  
7.     store: new Ext.data.Store({  
8.         reader: reader,  
9.         data: Ext.grid.dummyData  
10.     }),  
11.   
12.     columns: [  
13.         {header: 'Full Name', dataIndex: 'full_name'},  
14.         {header: 'Age', dataIndex:'age'}  
15.     ]  
16. );  

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