CODEWITHSUNDEEP
extjs
Saima
Saima

Reputation: 1

EXTJS Combo set problem

I run into an interesting problem while was using combos in input form. My form contains combos that get data from json stores. It works fine when adding new record, but when the form is opened for editing an existing record, sometimes the id appears as selected not its value (eg: there's 5 instead of "apple"). I think it tries to set the value before it finishes loading the combo.

I check Combo store count and it returns zero this means selection done before combo is loaded. i try to set value in load event and fire select event but it does not work It works well when i reselect another record at that time store is loaded

i also see this thread but it does not give feasible answer ExtJS combo setting problem

Is there anyway to set its text?

Can anybody give me right soln please?

Upvotes: 0

Views: 3417

Answers (5)

Saima
Saima

Reputation: 1

var partyType_store = new Ext.data.Store(
{
    autoLoad: false,
    autoDestroy: true,

    // Note that I have renamed the web service proxy class
    proxy: new Ext.data.HttpProxy({
        url: accounts.webService + '/GetType',
        // ASP.NET WebService call in GET format
        headers: {
            'Content-type': 'application/json'
        }
    }),

    fields: ['AccountTypeId', 'AccountTypeName'],
    listeners {
        load: function() {
            Ext.getCmp('cmbPartyType').setValue(Ext.getCmp("txtId").getValue());
            Ext.getCmp('cmbPartyType').fireEvent("select");
        }
    }
},

// Combo is defined as
{
    xtype: 'combo',
    width: 150,
    fieldLabel: 'Party Type',
    name: 'PartyType',
    id: 'accounts-cmbPartyType',
    store: partyType_store,
    displayField: 'PartyType',
    valueField: 'PartyTypeId',
    hiddenName: 'PartyTypeId',
    mode: 'local', // important property when using store
    typeAhead: true,
    triggerAction: 'all',
    selectOnFocus: true,
    allowBlank: true,
    forceSelection: true
}

I load combo store on event say button click event

Ext.getCmp('cmbPartyType').getStore().load(); //this calls combo load event

It works fine if i set autoLoad=true in store But actually I don't want to load store initially to reduce traffic until user press button

Upvotes: 0

stivlo
stivlo

Reputation: 85506

Sometimes it appears the id, because there is a race condition in your code. In fact, if the store has been loaded, it will show the display value, otherwise just the id.

I tested this in my own code. The store loaded much faster than the Ajax call to retrieve the initialization value (because I memcached the first call). Since the store was loaded first, calling setValue() with the Id worked great.

However, when I tried to slow down purposely the store load Ajax call, only the id was shown and not the display value. So I've seen answers telling that to solve this problem, you've to use autoLoad: true in the ComboBox. Using autoLoad is fine, but not enough. You want to be sure that when you set the value, the store has been loaded already. To do this, just put a listener on the load event of the store:

var dataStore = new Ext.data.JSonStore({
    url: 'your-url',
    root: 'records',
    fields: ['id', 'name'],
    autoLoad: true,
    listeners: { 
        load: function () {
            app.initForm(); //here the name of the function setting form values
        }
});

With this event everything works fine in both cases.

To prevent reloading the data when ComboBox triggers a new load() event after the first run I am checking if the value is set in app.initForm()

app.initForm = function () {
    var customerField = Ext.getCmp('formName').getForm().findField('idCustomer');
    if (customerField.getValue !== '') {
        return; //skipping init, form already filled
    }
    //Ajax Call here
};

Upvotes: 0

Mark Porter
Mark Porter

Reputation: 1630

I have been fighting with this for a while, and I finally had a enough. Add this hack somewhere before you load any combos (doesn't have to be after document ready)

Ext.form.ComboBox.prototype.nativeSetValue = Ext.form.ComboBox.prototype.setValue;
Ext.form.ComboBox.prototype.setValue=function(v){
   var combo = this;
   if(this.valueField){
      var r = this.findRecord(this.valueField, v);
      if (!r) {
         var data = {}
         data[this.valueField] = v;
         this.store.load({
            params:data,
            callback:function(){
               combo.nativeSetValue(v);
            }
         })   

      } else return combo.nativeSetValue(v);
   } else combo.nativeSetValue(v);
}

This basically will check if your value is in your store, and if it is not, do a callback with valueField = value and then try setting again. You just need to make sure your serverside handler looks for "query" for searches and the key field for loads

Upvotes: 0

It Grunt
It Grunt

Reputation: 3378

Why is the mode set to local instead of remote? Have you used FireBug to make sure the data being sent from the ASP service is formatted correctly?

I'm a little unclear about what you are expecting in the store for these two items:
valuefield: 'PartyTypeId' <-- Is this a number or acode? 5?
displayField: 'PartyType' <-- Is this a number or code? apple?

Upvotes: 0

Xupypr MV
Xupypr MV

Reputation: 935

Are you use standard ExtJs method setValue to set value in comboBox?

Check that you set value inside Ext.onReady(...);

Or if you load values by ajax you can use update method with callback as 3rd parameter (see at http://dev.sencha.com/deploy/dev/docs/ -> ComboBox)

Upvotes: 0

Related Questions