Question

Extjs grid里某个column的xtype为combobox，怎样在页面ready的时候加载combobox下拉列表理的数据？

我定义了一个panel:
Ext.define(‘MyPanel’,{
...
//store : panelStore,

colums[
...
{

text : 'User Name',
dataIndex: 'username',

editor: {
//store: boxStore,
xtype: 'combobox'

}

}
]

})
在页面ready的时候创建panelStore, boxStore和MyPanel, 并将boxStore 塞给MyPanel的store：
Ext.onReady(function() {
var panelStore = Ext.create('Ext.data.Store',{...});

var boxStore = Ext.create('Ext.data.Store',{...});
Ext.create('MyPanel', {
renderTo : Ext.getElementById('facility-example'),
store : panelStore
);//这里创建MyPanel，并把panelStore数据塞给panel,

...//问题是我怎样把boxStore 塞给MyPanel里面那个text 为“User Name”的column？

}

那个column是 combobox的，有下拉列表，下拉列表中的数据读自boxStore。

Answer 1

ComboBox 定义有问题。你的 MyPanel 是  Ext.panel.Panel 还是 Ext.panel.Grid   ?

var combo = Ext.create('Ext.form.field.ComboBox', {
    displayField : 'name',
    valueField : 'code',
    editable : false,
    store : comboStore,
    labelAlign : 'right',
    width : 260,
    labelWidth : 60,
    emptyText : '名称',
    fieldLabel : '名称',
});

追问

跟panel 无关，事实上它是 Ext.tree.pabel

追答

var OneStore= Ext.create('Ext.data.Store', {
    fields : ['code', 'name'],
    data : [{
        name : "性别",
        code : null
    }, {
        name : "男",
        code : "01"
    }, {
        name : "女",
        code : "02"
    }]
});
var OneCombo = Ext.create('Ext.form.ComboBox', {
    store : OneStore,
    allowBlank : true,
    displayField : 'name',
    valueField : 'code',
    emptyText : '性别',
    editable : false  // 不可编辑
});
getOneDisplay = function(value, meta, record) {
    var rowIndex = OneCombo.store.find("code", "" + value);
    if (rowIndex < 0)
    return '';
    var record = OneCombo.store.getAt(rowIndex);
    return record ? record.get('name') : '';
}
// 在你的columns 写成如下
columns : [{
    dataIndex : 'sexuality',
    text : '性别',
    width : 120,
    editor : OneCombo,
    renderer : getOneDisplay
}]

不管是 treeGrid, 还是普通 Grid 都可以，参考下。

Answer 2

var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{abbr} - {name}</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{abbr} - {name}',
'</tpl>'
)
});

Answer 3

boxStore 创建完就 load() 加载

boxStore.load();这句话写在MyPanel创建之前

追问

我的意思是创建MyPanel时里面怎么添加代码，把column的store设为boxStore，目前我是在创建后解决的：
mp = Ext.create('MyPanel',{...});
mp.columns[4].editor.store = boxStore；//4是index