ExtJS过滤Combobox商店

时间:2016-12-20 09:00:44

标签: javascript object extjs filter combobox

我声明了以下Combobox:

{
   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']
        ]
    })
}

我在带有网格的面板中使用它,用于“size”列:

enter image description here

我希望列'size'中的组合框基于先前的单元格值更新,并且每种类型都有相应的值。

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

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); //
                }
            },
            ...

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

1 个答案:

答案 0 :(得分: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