gpt4 book ai didi

javascript - ComboBox 无法在 ExtJS 的 EditorGridPanel 中工作

转载 作者:行者123 更新时间:2023-11-28 09:49:43 26 4
gpt4 key购买 nike

我是 ExtJS 新手,需要将 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

最佳答案

您需要创建一个数据存储并将其绑定(bind)到您的组合框。然后在组合配置中,您可以告诉它要显示商店中的哪个字段以及要显示哪个字段的值。以下是 ExtJS 4 API 文档中的示例:

// 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 相同的字段。

关于javascript - ComboBox 无法在 ExtJS 的 EditorGridPanel 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11229999/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com