CompositeField が RowEditor_extjs と一致する場合の EXTJS メモ帳

理由は、顧客が持っているマテリアルの種類が 1,000 個にも及ぶため、コンボボックスが 1 つだけだと、実際に使用するマテリアルをすぐに見つけることが困難になるため、マテリアルの分類とマテリアルのブランドを含む 2 つのコンボボックスを使用します。 . カスケードフィルターを形成します。問題はまさにここにあります。行エディター フィールドで複数のコントロールを使用する場合は、各コントロールの初期化と Change イベントを処理する必要があります。インターネット上ではまだ良い解決策を持っている人を見つけていません。 3 日間のデバッグの後、最終的に問題を解決し、コードを投稿しました:

コードをコピー コードは次のとおりです:

var editor=new Ext.ux.grid.RowEditor({
saveText: 'OK',
cancelText: "諦めます",
commitChangesText: '確認するか与えてください変更をアップします' ,
errorText: 'Error'
}); ",function (editor,pressed)
{
if(pressed && 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] が複合フィールド コンポーネントであることがわかりました。フォーム内の標準の Access サブコンポーネントを使用できます。次に、
を初期化できます。最後のコンボボックスのデータは最初の 2 つのコンボボックスのカスケード選択を通じて読み込まれるため、初期化のためにここでそのデータを読み込みますが、注意してください。 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" )},
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){
varmaterialid=editor.items.items[0] .items. items[2].getValue();
varexist=false;
Ext.each(store.getRange(),function(o,i){
if(o!=record&&o.get(")マテリアル ID")==マテリアル ID)
{
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:"Product 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 の列定義を見てみましょう。コンポジットがどのように使用されているかを見ることができます

コードをコピーします コードは次のとおりです:

columns: [{

header: "マテリアル名/モデル",
dataIndex: "モデル",
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、
listeners:{
"change " :function(combo,newvalue,oldvalue)
{
//ブランドの変更イベントを処理します。エディターは、以前に定義された roweditor のインスタンスです。
var category=editor .items.items[0].items.items[1];
varmaterial=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: "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:"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)
{
// カテゴリの変更イベントを処理します。選択後、ブランディング後、コンボボックスをリロードします。エディターは、以前に定義された roweditor のインスタンスです。
var set=editor.items.items[0].items.items[0]; 0].items.items[2];
var setid=sets.getValue();
store.load({
params:{category: newvalue,setid:setid},
callback:function(r,options,success){
if (success)
material.setValue("")
}
}); 🎜>}
},

store: new Ext.data.JsonStore({
url: "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: "material"、
emptyText:"マテリアルを選択してください"、
valueField: "id"、
allowBlank:false、
displayField: "model"、
width:250、
lazyInit:false、
typeAhead: false、
triggerAction: "all"、
listeners:{
"change " :function(combo,newvalue,oldvalue)
{
//ここに注意してください! ！ ！以下の2文がない場合は、選択後も表示値が変化せず、「確認」をクリックしても更新できないことがわかります。なぜ？ roweditor は、レコードの isdirty 属性を検出することによって validateedito と afteredit を呼び出すかどうかを決定するため、各列に対応するコントロール値が変更されるかどうかを決定します。材料モデルの列は複合フィールドに対応するため、複合フィールドの値が変更されたときに roweditor が実行するようにする必要があります。 validedit と afteredit を呼び出すと、compositefield の値も呼び出され、列
var comp=editor.items.items[0];
comp.setRawValue(combo .getRawValue());
}
},

store: new Ext.data.JsonStore({
url: "data.asp",
root: " data",autoDestroy:true,
remoteSort: true,
baseParams: {op: "materialList"},
totalProperty: "total",
autoLoad: false,
fields: ["モデル","id"]
})}
]
}


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

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

}
,{
header: "サイズ",
dataIndex: "size",
width: 60,
menuDisabled: true

}

]


}


]


このメモをとって、困っている友達と共有したいと思います。