EXTJS记事本 当CompositeField遇上RowEditor

时间:2021-05-28

原因是客户的物料种类非常多,有一千种之多,如果单纯用一个Combobox,那么在实际使用中,很难快速找到一个物料,所以,我使用包含物料分类和物料品牌的两个combobox来组成级联式筛选。问题恰恰出在这儿,如果在roweditor的一个字段中用多个控件,就要处理每个控件的初始化,Change事件。网上目前还未找到有人有好的解决办法。经过3天的调试,我终于解决了问题,把我的代码贴出来:
复制代码 代码如下:
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);

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);

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);

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

}

]


}


]

谨以此记,分享给有需要的朋友

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章