Sencha Touch: setValue on TextField does not work

Question

In Sencha Touch 2 I have a controller which calls a custom 'prepopulate' method on button tap:

Ext.Ajax.request
    ({  
        method: 'GET',
        url:  myurl, //defined outside
        withCredentials: true,
        headers:{Authorization : auth},
        success: function(response){

            var data; 

            if(response.responseText.length > 0)
                  data = Ext.JSON.decode(response.responseText.trim());

            console.log(data);

            var fv = me.getFiscal();

            console.log(fv);

            fv.prepopulate(data);

            Ext.Viewport.animateActiveItem('fiscal', me.getSlideLeftTransition());
        },
        failure: function(response){
            Ext.Msg.alert('Server Error', 'Server down :( please try again later');
        }
    }


    );

View code:

prepopulate : function (data) {

    var me = this;


    var companyTextField = me.down('#fiscalForm').down('#companyTextField');
    var vatField = me.down('#fiscalForm').down('#vatField');

    var fiscalCodeTextField = me.down('#fiscalForm').down('#fiscalCodeTextField');
    var addressTextField = me.down('#fiscalForm').down('#addressTextField');

    var cityTextField = me.down('#fiscalForm').down('#cityTextField');
    var zipTextField = me.down('#fiscalForm').down('#zipTextField');

    var countryTextField = me.down('#fiscalForm').down('#countryTextField');
    console.log(vatField);
    console.log((data.vat));
    if(data){

        if(data.company_name)
            companyTextField.setValue(data.company_name);
        if(data.vat)
            vatField.setValue(data.vat);
        if(data.fiscal_code)
            fiscalCodeTextField.setValue(data.fiscal_code);
        if(data.address)
            addressTextField.setValue(data.address);
        if(data.city)
            cityTextField.setValue(data.city);
        if(data.zip)
            zipTextField.setValue(data.zip);
        if(data.country)
            countryTextField.setValue(data.country);

    }
    console.log(vatField);
}

The AJAX call works fine and it calls on success the prepopulate method passing the data retrieved from the server. I try to initialize the TextFields using setValue() but the form looks 'brand new' when I open it using the browser console.log() tells me that the _value private field is correctly set though... I'm groping in the dark right now ... any insight?

Thank You in advance.

M.

T. Rossi T. Rossi · Accepted Answer · 2014-03-09T01:44:57

As you suggest the data i correctly retrieved and display in the console with the console.log, nonetheless the browser don't find any visible fields to modify the value when the setValue() is called.

The solution so far is to modify the ajax request as follows:

Ext.Ajax.request
({  
....
....
    success: function(response){
    ....
        Ext.Viewport.animateActiveItem('fiscal', me.getSlideLeftTransition());

                    //view must be in the viewport before modifying data:
        var task = Ext.create('Ext.util.DelayedTask', function () {
                var fv = me.getFiscal();
                fv.prepopulate(data);
        });
        task.delay(1000);
.....
....
...
..
.

Sencha Touch: setValue on TextField does not work

1 Answers