extjs4 各种怪异问题

原文链接：https://www.geek-share.com/detail/2587383802.html

用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}}); 现在通过这个方法没法执行具体使用方法

Js代码  

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'的唯一主键。或者配置成自己的主键如：

Js代码  

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

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 删除的问题，如何删除除了根节点以外所有的子节点？？

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

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

 

待续。。。。。。。。

 

 

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

 

Java代码  

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.                                     });   
15.   
16.   
17.                         field: {    
18.                              
19.                                     allowBlank: true,   
20.                                     xtype: 'combo',   
21.                                     name:'',    
22.                                     queryMode: 'remote',     
23.                                     store:alarmStore,   
24.                                     displayField:'standardName',   
25.                                     valueField:'alarmStandardId',   
26.                                     editable:false    
27.                                     
28.                             } ,   
29.                            renderer: function(value, metadata, record, rowIndex, columnIndex, store){   
30.                                     index = alarmStore.findExact('alarmStandardId',value);    
31.                                     if (index != -1){   
32.                                         rs = alarmStore.getAt(index).data;   
33.                                            
34.                                         return rs.standardName;    
35.                                     }   
36.                                  /*var index = store.find(buildingCombobox.valueField,value);  
37.                                  var r = store.getAt(index);      
38.                                  alert(r.data.buildingName);*/  
39.                                  //console.log(record);   
40.                                  return value;   
41.                                 }  

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

转载于:https://www.cnblogs.com/IcefishBingqing/p/3255449.html