The reason is that the customer's material type is very much, there are 1000 kinds of many, if the simple use of a ComboBox, then in the actual use, it is difficult to quickly find an item, so I use the inclusion of the item classification and the item brand two ComboBox to form a cascade filter. The problem is here, if you're using multiple controls in a field in Roweditor, you'll need to handle the initialization of each control, the change event. No one has found a good solution on the Internet at this time. After 3 days of debugging, I finally solved the problem and posted my code:
Copy Code code as follows:
var editor=new Ext.ux.grid.RowEditor ({
Savetext: ' OK ',
Canceltext: "Give Up",
Commitchangestext: ' Please confirm or discard changes ',
ErrorText: ' Wrong '
});
When canceled, deletes empty records based on whether the value of the key field is empty
Editor.on ("CancelEdit", Function (editor,pressed)
{
if (pressed && editor.record.get ("Materialid") ==0)
{
Store.remove (Editor.record);
}
},this);
/*
Afterstart This event is on its own, because if you want to initialize your control in the Beforeedit event, it is not possible because the Roweditor control is not rendered when beforeedit, so I added the Afterstart event, This event is called immediately after the Roweditor is displayed, so you can initialize it here.
Note that the custom composite controls are historically accessed through the Roweditor control
Editor.items.items[0], here is not I write heavy, but the Roweditor control items are not a collection, but an object, where I also spent some time, and finally through the Firebug output editor object found
Editor.items.items[0] is the Compositefield component that, through the items collection of the component, can access its subcomponents in a standard form, and then you can initialize the
Because the last ComboBox data is to be loaded through the first two ComboBox cascade, so load its data here for initialization, but notice that I'm executing it in callback because the Jsonstore load action is asynchronous, so The value must be initialized with SetValue after the data has been successfully loaded by the callback of the callback event
*/
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);
/*
The Validateedit event was executed at the time of confirmation, to verify the values of the controls in the Roweditor, where I performed a custom validation action because I didn't want the user to be able to add duplicate items, so I passed through the Jsonstore, Compares the item value of each record with the item value selected by the user and prompts the user not to repeat the join if it is found already
*/
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 ("System Prompt", "Do not repeat add");
Store.remove (record);
}
return (!exist);
},this);
/*
Afteredit is performed after validation, where the most important action is to assign certain properties of the record being edited, because Compsitefield is used, so Roweditor cannot assign the selected value to the correct property of the recording. We need to manually assign the user's choice to the appropriate field, Materialid is the item number that the user chooses, and model corresponds to the type of the item
Why do you want to assign model? Because model is the value of the column, do not assign the words, the display is empty
*/
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);
The above is the definition of roweditor and the handling of events, next, insert roweditor as a plug-in into the Gridpanel
Copy Code code as follows:
{
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}
}
Next, take a look at the column definition of Gridpanel, where you can see how composite is used
Copy Code code as follows:
Columns: [{
Header: "Item Name/model",
Dataindex: "Model",
WIDTH:200,
Menudisabled:true,
Editor
{
Definition Editor
Xtype: "Compositefield",
Name: "Compositefield",
items:[
{
Xtype: "Combo",
Mode: "Local",
Name: "Sets",
WIDTH:80,
Fieldlabel: "Applicable product brand",
Emptytext: "Please choose",
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)
{
Handle the Change event for the brand, after selecting the brand, Reload Combobox,editor is the Roweditor instance defined in the previous article
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: "General"})
}},
Baseparams: {op: "setlist"},
Totalproperty: "Total",
Autoload:true,
Fields: ["title", "id"]
})
},
{
Xtype: "Combo",
Mode: "Local", width:60,
Name: "Category",
Fieldlabel: "Category",
Emptytext: "Please choose",
Valuefield: "Category",
Lazyinit:false,
Value:this.data?this.data.category: "",
Displayfield: "Category",
Typeahead:false,forceselection:true,
TriggerAction: "All",
listeners:{
"Change": function (Combo,newvalue,oldvalue)
{
Handle the Change event for the category, after selecting the brand, Reload Combobox,editor is the Roweditor instance defined above
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: "Material",
Emptytext: "Please select item",
Valuefield: "id",
Allowblank:false,
Displayfield: "Model",
WIDTH:250,
Lazyinit:false,
Typeahead:false,
TriggerAction: "All",
listeners:{
"Change": function (Combo,newvalue,oldvalue)
{
You must pay attention to!!! here. If you do not have these two sentences, then you will find that the displayed value will not change, and the point of confirmation, and can not be updated. Why, then? Because Roweditor determines whether to call Validateedito and afteredit by detecting the IsDirty property of the record, it is judged by the change in the value of each column corresponding to the control, because of the item model, Corresponds to the Compositefield, so we have to change the Compositefield value so that Roweditor calls Validedit and Afteredit, and the Compositefield value is also invoked to display in the column
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: "Quantity",
Dataindex: "Qty",
WIDTH:50,
Menudisabled:true,
Editor: {
Xtype: ' Numberfield ',
Minvalue:1,
Allowdecimals:false
}
}
,{
Header: "Color",
Dataindex: "Color",
Width:60,
Menudisabled:true
}
,{
Header: "Size",
Dataindex: "Size",
Width:60,
Menudisabled:true
}
]
}
]
I want to share it with my friends who need it.
