Today, we need to embed combobox in the grid. After finding it online for a long time, we haven't found a correct and feasible method. It may be a version problem (my version is extjs3.0). We didn't continue to study the cause, search for information by yourself and finally implement the function. Now let's share the code. Use combobox data
The Code is as follows:
ComboDS = new Ext. data. JsonStore ({
Url: 'test. do ',
Fields :[{
Name: 'id'
},{
Name: 'display'
}]
});
Combobox Definition
The id in combobox must be included, and the value of combobox must be followed by the Data id.
The Code is as follows:
Var comboBox = new Ext. form. ComboBox ({
Id: "cb", // required
TypeAhead: true,
ReadOnly: true,
AllowBlank: false,
AutoScroll: true,
SelectOnFocus: true,
EmptyText: 'select ...',
Store: comboDS,
ForceSelection: true,
TriggerAction: 'all ',
DisplayField: 'display ',
ValueField: 'id'
});
Grid definition:
The Code is as follows:
Ds = new Ext. data. Store ({
Baseparams :{
Start: 0,
Limit: RowCount
},
Proxy: new Ext. data. HttpProxy ({
Url: 'test2. do'
}),
Reader: new Ext. data. JsonReader ({
Root: 'data ',
TotalProperty: 'totalcount'
},[{
Name: "bh"
},{
Name: "test"
}]);
});
Var cm = new Ext. grid. ColumnModel ([new Ext. grid. RowNumberer (),{
Header: "No ",
DataIndex: "bh"
},{
Header: "test ",
DataIndex: "test ",
Renderer: renderer,
Editor: comboBox
}]);
Grid = new Ext. grid. EditorGridPanel ({
Title: 'test ',
Ds: ds,
Cm: cm,
ClicksToEdit: 1,
ViewConfig :{
ForceFit: true
},
Bbar: new Ext. PagingToolbar ({
PageSize: RowCount,
Store: ds,
DisplayInfo: true,
DisplayMsg: 'display records from {0} to {1}, total records from {2 ',
EmptyMsg: "No record"
})
});
Renderer function of cm
This method is used to solve the problem. After the combobox is modified, it is displayed as id.
The Code is as follows:
Function renderer (value, p, r ){
Var index = comboDS. find (Ext. getCmp ('cb '). valueField, value );
Var record = comboDS. getAt (index );
Var displayText = "";
If (record = null ){
DisplayText = value;
} Else {
DisplayText = record. data. display; // obtain the value of the display field in the dataset in record.
}