콤보 상자의 ExtJS

Question

내가 ExtJS에 새로운 오전과 EditorGridPanel에 ComboBox을 둘 필요가에 대한 EditorGridPanel에서 작동하지 않습니다.

내 코드는 EditorGridPanel에 콤보 박스를 생성하지 않으며 EditorGridPanel도 표시하지 않습니다.

여기 당신의 도움에 대한 코드 감사합니다. 캡쳐 더하기 플래그

/*==== INVOICE DATA START =======================================================*/ 

/* create the ComboBox editor */ 
var idCombo = new Ext.form.ComboBox({ 
    id: 'id', 
    valueField: 'id', 
    displayField:'id', 
    store: '', //what do I store here?? 
    triggerAction: 'all' 
}); 

var idRenderer = function(value,metaData,record){ 
    // try record.data.teacher here 
    return "displayValue" 


var iLineItemCM = new Ext.grid.ColumnModel([ 

    { 
     id: 'i_line_item_id', 
     header: 'Line Item ID', 
     dataIndex: 'i_line_item_id', 
     width: 80, 
     editor: this.idCombo(), 
     renderer:idRenderer 

    } 

,{ 
     id:'i_line_item_name', 
     header: "Line Item Name", 
     dataIndex: 'i_line_item_name', 
     width: 315, 
     resizable: true, 
     align: 'center', 
     editor: new Ext.form.TextArea({ 
      allowBlank: false 
     }) 
    } 
    ,{ 
     header: "Amount", 
     dataIndex: 'i_line_item_amt', 
     width: 80, 
     align: 'right', 
     renderer: 'usMoney', 
     editor: new Ext.form.NumberField({ 
      allowBlank: false, 
      allowNegative: false, 
      maxValue: 100000 
     }) 
    } 
    ]); 

var iLineItemRec = 
new Ext.data.Record.create([ 
    { 
    name: 'i_line_item_id' , 
    mapping: 'i_line_item_id' , 
    type: 'string' 
} 
,{ 
    name: 'i_line_item_name' , 
    mapping: 'i_line_item_name' , 
    type: 'string' 
} 
,{ 
    name: 'i_line_item_amt'  , 
    mapping: 'i_line_item_amt' , 
    type: 'string' 
} 
]); 

var iLineItemStore = new Ext.data.Store({ 
    url: '', 
    reader: new Ext.data.JsonReader({ 
     root: 'rows' 
    }, 
    iLineItemRec 
    ) 
}); 

var iLineItemGrid = new Ext.grid.EditorGridPanel({ 
    id: 'iLineItemStore', 
    store: iLineItemStore, 
    cm: iLineItemCM, 
    cls: 'iLineItemGrid', 
    width: 'auto', 
    height: 'auto', 
    frame: true, 
    //title:'Edit Plants?', 
    //plugins:checkColumn, 
    clicksToEdit:1, 
    viewConfig: { 
     //forceFit: true 
     autoFit:true 
    }, 
    tbar: [{ 
     text: 'Add', 
     tooltip:'Add the line item', 
     handler : function(){ 
      var r = new iLineItemRec({ 
       i_line_item_name: '', 
       i_line_item_amt: '' 
      }); 
      iLineItemGrid.stopEditing(); 
      iLineItemStore.insert(0, r); 
      iLineItemGrid.startEditing(0, 0); 
     } 
    }, 
    { 
     text: 'Delete', 
     tooltip:'Remove the selected line item', 
     handler: function(){ 
      iLineItemGrid.stopEditing(); 
      var r = iLineItemGrid.getSelectionModel().getSelectedCell(); 
      iLineItemStore.removeAt(r[1]); 
     } 

    } 

    ] 
}); 
/////////////////// CODE ENDS 

Answer 1

데이터 저장소를 만들고이를 콤보 박스에 바인딩해야합니다. 그런 다음 콤보 설정에, 당신은 당신이 표시되는 필드는 값을 원하는하려는 상점에서 어떤 필드를 알 수 있습니다.

// The data store containing the list of states 
var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], // fields that your data consists of 
    data : [ 
     {"abbr":"AL", "name":"Alabama"}, 
     {"abbr":"AK", "name":"Alaska"}, 
     {"abbr":"AZ", "name":"Arizona"} 
     //... 
    ] 
}); 

// Create the combo box, attached to the states data store 
var combo = Ext.create('Ext.form.ComboBox', { 
    fieldLabel: 'Choose State', 
    store: states, // here you use the store 
    queryMode: 'local', 
    displayField: 'name', // you tell your combobox which field to display from the store 
    valueField: 'abbr', // you tell your combobox which field to use for value from the store 
    renderTo: Ext.getBody() 
}); 

당신이 combo.getValue()를 사용하는 경우, 그리고 만약 예 : 다음의 ExtJS에서 예를 들어 4 개 API 문서 도구입니다 "알래스카는"당신의 콤보 상자에서 선택하고, 그것은 "AK"를 반환합니다. 원하는 경우 displayField 및 valueField와 동일한 필드를 사용할 수도 있습니다.