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

Question

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

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

我的代码：

    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 文件中的项目怎么办？有可能吗？怎么样？

提前致谢！

Answer 1

我想出了如何为已指定布局的面板获取项目。我把我的代码放在这里。

我的代码是：

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
            }
    });
});

这是正确的做法吗？

提前谢谢你。

Answer 2

您可以轻松解析 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();
        }
    });

这当然会始终创建相同的面板，但我认为它可以帮助您入门。

希望对你有帮助:)