extjs - 如何在面板中添加 ext 元素

Question

如何将元素动态添加到面板中？

下面是创建面板的代码：

Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.get('group-list'),
        width: 520,
        height: 400,
        style: {
            marginLeft: 'auto',
            marginRight: 'auto'
        },
        title: 'Member List',
    });
});

当我尝试

mainPanel.add(groupname);
mainPanel.doLayout();

它不起作用，有什么问题吗？顺便说一句，如何在 couchdb 中加载数据并在面板中显示它们？

以下是所有代码：

function creategroup(){
    var groupname = Ext.get('name').getValue();
    var box = Ext.MessageBox.wait('Group Creation in progress, please wait', 'Please wait');

    Ext.Ajax.request({
        url : 'Controller',
        params : {
            'task' : 'groupcreate',
            'action' : 'groupcreate',
            'groupname' : groupname
        },
        success : function(response, opts) {
            box.hide();
            var obj = Ext.decode(response.responseText);
            if (obj.status = 'Success'){
                Ext.Msg.alert(obj.status, obj.message, function(btn, text){
                    if (btn == 'ok'){
//                      refreshPage();
                        mainPanel.add(groupname);
                        mainPanel.doLayout();
                    }
                });
            }
            else{
                Ext.Msg.alert(obj.status, obj.message, function(btn, text){

                });
            }
        },
        failure : function(response, opts) {
            box.hide();
            Ext.Msg.alert('Error', 'server-side failure with status code'
                    + response.status);
        }
    });
}

Answer 1

这是我如何将动态元素添加到面板的示例：

        panel.add(new Object({
            xtype: 'ReportsItem',
            name: record.name,
            uid: record.uid,
            params: record.param,
            tip: record.tooltip,
            listeners: {
                render: function (c) {
                    Ext.create('Ext.tip.ToolTip', {
                        target: c.getEl(),
                        html: c.tip
                    });
                }
            }
        }));

在我的示例 ReportsItem 是我的组件（容器）：

Ext.define('TooAuto.view.report.ReportsItem', {
    extend: 'Ext.container.Container',
    alias: 'widget.report.ReportsItem',
    height: 125,
    margin: 5,
    width: 75,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',

                    height: 125,
                    margin: 5,
                    width: 73,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    items: [
                        {
                            xtype: 'container',
                            height: 64,
                            style: 'text-align: center;',
                            layout: {
                                type: 'fit'
                            },
                            items: [
                                {
                                    xtype: 'image',
                                    src: 'extjs/resources/icons/reportpage.png'
                                }
                            ]
                        },
                        {
                            xtype: 'label',
                            flex: 0,
                            height: 64,
                            style: 'text-align: center;',
                            width: 161,
                            text: 'xxxxx'
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }
});