CompositeField가 RowEditor_extjs를 만날 때 EXTJS 메모장

그 이유는 고객이 가지고 있는 재료의 종류가 천 가지에 달하기 때문입니다. 하나의 콤보박스만 사용하면 실제 사용하는 재료를 빠르게 찾기가 어렵기 때문에 재료 분류와 소재 브랜드가 포함된 두 개의 콤보박스를 사용합니다. . 캐스케이드 필터를 형성합니다. 문제는 바로 여기에 있습니다. roweditor 필드에서 여러 컨트롤을 사용하는 경우 각 컨트롤의 초기화 및 변경 이벤트를 처리해야 합니다. 아직 인터넷에서 좋은 해결책을 가진 사람을 찾지 못했습니다. 3일간의 디버깅 끝에 마침내 문제를 해결하고 코드를 게시했습니다.

코드 복사 코드는 다음과 같습니다.

var editor=new Ext.ux.grid.RowEditor({
saveText: 'OK',
cancelText: "포기",
commitChangesText: '확인하거나 제공해주세요. up thechange' ,
errorText: 'Error'
})
//취소 시 키 필드 값이 비어 있는지 여부에 따라 빈 레코드를 삭제합니다.
editor.on("canceledit ",함수(편집기,눌림)
{
if(눌림 && editor.record.get("materialid")==0)
{
store.remove(editor.record);
}
},this);
/*
afterstart 이 이벤트는 직접 추가합니다. 왜냐하면 beforeedit 이벤트에서 자신의 컨트롤을 초기화하려는 경우 불가능하기 때문입니다. roweditor 컨트롤은 아직 렌더링이 없어서 roweditor가 표시된 직후에 호출되는 afterstart 이벤트를 추가하여 여기서 초기화할 수 있도록 했습니다.
맞춤형 복합 컨트롤
editor.items.items[0]은 roweditor 컨트롤을 통해 액세스된다는 점에 유의해야 합니다. 여기서 덮어쓴 것이 아니라 roweditor 컨트롤의 항목이 컬렉션이 아닙니다. 저도 여기서 시간을 좀 보냈습니다. 마침내 이 컴포넌트의 항목 컬렉션을 통해
editor.items.items[0]가 복합필드 컴포넌트라는 것을 알게 되었습니다. 다음으로 초기화할 수 있습니다.
마지막 콤보박스의 데이터는 처음 두 개의 콤보박스 캐스케이드 선택을 통해 로드되므로 초기화를 위해 여기에 데이터를 로드합니다. jsonstore의 로드 작업은 비동기식이므로 콜백에서 실행하므로 데이터가 성공적으로 로드된 후 콜백 이벤트의 콜백을 통해 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.items[2].getStore();
t_store.load({
params:{category:record.get("category"),setid:record.get("setid" )},
콜백:함수(r,options,success){
if(성공)
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();
varexist=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가 해당 속성을 할당할 수 없기 때문입니다. selected 레코드의 올바른 속성을 할당하려면 사용자 선택을 해당 필드에 수동으로 할당해야 합니다. Materialid는 사용자가 선택한 재료 번호이고 모델은 재료의 모델에 해당합니다
왜 우리는 모델을 할당해야 하나요? 모델은 열의 값이므로 할당되지 않으면 표시가 비어 있게 됩니다
*/
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의 정의와 이벤트 처리입니다. 그리드 패널에

코드 복사 코드는 다음과 같습니다.

{
xtype:"grid",
title:"제품 BOM",
layout:"fit",
store:store,
enableDragDrop: false,
테두리: false,
프레임:false,
autoScroll:true ,플러그인:[편집기],
sm:sm,
높이:340,
clicksToEdit:2,
autoWidth: true,
viewConfig:{forceFit:true,autoFill:true,markDirty:false}
}

다음으로 GridPanel의 열 정의를 살펴보겠습니다. 합성이 어떻게 사용되는지 보실 수 있습니다

코드를 복사하세요 코드는 다음과 같습니다

열: [{

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? .data.setid:"",
displayField: "title",
typeAhead: false,
forceSelection: true,
editable:true,
리스너:{
"change " :function(combo,newvalue,oldvalue)
{
//브랜드 변경 이벤트를 처리합니다. 브랜드를 선택한 후 콤보박스를 다시 로드합니다. 편집기는 이전에 정의한 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 (성공)
material.setValue("");
}
})
}
},
triggerAction: "all",
store: new Ext.data.JsonStore({
url: "<%=script_path%>data.asp",
root: "data",autoDestroy:true,
remoteSort: true,
리스너 :{"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:"Universal"}))
}},
baseParams: {op: "setList" },
totalProperty: "total",
autoLoad: true,
fields: ["title","id"]
})
},
{

xtype: "combo",
mode:"local",width:60,
name:"category",
fieldLabel: "category",
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)
{
//카테고리의 변경 이벤트를 처리합니다. 브랜딩 후 콤보박스를 다시 로드합니다. Editor는 이전에 정의한 roweditor의 인스턴스입니다.
var set=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 (성공)
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,
필드: ["category "]
})


},
{
xtype: "combo",
forceSelection: true,
editable:true,
mode: "local",
name:"material",
fieldLabel: "material",
emptyText:"재료를 선택하세요",
valueField: "id",
allowBlank:false,
displayField: "model",
width:250,
lazyInit:false,
typeAhead: false,
triggerAction: "all",
리스너:{
"change " :function(combo,newvalue,oldvalue)
{
//여기서 꼭 주목하세요! ! ! 아래 두 문장이 없을 경우, 표시된 값은 선택한 후에도 변경되지 않으며, 확인을 눌러도 업데이트가 되지 않는 것을 알 수 있습니다. 왜? roweditor는 레코드의 isdirty 속성을 감지하여 verifyeditito 및 afteredit를 호출할지 여부를 결정하므로 각 열에 해당하는 컨트롤 값이 변경되는지 여부를 확인합니다. validedit 및 afteredit를 호출하면 복합 필드 값도 호출되어
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,
필드: [" 모델","id"]
})}
]
}


},
{
헤더: "수량",
dataIndex: "qty",
너비: 50,
menuDisabled: true,
editor: {
xtype: 'numberfield',
minValue:1,
allowDecimals:false
}

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

}
,{
헤더: "크기",
dataIndex: "크기",
너비: 60,
menuDisabled: true

}

]


}


]


이 메모를 찍어서 도움이 필요한 친구들과 공유하고 싶습니다.