EXTJS記事本 當CompositeField遇上RowEditor_extjs

原因是客戶的物料種類非常多，有一千種之多，如果單純用一個Combobox，那麼在實際使用中，很難快速找到一個物料，所以，我使用包含物料分類和物料品牌的兩個combobox來組成級聯式篩選。問題恰恰出在這兒，如果在roweditor的一個欄位中用多個控制項，就要處理每個控制項的初始化，Change事件。網上目前還未找到有人有好的解決辦法。經過3天的調試，我終於解決了問題，把My Code貼出來：

複製代碼 代碼如下:

var editor=new Ext.ux.grid.RowEditor({
saveText: '確定',
cancelText:"放棄",
commitChangesText: '請確定或放棄修改',
errorText: '錯誤'
});
//當取消時，根據關鍵字段的值是否為空白而刪掉空記錄
editor.on("canceledit",function(editor,pressed)
{
if(pressed && editor.record.get("materialid")==0)
{
store.remove(editor.record);
}
},this);
/*
afterstart 這個事件是自己加的，因為如果在beforeedit事件中想對自己的控制項初始化，那是不可能的，因為beforeedit時，roweditor控制項還沒有渲染，所以，我加了afterstart事件，該事件在roweditor顯示後立即調用，所以，可以在這裡進行初始化。
要注意的是通過roweditor控制項進行遍曆來訪問自訂的composite控制項
editor.items.items[0]，這裡並不是我寫重了，而是roweditor控制項的items竟然不是一個集合，而是一個對象，在這裡我也耗了一些時間，最後還是通過firebug輸出editor對象發現的
editor.items.items[0]就是compositefield組件，通過該組件的items集合，就可以以標準的形式訪問其子組件，接下來，就可以初始化了
因為最後一個combobox的資料是要通過前兩個combobox級聯選取後載入的，所以，在這裡載入其資料進行初始化，但是注意，我是在callback中執行的，因為jsonstore的load動作是非同步，所以，必須通過callback事件的回調在資料載入成功後，再用setValue來初始化值
*/
editor.on("afterstart",function(editor,rowIndex)
{
var record=store.getAt(rowIndex);
editor.items.items[0].items.items[0].setValue(record.get("setid"));
editor.items.items[0].items.items[1].setValue(record.get("category"));
var t_store=editor.items.items[0].items.items[2].getStore();
t_store.load({
params:{category:record.get("category"),setid:record.get("setid")},
callback:function(r,options,success){
if (success)
editor.items.items[0].items.items[2].setValue(record.get("materialid"));
}
});
},this);
/*
validateedit事件是在按了確認時執行的，用來驗證roweditor中各控制項的值，在這裡，我執行了一個自訂的驗證動作，因為我不想使用者可以添加重複的物料，所以，我通過遍曆jsonstore，將每條記錄的物料值與使用者選擇的物料值進行比較，如果發現已經存在，則提示使用者不要重複加入
*/
editor.on("validateedit",function(editor,obj,record,rowIndex){
var materialid=editor.items.items[0].items.items[2].getValue();
var exist=false;
Ext.each(store.getRange(),function(o,i){
if(o!=record&&o.get("materialid")==materialid)
{
exist=true;
return(false);
}
});
if(exist)
{
Ext.MessageBox.alert("系統提示","請勿重複添加");
store.remove(record);
}
return(!exist);
},this);
/*
afterEdit是通過驗證後執行的，這裡最重要的動作是將正在編輯的記錄的某些屬性賦值，原因是由於採用了compsitefield，所以，roweditor無法將選取的值賦給record的正確屬性，需要我們手工將使用者的選擇賦給相應的欄位,materialid就是使用者選的物料編號，而model對應是該物料的型號
為什麼要賦model呢？因為model是列的值嘛，不賦的話，顯示的是空的
*/
editor.on("afteredit",function(editor,obj,record,rowIndex){
record.set("materialid",editor.items.items[0].items.items[2].getValue());
record.set("model",editor.items.items[0].items.items[2].getRawValue());
},this);

以上是roweditor的定義和對事件的處理，接下來，將roweditor作為外掛程式插入到gridpanel

複製代碼 代碼如下:

{
xtype:"grid",
title:"產品BOM",
layout:"fit",
store:store,
enableDragDrop: false,
border: false,
frame:false,
autoScroll:true ,plugins:[editor],
sm:sm,
height:340,
clicksToEdit:2,
autoWidth: true,
viewConfig:{forceFit:true,autoFill:true,markDirty:false}
}

