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}}); 现在通过这个方法没法执行具体使用方法
- var new_params = { ndpcId:id};
- Ext.apply(win.query("#dpcCheckBoxTree")[0].getStore().proxy.extraParams,new_params);
- 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'的唯一主键。或者配置成自己的主键如：
- 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']
- });
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 ，处理方法
- 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;
- }
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
}
待续。。。。。。。。。。。。。。