ComboBox 在 ExtJS 的 EditorGridPanel 中不起作用

Posted 2023-02-22

【中文标题】ComboBox 在 ExtJS 的 EditorGridPanel 中不起作用

【英文标题】：ComboBox is not working in an EditorGridPanel for ExtJS

【发布时间】：2012-06-29 02:36:43

【问题描述】：

我是 ExtJS 的新手，需要在 EditorGridPanel 中添加 ComboBox。

到目前为止，我的代码没有在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

【问题讨论】：

我建议查看 sencha 示例：docs.sencha.com/ext-js/4-1/#!/example 为您的用例找到一个最合适的示例，然后从复制他们的代码开始。首先让它在你的机器上工作。然后逐步修改它以使其更接近您的需要。如果您遇到问题，请在此处提出具体问题。

组合框需要从数据存储中填充

【参考方案1】：

您需要创建一个数据存储并将其绑定到您的组合框。然后在组合配置中，您可以告诉它您要显示商店中的哪个字段以及您想要哪个字段作为值。这是来自 ExtJS 4 API Docs 的示例：

// 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()，如果例如在您的组合框中选择了“阿拉斯加”，它将返回“AK”。如果您愿意，也可以使用与 displayField 和 valueField 相同的字段。