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
        } 

待續。。。。。。。。。。。。。。

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