如何像这样存储和递归读取 ExtJS 组件

Question

下面的布局是我想在网页中实现的。我想将其存储为类似 JSON 的文件，我的问题是：

1. 我应该如何存储它，尤其是那些功能行的东西？严格遵守 JSON 风格，还是其他什么？
2. 存储成功后，如何设置我的模型？
3. 如何以递归方式或循环从 Ext.data.store 读取它？

任何建议将不胜感激。谢谢。

{
            '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

您必须将函数存储为字符串并在以后解析它们，就像 Sencha Architect 所做的那样。

这是使用Sencha Architect创建的片段

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

所以你必须像这样存储你的代码

{
    "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"
        }
    ]
}

在此之后，您需要为每个字段创建一个模型，并创建一个解析器以稍后将其呈现为组件。

我不知道你想做什么，但这似乎有很多工作。