在項目中使用了extjs的editorgridpanel,但是其中的combobox在選擇了相應的選項后，grid中顯示的是值域(valueField)的值，而非意愿中的顯示域(displayField)的值，經(jīng)過一些搜索和嘗試后找到了一個比較好的解決方法——在定義帶combobox的列時配置其renderer的屬性。
- var assistItemStore = new Ext.data.JsonStore({
- url:'assist.do',
- baseParams:{
- m : 'listAllLike',
- shopid: shopid ,
- subid: subid
- },
- root:'items',
- fields:[{
- name:'aux_name',
- mapping:'assistName'
- },{
- name:'aux_id',
- mapping:'assistid'
- }]
- });
- {
- header :'項目名稱',
- width :100,
- dataIndex :'aux_id',
- editor : new Ext.form.ComboBox({
- autoLoad:true,
- triggerAction : 'all',
- selectOnFocus : true,
- allowBlank : true,
- editable: true,
- displayField:'aux_name',
- valueField:'aux_id',
- minChars:1,
- queryParam:'subname',
- typeAhead: true,
- store: assistItemStore
- }),
- renderer: function(value,metadata,record){
- var index = assistItemStore.find('aux_id',value);
- if(index!=-1){
- return assistItemStore.getAt(index).data.aux_name;
- }
- return value;
- }
這樣寫之后，選擇之后grid中顯示了displayField的值，但最初從數(shù)據(jù)庫提取的值仍然顯示valueField的值，原因是store的數(shù)據(jù)是遠程取得的，在grid最初的render中還無法從store中查到相對應的displayField的值,于是打算用ajax異步取得displayField的值,但是異步的線程不造成阻塞,無法保證返回值之前能取得相應的數(shù)據(jù).后來想出另一個方法,為grid增加一個隱藏列,存放對應的值,在最初提取數(shù)據(jù)時能夠從中獲取要顯示的值.
- {
- header:'',
- width:10,
- dataIndex:'aux_name',
- hidden:true
- }, {
- header :'項目名稱',
- width :100,
- dataIndex :'aux_id',
- editor : new Ext.form.ComboBox({
- autoLoad:true,
- triggerAction : 'all',
- selectOnFocus : true,
- allowBlank : true,
- editable: true,
- displayField:'aux_name',
- valueField:'aux_id',
- minChars:1,
- queryParam:'subname',
- typeAhead: true,
- store: assistItemStore
- }),
- renderer: function(value,metadata,record){
- var index = assistItemStore.find('aux_id',value);
- if(index!=-1){
- return assistItemStore.getAt(index).data.aux_name;
- }
- return record.get('aux_name');
- }
總感覺這個編輯框太小了,用著很不舒服,希望改進. |
