欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

EXTJS記事本 當(dāng)CompositeField遇上RowEditor

 更新時(shí)間:2011年07月31日 23:11:03   作者:  
用RowEditor作批量編輯器時(shí),遇到一個(gè)問(wèn)題,想要在Roweditor中使用三個(gè)下拉列表組成級(jí)聯(lián)式選擇控件
原因是客戶的物料種類(lèi)非常多,有一千種之多,如果單純用一個(gè)Combobox,那么在實(shí)際使用中,很難快速找到一個(gè)物料,所以,我使用包含物料分類(lèi)和物料品牌的兩個(gè)combobox來(lái)組成級(jí)聯(lián)式篩選。問(wèn)題恰恰出在這兒,如果在roweditor的一個(gè)字段中用多個(gè)控件,就要處理每個(gè)控件的初始化,Change事件。網(wǎng)上目前還未找到有人有好的解決辦法。經(jīng)過(guò)3天的調(diào)試,我終于解決了問(wèn)題,把我的代碼貼出來(lái):
復(fù)制代碼 代碼如下:

var editor=new Ext.ux.grid.RowEditor({
saveText: '確定',
cancelText:"放棄",
commitChangesText: '請(qǐng)確定或放棄修改',
errorText: '錯(cuò)誤'
});
//當(dāng)取消時(shí),根據(jù)關(guān)鍵字段的值是否為空而刪掉空記錄
editor.on("canceledit",function(editor,pressed)
{
if(pressed && editor.record.get("materialid")==0)
{
store.remove(editor.record);
}
},this);
/*
afterstart 這個(gè)事件是自己加的,因?yàn)槿绻赽eforeedit事件中想對(duì)自己的控件初始化,那是不可能的,因?yàn)閎eforeedit時(shí),roweditor控件還沒(méi)有渲染,所以,我加了afterstart事件,該事件在roweditor顯示后立即調(diào)用,所以,可以在這里進(jìn)行初始化。
要注意的是通過(guò)roweditor控件進(jìn)行遍歷來(lái)訪問(wèn)自定義的composite控件
editor.items.items[0],這里并不是我寫(xiě)重了,而是roweditor控件的items竟然不是一個(gè)集合,而是一個(gè)對(duì)象,在這里我也耗了一些時(shí)間,最后還是通過(guò)firebug輸出editor對(duì)象發(fā)現(xiàn)的
editor.items.items[0]就是compositefield組件,通過(guò)該組件的items集合,就可以以標(biāo)準(zhǔn)的形式訪問(wèn)其子組件,接下來(lái),就可以初始化了
因?yàn)樽詈笠粋€(gè)combobox的數(shù)據(jù)是要通過(guò)前兩個(gè)combobox級(jí)聯(lián)選取后載入的,所以,在這里載入其數(shù)據(jù)進(jìn)行初始化,但是注意,我是在callback中執(zhí)行的,因?yàn)閖sonstore的load動(dòng)作是異步的,所以,必須通過(guò)callback事件的回調(diào)在數(shù)據(jù)載入成功后,再用setValue來(lái)初始化值
*/
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事件是在按了確認(rèn)時(shí)執(zhí)行的,用來(lái)驗(yàn)證roweditor中各控件的值,在這里,我執(zhí)行了一個(gè)自定義的驗(yàn)證動(dòng)作,因?yàn)槲也幌胗脩艨梢蕴砑又貜?fù)的物料,所以,我通過(guò)遍歷jsonstore,將每條記錄的物料值與用戶選擇的物料值進(jìn)行比較,如果發(fā)現(xiàn)已經(jīng)存在,則提示用戶不要重復(fù)加入
*/
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("系統(tǒng)提示","請(qǐng)勿重復(fù)添加");
store.remove(record);
}
return(!exist);
},this);
/*
afterEdit是通過(guò)驗(yàn)證后執(zhí)行的,這里最重要的動(dòng)作是將正在編輯的記錄的某些屬性賦值,原因是由于采用了compsitefield,所以,roweditor無(wú)法將選取的值賦給record的正確屬性,需要我們手工將用戶的選擇賦給相應(yīng)的字段,materialid就是用戶選的物料編號(hào),而model對(duì)應(yīng)是該物料的型號(hào)
為什么要賦model呢?因?yàn)閙odel是列的值嘛,不賦的話,顯示的是空的
*/
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的定義和對(duì)事件的處理,接下來(lái),將roweditor作為插件插入到gridpanel
復(fù)制代碼 代碼如下:

{
xtype:"grid",
title:"產(chǎn)品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}
}

接下來(lái),再看看關(guān)于gridpanel的列定義,這里,你可以看到composite是如何用的
復(fù)制代碼 代碼如下:

columns: [{

header: "物料名稱/型號(hào)",
dataIndex: "model",
width: 200,
menuDisabled: true,
editor:
{
//定義編輯器
xtype:"compositefield",
name:"compositefield",
items:[
{
xtype: "combo",
mode:"local",
name:"sets",
width:80,
fieldLabel: "適用產(chǎn)品品牌",
emptyText:"請(qǐng)選擇",
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的實(shí)例
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: "類(lèi)別",
emptyText:"請(qǐng)選擇",
valueField: "category",
lazyInit:false,
value:this.data?this.data.category:"",
displayField: "category",
typeAhead: false,forceSelection: true,
triggerAction: "all",
listeners:{
"change":function(combo,newvalue,oldvalue)
{
//處理類(lèi)別的change事件,在選取品牌后,重新載入combobox,editor就是前文定義的roweditor的實(shí)例
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:"請(qǐng)選擇物料",
valueField: "id",
allowBlank:false,
displayField: "model",
width:250,
lazyInit:false,
typeAhead: false,
triggerAction: "all",
listeners:{
"change":function(combo,newvalue,oldvalue)
{
//這里一定要注意?。?!如果沒(méi)有下面這兩句,那你選擇后,會(huì)發(fā)現(xiàn)顯示的值不會(huì)變化,并且,點(diǎn)了確認(rèn),也不能更新。為什么呢?因?yàn)閞oweditor是通過(guò)檢測(cè)record的isdirty屬性來(lái)決定是不是調(diào)用validateedito和afteredit的,它是檢測(cè)每列對(duì)應(yīng)的控件值是否變化來(lái)判斷的,由于物料型號(hào)這列,對(duì)應(yīng)的是compositefield,所以,我們必須讓compositefield值發(fā)生變化,roweditor才會(huì)調(diào)用validedit和afteredit,并且,compositefield的值還會(huì)被調(diào)用來(lái)顯示在列里
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: "數(shù)量",
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

}

]


}


]

謹(jǐn)以此記,分享給有需要的朋友

相關(guān)文章

最新評(píng)論