extjs4 各种怪异问题

用extjs4 已经有一段时间了，过去开发的时候用过extjs2.2 因为放下了两年所有很多东西记得不是很清楚了，现在又直接使用4 突然发现这个世界变得太快连代码都变得这么快，大部分东西都完全不一样了，组建，数据交互.....，因为有采用了extjs4的新标准MVC 哎现在这个前段也搞什么三层，软件架构真是越来越复杂。在此主要整理记录一下在4中遇到一下比较奇怪的问题和解决方法，

1： MVC 初始化的问题，MVC 的核心是Controller 相当于Servlet 大量逻辑性的代码都写在里边主要需要引入 stores，

views，models 只要需要显示在页面的view都要引入到views 数组中，MVC 在加载Controller 的时候会创建stores 中所有的stores ，其他的views ，models 则不会创建对象，不知道他们这样设计的目的在于什么？

2： MVC 中 一般在View 中包含一个Store ，而在Store中会包含一个Model 的属性，view中包含store 例如store:'config.configmanage.DPCGridPanelStore', 只需要写入store的相对路径即可，但是 store 中包含model 则必须写入绝路径 model:'DELTA.model.config.configmanager.DPCModel', 不知道他们这样设计目的在于什么？

3： 属性赋值 ：创建组建时候直接给组建的属性赋值 和通过Ext.apply()给组建赋值有区别，其中有一个应用就是

 tab 中新增一个grid 第一次没有问题，但是如果把这个tab 关闭 在点击新增这个grid 这个grid的就会显示出现问题，搞了好长时间发现吧 分页bar 通过apply的方式赋给grid 就不会出现这个问题，如果是直接配置给gird 就会出问题实在是不能理解。

4： baseParams 使用 一般在条件分页的时候使用 在使用2.2的时候 直接通过store.load({baseParams:{a:a}}); 现在通过这个方法没法执行具体使用方法

1. var new_params = { ndpcId:id};
2. Ext.apply(win.query("#dpcCheckBoxTree")[0].getStore().proxy.extraParams,new_params);
3. win.query("#dpcCheckBoxTree")[0].getStore().load();

var new_params = { ndpcId:id};
			    Ext.apply(win.query("#dpcCheckBoxTree")[0].getStore().proxy.extraParams,new_params);
				win.query("#dpcCheckBoxTree")[0].getStore().load();

5： 在使用可编辑Grid 的时候 最后一步往往都是获得修改的数据集提交到后台

extjs3 的时候 通过调用store的getModifyRecords() 的方法 4以后改成getUpdatedRecords但是在调用后发现修改过的 model[] 的长度都是0 。解决办法

ext 的模型类：model有如下一个熟悉

idProperty  : String

The name of the field treated as this Model's unique id (defaults to 'id').（唯一识别store中记录的字段）

默认为'id'，如果没有配置这个属性，就需要在自己定义的model中提供一个名叫'id'的唯一主键。或者配置成自己的主键如：

1. Ext.define('Tms.model.QualificationInfo', {
2. extend : 'Ext.data.Model',
3. idProperty : 'qiId',//定义自己的主键
4. fields : [{
5. name : 'qiId',
6. type : 'int',
7. useNull : true
8. }, {
9. name : 'qtId',
10. type : 'int',
11. useNull : true
12. }, 'qiName', 'qiParents', 'qiNovitiate', 'qiTrainingTask']
13. });

Ext.define('Tms.model.QualificationInfo', {

extend : 'Ext.data.Model',

        idProperty : 'qiId',//定义自己的主键

fields : [{

name : 'qiId',

type : 'int',

useNull : true

}, {

name : 'qtId',

type : 'int',

useNull : true

}, 'qiName', 'qiParents', 'qiNovitiate', 'qiTrainingTask']

});

6: 在使用tree的时候出现点击树节点出现等待的符号无法进入的原因是 后台返回的tree 节点的id 有重复导致。

7: grid 在tab 中显示，如果同一个grid 在tab 上出现了两次就会出现 第二个grid 的数据把前一个覆盖，这个是因为grid中使用的store是单例 的你创建的多个grid 但是却创建了一个store 所以就会导致第二个在tab上新增的grid 的数据会覆盖原先打开的grid的数据 var store=Ext.widget('deviceliststore'); 然后store:store

传统的store:'Ext.data.Store' 这样的写法在创建多个grid 的时候只会穿件一个store

8：打开多个tab标签页 图标显示问题除了第一个的图标其他的无法正常显示， tbar 中如果是button 请不要指定xtype属性就可以解决

9: 在使用grid 固定列的时候 不但要设定 {xtype:'rownumberer',header:'编号',width:40,locked:true },还要设定height 的属性，不然是不能正常使用的。