接下來，再看看關於gridpanel的列定義，這裡，你可以看到composite是如何用的

複製代碼 代碼如下:

columns: [{

header: "物料名稱/型號",
dataIndex: "model",
width: 200,
menuDisabled: true,
editor:
{
//定義編輯器
xtype:"compositefield",
name:"compositefield",
items:[
{
xtype: "combo",
mode:"local",
name:"sets",
width:80,
fieldLabel: "適用產品品牌",
emptyText:"請選擇",
valueField: "id",
lazyInit:false,
value:this.data?this.data.title:"",
hiddenName:"setid",
hiddenValue:this.data?this.data.setid:"",
displayField: "title",
typeAhead: false,
forceSelection: true,
editable:true,
listeners:{
"change":function(combo,newvalue,oldvalue)
{
//處理品牌的change事件，在選取品牌後，重新載入combobox，editor就是前文定義的roweditor的執行個體
var category=editor.items.items[0].items.items[1];
var material=editor.items.items[0].items.items[2];
var c=category.getValue();
var store=material.getStore();
store.load({
params:{setid:newvalue,category:c},
callback:function(r,options,success){
if (success)
material.setValue("");
}
});
}
},
triggerAction: "all",
store: new Ext.data.JsonStore({
url: "<%=script_path%>data.asp",
root: "data",autoDestroy:true,
remoteSort: true,
listeners:{"load":function(store,records,option){
var s=Ext.data.Record.create([{name:"id",type:"int"},{name:"title",type:"string"}]);
store.add(new s({id:0,title:"通用"}))
}},
baseParams: {op: "setList"},
totalProperty: "total",
autoLoad: true,
fields: ["title","id"]
})
},
{

xtype: "combo",
mode:"local",width:60,
name:"category",
fieldLabel: "類別",
emptyText:"請選擇",
valueField: "category",
lazyInit:false,
value:this.data?this.data.category:"",
displayField: "category",
typeAhead: false,forceSelection: true,
triggerAction: "all",
listeners:{
"change":function(combo,newvalue,oldvalue)
{
//處理類別的change事件，在選取品牌後，重新載入combobox，editor就是前文定義的roweditor的執行個體
var sets=editor.items.items[0].items.items[0];
var material=editor.items.items[0].items.items[2];
var setid=sets.getValue();
var store=material.getStore();
store.load({
params:{category:newvalue,setid:setid},
callback:function(r,options,success){
if (success)
material.setValue("");
}
});
}
},

store: new Ext.data.JsonStore({
url: "<%=script_path%>data.asp",
root: "data",autoDestroy:true,
remoteSort: true,
baseParams: {op: "materialCategoryList"},
totalProperty: "total",
autoLoad: true,
fields: ["category"]
})


},
{
xtype: "combo",
forceSelection: true,
editable:true,
mode:"local",
name:"material",
fieldLabel: "物料",
emptyText:"請選擇物料",
valueField: "id",
allowBlank:false,
displayField: "model",
width:250,
lazyInit:false,
typeAhead: false,
triggerAction: "all",
listeners:{
"change":function(combo,newvalue,oldvalue)
{
//這裡一定要注意！！！如果沒有下面這兩句，那你選擇後，會發現顯示的值不會變化，並且，點了確認，也不能更新。為什麼呢？因為roweditor是通過檢測record的isdirty屬性來決定是不是調用validateedito和afteredit的，它是檢測每列對應的控制項值是否變化來判斷的，由於物料型號這列，對應的是compositefield，所以，我們必須讓compositefield值發生變化，roweditor才會調用validedit和afteredit，並且，compositefield的值還會被調用來顯示在列裡
var comp=editor.items.items[0];
comp.setRawValue(combo.getRawValue());

}
},

store: new Ext.data.JsonStore({
url: "<%=script_path%>data.asp",
root: "data",autoDestroy:true,
remoteSort: true,
baseParams: {op: "materialList"},
totalProperty: "total",
autoLoad: false,
fields: ["model","id"]
})}
]
}


},
{
header: "數量",
dataIndex: "qty",
width: 50,
menuDisabled: true,
editor: {
xtype: 'numberfield',
minValue:1,
allowDecimals:false
}

}
,{
header: "顏色",
dataIndex: "color",
width: 60,
menuDisabled: true

}
,{
header: "尺寸",
dataIndex: "size",
width: 60,
menuDisabled: true

}

]


}


]

謹以此記，分享給有需要的朋友