How to store and recursively read ExtJS component like this?

Question

The layout below is what I want to implement in a webpage. I'd like to store it as a JSON-like file, my question is :

1. How should I store it, especially, those lines of function stuff?Strictly obeying JSON style, or anything else?
2. After stored successfully, how to set up my model?
3. How can I read it from Ext.data.store recursively, or by loop?

Any suggestions would be appreciated. Thanks.

{
            'xtype': 'tabpanel',
            'activeTab': 0,
            'width': 600,
            'height': 250,
            'plain': true,
            'defaults' :{
                'autoScroll': true,
                'bodyPadding': 10
            },
            'items': [{
                    'title': 'Normal Tab',
                    'html': "My content was added during construction."
                },{
                    'title': 'Ajax Tab 1',
                    'loader': {
                        'url': 'ajax1.htm',
                        'contentType': 'html',
                        'loadMask': true
                    },
                    'listeners': {
                        'activate': function(tab) {
                            tab.loader.load();
                        }
                    }
                },{
                    'title': 'Ajax Tab 2',
                    'loader': {
                        'url': 'ajax2.htm',
                        'contentType': 'html',
                        'autoLoad': true,
                        'params': 'foo=123&bar=abc'
                    }
                },{
                    'title': 'Event Tab',
                    'listeners': {
                        'activate': function(tab){
                            setTimeout(function() {
                                alert(tab.title + ' was activated.');
                            }, 1);
                        }
                    },
                    'html': "I am tab 4's content. I also have an event listener attached."
                },{
                    'title': 'Disabled Tab',
                    'disabled': true,
                    'html': "Can't see me cause I'm disabled"
                }
            ]

      }

Answer 1

You would have to store the functions as strings and parse them later, the same way Sencha Architect does.

This is a snippet created with Sencha Architect

"implHandler": [
    "setTimeout(function(){",
    "   alert(tab.title + ' was activated'); ",
    "},1);"
]

So you would have to store your code like this

{
    "xtype": "tabpanel",
    "activeTab": 0,
    "width": 600,
    "height": 250,
    "plain": true,
    "defaults" : {
        "autoScroll": true,
        "bodyPadding": 10
    },
    "items": [{
            "title": "Normal Tab",
            "html": "My content was added during construction."
        },{
            "title": "Ajax Tab 1",
            "loader": {
                "url": "ajax1.htm",
                "contentType": "html",
                "loadMask": true
            },
            "listeners": {
                "activate": "function(tab) {tab.loader.load();}"
            }
        },{
            "title": "Ajax Tab 2",
            "loader": {
                "url": "ajax2.htm",
                "contentType": "html",
                "autoLoad": true,
                "params": "foo=123&bar=abc"
            }
        },{
            "title": "Event Tab",
            "listeners": {
                "activate": "function(tab){setTimeout(function() {alert(tab.title + ' was activated.');}, 1);"
            }
        },{
            "html" : "I am tab 4's content. I also have an event listener attached."
        },{
            "title": "Disabled Tab",
            "disabled": true,
            "html": "Can't see me cause I'm disabled"
        }
    ]

}

After this you would need to create a model with each field and create a parser to render this as component later.

I don't know what you are trying to do, but it seems like a lot of work.