向具有布局手风琴的extjs面板添加动态项

在这里，我创建了简单的extjs代码，动态生成手风琴项目。我使用面板+布局手风琴

我在这里发帖是因为，它可能会在将来帮助别人。我为此经历了很多测试用例，甚至我在谷歌上搜索过，但我找不到我的东西，所以我阅读了ExtJSAPI，然后写了这个

我的代码：

    Ext.onReady(function() {
    var mtButton    =   Ext.create('Ext.button.Button',{
           text    : 'Add child',
           handler : function() {
            var numItems = myPanel.items.getCount() + 1;
            myPanel.add({
                     title       : 'Child number ' + numItems,
                     height      : 60,
                     frame       : true,
                     collapsible : true,
                     collapsed   : true,
                     html        : 'asdf'
                });
                myPanel.doLayout();
            }
        });   
    var addAccordion    =   function(panel){
                for (var i = 1; i <= 3; i++) {                    
                    console.log(i);

                    panel.add({
                         title       : 'Child number ' + i,
                         height      : 60,
                         frame       : true,
                         collapsible : true,
                         collapsed   : true,
                         html        : 'Demo for ' + i
                    });

                }
            };
    var myPanel = Ext.create('Ext.panel.Panel', {
            title: 'Accordion Layout',
            width: 300,
            height: 300,
            renderTo: Ext.getBody(),
            defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items      : [],
        tbar : [mtButton],
        listeners: {
            afterrender:addAccordion
        }
    });
});

我对extjs知之甚少。所以，我的问题是：这是正确的方法吗？还是有别的办法

如果我想要json文件中的项目呢？有可能吗？怎么做

---

提前谢谢

您可以轻松解析json字符串以创建组件。试着这样做：

 var jsonButton = Ext.create('Ext.button.Button', {

        text: 'Add child from Json',
        handler: function() {
            var jsonString = {"xtype":"panel", "title":"Json Panel","height":50, "width":30};//valid json
            myPanel.add({
                xtype: jsonString.xtype,
                title:jsonString.title,
                height: jsonString.height,
                width: jsonString.width,

            });
            myPanel.doLayout();
        }
    });

当然，这将始终创建相同的面板，但我认为它可以让您开始

---

希望有帮助：

您可以轻松解析json字符串以创建组件。试着这样做：

 var jsonButton = Ext.create('Ext.button.Button', {

        text: 'Add child from Json',
        handler: function() {
            var jsonString = {"xtype":"panel", "title":"Json Panel","height":50, "width":30};//valid json
            myPanel.add({
                xtype: jsonString.xtype,
                title:jsonString.title,
                height: jsonString.height,
                width: jsonString.width,

            });
            myPanel.doLayout();
        }
    });

当然，这将始终创建相同的面板，但我认为它可以让您开始

---

希望有帮助：

我找到了如何为指定了布局的面板获取项目的方法。我把代码放在这里

我的代码是：

Ext.onReady(function() {         
    Ext.define('UserInfo', {
        extend: 'Ext.data.Model',
        fields: ['firstname', 'lastname', 'seniority' ]
    });
    var preStore = Ext.create('Ext.data.Store', {
            storeId: 'addStore',
            model: 'UserInfo',
            autoLoad: 'true',
            proxy: {
                type: 'ajax',
                url: 'example.json',
                reader: {
                    type: 'json',
                    root: 'blah'
                }
            }
    });
    var addAccordion    =   
            function(panel){
                preStore.on('load', function () {
                    preStore.data.each(function(store) {        
                        console.log(store.data['firstname']);
                        var firstname   =   store.data['firstname'];
                        var lastname    =   store.data['lastname'];
                        var seniority   =   store.data['seniority'];
                        panel.add({
                                 title       : firstname+' '+lastname,
                                 html        : seniority,
                                 align       : 'right',    
                            });
                    });
                });
            };   
    var myPanel = Ext.create('Ext.panel.Panel', {


            renderTo: Ext.getBody(),
            defaults: {
            // applied to each contained panel
                bodyStyle: 'padding:50px',
                width:120,            
            },
            layout: {
                // layout-specific configs go here
                type: 'auto',

            },
            items      : [],
            //tbar : [mtButton],
            listeners: {
                afterrender:addAccordion
            }
    });
});

这样做对吗

---

提前谢谢。

我找到了如何为指定布局的面板获取项目的方法。我把代码放在这里

我的代码是：

Ext.onReady(function() {         
    Ext.define('UserInfo', {
        extend: 'Ext.data.Model',
        fields: ['firstname', 'lastname', 'seniority' ]
    });
    var preStore = Ext.create('Ext.data.Store', {
            storeId: 'addStore',
            model: 'UserInfo',
            autoLoad: 'true',
            proxy: {
                type: 'ajax',
                url: 'example.json',
                reader: {
                    type: 'json',
                    root: 'blah'
                }
            }
    });
    var addAccordion    =   
            function(panel){
                preStore.on('load', function () {
                    preStore.data.each(function(store) {        
                        console.log(store.data['firstname']);
                        var firstname   =   store.data['firstname'];
                        var lastname    =   store.data['lastname'];
                        var seniority   =   store.data['seniority'];
                        panel.add({
                                 title       : firstname+' '+lastname,
                                 html        : seniority,
                                 align       : 'right',    
                            });
                    });
                });
            };   
    var myPanel = Ext.create('Ext.panel.Panel', {


            renderTo: Ext.getBody(),
            defaults: {
            // applied to each contained panel
                bodyStyle: 'padding:50px',
                width:120,            
            },
            layout: {
                // layout-specific configs go here
                type: 'auto',

            },
            items      : [],
            //tbar : [mtButton],
            listeners: {
                afterrender:addAccordion
            }
    });
});

这样做对吗

---

提前谢谢。

是的，这将帮助我感谢您的代码。但我想将json文件中的项目添加到具有一些布局的面板中。e、 g布局：{//布局特定的配置转到此处类型：'auto'，}。无论如何，我找到了方法，我会添加我的代码。是的，它会帮助我感谢你的代码。但我想将json文件中的项目添加到具有一些布局的面板中。e、 g布局：{//布局特定的配置转到此处类型：'auto'，}。无论如何，我找到了方法，我将添加我的代码。