EXTJS记事本 当CompositeField遇上RowEditor_Javascript教程-查字典教程网
EXTJS记事本 当CompositeField遇上RowEditor
EXTJS记事本 当CompositeField遇上RowEditor
发布时间:2016-12-30 来源:查字典编辑
摘要:原因是客户的物料种类非常多,有一千种之多,如果单纯用一个Combobox,那么在实际使用中,很难快速找到一个物料,所以,我使用包含物料分类和...

原因是客户的物料种类非常多,有一千种之多,如果单纯用一个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);

/*

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

}

]

}

]

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类