The question about the Value submitted when the Extjs 2.2 drop-down box is used as the Editor

EditorGridPanel is often used in Extjs projects. Edit related values in related column fields and submit them to the background. Only when Combobox is used as the Editor, the value displayed after editing is ValueField rather than DisplayField. This is not what we would like to see.

 

1. the cm declaration code in Gridpanel. See the famous Editor of [branch:

[Javascript]
Var cm = new Ext. grid. ColumnModel ({
Defaults :{
Sortable: true,
Width: (centertabs. getInnerWidth ()-10)/10
},
Columns: [sm ,{
Header: 'department id ',
DataIndex: 'deptid ',
Hidden: true
},{
Header: 'Branch ID ',
DataIndex: 'branchid ',
Hidden: true
},{
Header: 'branches ',
DataIndex: 'branchname ',
Width: 100,
Editor: branchbox,
Id: 'branchcombo ',
Renderer: Ext. DongWan. comboRenderer (branchbox)

},{
Header: 'department name ',
DataIndex: 'deptname ',
Editor: new Ext. form. TextField ({
AllowBlank: false
})
},{
Header: 'department note ',
DataIndex: 'deptremark ',
Editor: new Ext. form. TextField ({
AllowBlank: false
})
},{
Header: 'creation time ',
DataIndex: 'createtime ',
Renderer: function (value ){
If (value instanceof Date ){
Return new Date (value). format ("Y-m-d ");
} Else {
Return value;
}
},
Editor: new Ext. grid. GridEditor (
New Ext. form. DateField ({
Format: 'Y-m-d ',
Type: 'date'
}))
}]
});

2. In the above Code, we became the combobox Editor. However, it displays the value of ValueField.
We need to use the above method to display the DisplayField value:

Renderer: Ext. DongWan. comboRenderer (branchbox)

3. renderer: Ext. DongWan. comboRenderer (branchbox) Method

[Javascript]
// Format the drop-down list
ComboRenderer: function (combo ){
Return function (value ){
Var record = combo. findRecord (combo. valueField, value );

Return record
? Record. get (combo. displayField)
: Value;
}
}
[Javascript]
<Pre name = "code" class = "javascript" style = "display: inline! Important; "> <pre> </pre>
<Pre> </pre>
<Pre> </pre>
<Pre> </pre>
<Pre> </pre>
<Pre> </pre>
 
</Pre>