javascript - ExtJS 过滤组合框商店

Question

我声明了以下组合框:

{
   xtype: 'combobox',
   id:'sizeSelect',
   store: new Ext.data.SimpleStore({
       fields: [
                   {name: 'typeChoosen', type: 'string'},
                   {name: 'sizeValue',  type: 'string'}
       ],
       data: [
           ['DECIMAL','(9.2)'],
           ['DECIMAL','(9.4)'],
           ['DECIMAL','(19.2)'],
           ['DECIMAL','(19.4)'],
           ['DECIMAL','(28.2)'],
           ['DECIMAL','(28.4)'],
           ['DECIMAL','(38.2)'],
           ['DECIMAL','(38.4)'],
           ['TEXT','250'],
           ['TEXT','500'],
           ['TEXT','1000'],
           ['TEXT','2000'],
           ['TEXT','4000'],
           ['INTEGER','dafault']
        ]
    })
}

我在带有网格的面板中使用它，用于“大小”列:

我希望“大小”列中的组合框根据先前的单元格值以及每种类型的相应值进行更新。

在网格面板中，我有以下用于过滤的监听器:

listeners : {
beforeitemdblclick : function( eventThis,  record,  item, index, e, eOpts,objA ){

    var stateCombo = Ext.getCmp('sizeSelect');
    var currentTypeChoosen = record.raw[1]
    stateCombo.store.each(function(storeItem){
            if(storeItem.data.typeChoosen == currentTypeChoosen){ 
                stateCombo.store.filter("typeChoosen",currentTypeChoosen);
            }                                           
    }); 
}

它似乎比较正确，但它返回组合框中的一个对象，而不仅仅是值。我是 ExtJS 的新手，我真的想不出一种方法让它按我想要的方式工作。

更新

这是我的工作代码:

{
xtype: 'combobox',
id:'sizeSelect',
editable:false,
valueField: 'typeValue',
displayField: 'typeValue',
mode:'local',
lastQuery: '',
allowBlank: false,
listeners:{
},
store: new Ext.data.SimpleStore({
    fields: ['size', 'typeValue'],
    data: [
            ['DECIMAL', '(9,2)'],
            ['DECIMAL', '(9,4)'],
            ['DECIMAL', '(19,2)'],
            ['DECIMAL', '(19,4)'],
            ['DECIMAL', '(28,2)'],
            ['DECIMAL', '(28,4)'],
            ['DECIMAL', '(38,2)'],
            ['DECIMAL', '(38,4)'],
            ['TEXT', '250'],
            ['TEXT', '500'],
            ['TEXT', '1000'],
            ['TEXT', '2000'],
            ['TEXT', '4000']
        ]
})
}

var panel3 = Ext.create('Ext.panel.Panel', { 
    id:'step3',
    border:0,
    xtype: 'panel', 
    anchor:'100% 100%',
    hideMode:'display',
    bodyStyle:"overflow-y:scroll !important;",
    hidden:true,
    autoHeight:true,
    items: [{
        xtype: 'grid',
        id:'tableTypeGrid',
        border: false,                      
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 2
            })
        ],
        listeners : {
            beforeitemdblclick : function( eventThis,  record,  item, index, e, eOpts ){
                var stateSizeCombo = Ext.getCmp('sizeSelect');
                var sizeColumnStore = stateSizeCombo.getStore();
                var prevCellValue = record.data.type;
                sizeColumnStore.clearFilter();
                sizeColumnStore.filter('size', prevCellValue); //
                }
            },
            ...

组合框的属性非常重要:)

Answer 1

我想你可以使用 beforeedit网格事件(从 Ext.grid.plugin.Editing 添加)，如下所示:

    beforeedit: function(plugin, context) {
        // Current editor panel size combo
        var sizeCombo = plugin.editor.down('combo[name=size]');
        if(sizeCombo) {
            var sizeStore = sizeCombo.getStore();
            sizeStore.clearFilter();
            sizeStore.filter('type', context.record.get('type'));
        }
    }

检查这个simple example .