Question

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

我发布在这里是因为，它可能在将来帮助某人。我经历了这么多测试用例，甚至我在google上搜索但是我找不到我的东西所以我读了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

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

这当然会创建相同的面板，但我认为它可以让你开始。

希望有所帮助：）

Answer 2

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

我的代码是：

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

这是正确的方法吗？

提前谢谢。

将动态项添加到具有布局折叠的extjs面板

2 个答案: