Formfield value from Webservice in Sencha touch

Question

In my Sencha touch application, I am populating my container by creating form items dynamically from a json object.

For a textfield I'm using the code as below:

Ext.getCmp('mytestpanel').add({
                        xtype: response.screens[index].screenItems[i].xtype,
                        id:response.screens[index].screenItems[i].name,
                        label: response.screens[index].screenItems[i].title,
                        name: response.screens[index].screenItems[i].name
                        }
                    });

The json used:

{
 "screens": [
      {
           "screenname": "Screen 1",
           "screenItems": [
                {"xtype": "textfield", "title": "Temperature"," name": "textfield1", "value":"service211"},
                {"xtype": "button", "title": "Update", "name": "button1"}
           ]
      },
      {
           "screenname": "Screen 2",
           "screenItems": [
                {"xtype": "emailfield", "title": "screen2"," name": "textfield2"},
                {"xtype": "checkboxfield", "title": "label3", "name": "textfield13"},
                {"xtype": "selectfield", "title": "Submit", "name": "button11"}
           ]
      }
 ]

}

I need to update the value of this text field by using a webservice as seen in the json

{"xtype": "textfield", "title": "Temperature"," name": "textfield1", "value":"someservice211"}

As the values will be in real time, how am I supposed to do this?

Basically you asking how to update Temperature textfield value? — Viswa

Nico Grunfeld Nico Grunfeld · Accepted Answer · 2013-08-13T13:56:47

What about using a store for reading the json? you could setInterval to store.load() and then add/edit the dynamic items on the load callback:

proxy: {
    type: 'ajax',
    url: 'http://URL',
    reader: {
        type: 'json',
        rootProperty: 'screens'
    }
},

autoLoad: true,

listeners: {
    initialize: function() {
        var interval = setInterval(function() {
            Ext.StoreMgr.lookup('myStore').load();
        }, 2000);
    },

    load: function(st) {
        var testPanel = Ext.getCmp('mytestpanel');
        Ext.each(st, function(record) {
            var obj = Ext.getCmp(record.get('id'));
            if (obj) {
                if (record.get('value')) obj.setValue(record.get('value'));
            } else {
                testPanel.add({
                    xtype: record.get('xtype'),
                    id: record.get('id'),
                    label: record.get('label'),
                    name: record.get('name'),
                    value: record.get('value')
                });
            }
        }
    }
}

hope it helps-

Formfield value from Webservice in Sencha touch

1 Answers