Reading and Applying Dynamic Layout Configs in Ext JS / Sencha Touch

app.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Ext.application({   name : 'Demo',   launch : function() {     Ext.Ajax.request({      url : 'layout.json',      success : function(response) {        var text = response.responseText;        // process server response here        var myLayout = Ext.decode(text);          // apply the config        Ext.create("Ext.Container", {          renderTo: Ext.getBody(),          layout: 'hbox',          items: myLayout        })      }   });  } });

layout.json

1 2 3 4

[   {xtype: 'component', html: 'Hello World'},   {xtype: 'component', html: 'Hello World 2'} ]