Extjs empty combo box value on expand click

0
votes

i have created lazy loading combo box, which queries data by entered value. But i have issue when value is loaded from database and i click expand list button, it sends request with empty mask instead of taking value of combobox, it seems, that empty value is taken for some reason.

Here is my combo box :

editor : {
            xtype : 'lazycombo',
            minChars : 1,
            pageSize : 20,
            id : 'tax-code-combo',
            store : 'TaxCodesStore',
            triggerAction : 'all'
        }

and here is request params :

limit   20
mask    
organizationId  108
start   0

mask is empty instead of before set value.

Thanks for help

my store :

TaxCodesStore = Ext.extend(Ext.data.JsonStore, {
constructor : function(cfg) {
    cfg = cfg || {};
    TaxCodesStore.superclass.constructor.call(this, Ext.apply({
        storeId : 'TaxCodesStore',
        api : {
            read : 'taxCode/getPagedList'
        },
        root : 'data',
        baseParams : {
            organizationId : 0
        },
        idProperty : 'taxCode',
        fields : [ {
            mapping : 'taxCode',
            name : 'value'
        }, {
            mapping : 'taxCode',
            name : 'label'
        }, {
            name : 'orgId',
            type : 'int'
        }, {
            name : 'percentageRate',
            type : 'int'
        } ]
    }, cfg));
}
});

new TaxCodesStore();

Update

What i have found after investigation, that combo box method getValue() returns the value, but for some reason in is not set as store param mask on request.

3
javascriptextjscombobox

3 Answers

1
votes

The "store" property mast be a reference on a such Ext.data.Store object:

store: Ext.create('TaxCodesStore', { ... });

Also need to configure "displayField" and "valueField" properties.

UPD:

    {
        xtype : 'lazycombo',
        minChars : 1,
        pageSize : 20,
        id : 'tax-code-combo',
        store : new TaxCodesStore(), // <---
        triggerAction : 'all',
        displayField: 'origId', // <---
        valueField: 'value' // <---
    }
1
votes

Maybe this will help you

HTML

<div id="cmb"></div>

Javascript

Ext.onReady(function(){
    var store = Ext.create('Ext.data.Store', {
        fields: ['id', 'attr'],
        proxy: {
            type: 'ajax',
            api: {
                read: '/someurl'
            },
            reader: {
                type: 'json',
                root: 'data',
                successProperty: 'success',
                totalProperty: 'total'
            }
        }
    });
    var cmb   = Ext.create('Ext.form.field.ComboBox', {
        triggerAction: 'all',
        store: store,
        displayField: 'attr',
        valueField: 'id',
        queryMode: 'remote',
        listeners: {
            beforequery: function(){
                this.getStore().getProxy().extraParams.mask = this.getValue();
            }
        }
    });


    cmb.render('cmb');

})
0
votes

After debugging the source, i have found there the problem was.

It was because of triggerAction : 'all', i removed it, and now my combo works perfect