10： Extjs 中的组件最好不要设置ID 而设置Name 属性， 在 例如panel 的id:p1 , 在tabpanel 中应用的时候弹出多个tab 的时候就会出现id 冲突的问题，错误现象是显示会出现异常，在tabpanel 使用的时候会经常的出现id冲突的问题

例如 按钮的id 冲突会导致图片无法显示的问题，这里说的id 冲突并不是你定义了两个id 一样的组件，而是你定义一个id但是这个组件生成了多次。

11:关于 Tree 删除的问题，如何删除除了根节点以外所有的子节点？？

Ext Tree 的root 也就是根节点非常重要，TreeStore 中有一个removeAll 方法是删除树的所有节点，但是一旦删除树的所有节点就无法对树进行操作了，所以在删除的时候经常都是保留根节点进行删除

tree.getStore().getRootNode( ).removeAll();

待续。。。。。。。。

12:在可编辑的grid 中使用combobox 控件的时候选择的dispalyValue renderer以后就成了 value ，处理方法

1. var alarmStore=Ext.create("Ext.data.Store", {
2. fields: ["alarmStandardId", "standardName"],
3. proxy:{
4. type : 'ajax',
5. url : 'findAlarmStandardNameList.action',
6. pageParam:'pageNo',
7. //model:'Delta.model.config.devicemanage.DeviceModel',
8. reader : {
9. type:'json' ,
10. root:'alarmStandardNameList'
11. }
12. }
13. });
14. field: {
15. allowBlank: true,
16. xtype: 'combo',
17. name:'',
18. queryMode: 'remote',
19. store:alarmStore,
20. displayField:'standardName',
21. valueField:'alarmStandardId',
22. editable:false
23. } ,
24. renderer: function(value, metadata, record, rowIndex, columnIndex, store){
25. index = alarmStore.findExact('alarmStandardId',value);
26. if (index != -1){
27. rs = alarmStore.getAt(index).data;
28. return rs.standardName;
29. }
30. /*var index = store.find(buildingCombobox.valueField,value);
31. var r = store.getAt(index);
32. alert(r.data.buildingName);*/
33. //console.log(record);
34. return value;
35. }

var alarmStore=Ext.create("Ext.data.Store", {
						                fields: ["alarmStandardId", "standardName"],
					                 	proxy:{
									    	type : 'ajax',
											url : 'findAlarmStandardNameList.action',
											pageParam:'pageNo',
											//model:'Delta.model.config.devicemanage.DeviceModel',
											reader : {
												type:'json' ,
												root:'alarmStandardNameList'

											}
									    }
						            });

						field: { 

							        allowBlank: true,
							        xtype: 'combo',
							        name:'',
							        queryMode: 'remote',
							        store:alarmStore,
							        displayField:'standardName',
							        valueField:'alarmStandardId',
							        editable:false 

						    } ,
						   renderer: function(value, metadata, record, rowIndex, columnIndex, store){
						   		    index = alarmStore.findExact('alarmStandardId',value);
					                if (index != -1){
					                    rs = alarmStore.getAt(index).data;

					                    return rs.standardName;
					                }
					           	 /*var index = store.find(buildingCombobox.valueField,value);
					      		 var r = store.getAt(index);
					           	 alert(r.data.buildingName);*/
					           	 //console.log(record);
					           	 return value;
				                }

13：grid 中使用lock （固定表头） 下动态设置column 的show 和hide 方法， 在普通grid 下动态设定表头比较容易

只需要获取grid 的columns 然后设置 需要隐藏的列.columns[x].setVisible(false); 但是在使用固定表头的情况下这个方法就没法执行老是提示 no method 的就是错误，确实百撕不得骑姐，非常不正常，就在生成的js 的代码中看看什么状况吧，发现在属性plugins 中多了一些东西 其中有一个view 属性，在view属性中有找到了lockedGrid ，和normalGrid两个不同grid 呵呵知道是什么

原因了 原来固定表头其实是通过插件吧grid 分成了两个grid 真正的column 就隐藏在这两个grid中 grid.plugins[0].view.normalGrid.columns[6].setVisible(false); 呵呵搞定

14： 如何彻底隐藏列，一般开发者在使用隐藏列的时候都是hidde:true 用来隐藏列，但是这种隐藏列是不干净的，可以通过列下来在显示上，所以要想彻底隐藏列不但要设置 hidden 属性还要设置 hideable: false , 属性

15：ajax 提交返回结果中带有<per></per> ，解决方法 response.setContentType("text/html");

16、如果要允许复制Grid单元格内容，配置以下参数就可以viewConfig: {
            stripeRows: true
            ,enableTextSelection: true
        }

待续。。。。。。。。。。。。。。

原文：http://zha-zi.iteye.com/blog/1522631