如何在面板中添加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

這是我的實施例I如何動態元素添加到我的面板：

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