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

app.js

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

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

One thought on “Reading and Applying Dynamic Layout Configs in Ext JS / Sencha Touch

  1. David Marsland

    Excellent blog post, Steve. Dynamic configs are fun! I particularly appreciate the use of Ext.decode()instead of the evil eval().

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s