【问题标题】：add panel in viewport from the form(button) extjs3从表单（按钮）extjs3 在视口中添加面板
【发布时间】：2014-05-08 16:21:15
【问题描述】：

在表单中添加标签面板

我已经从菜单（viewport）添加了面板，但是如何使用按钮处理程序从表单添加面板存在问题。

【问题讨论】：

标签： extjs3

【解决方案1】：

请查看下面的代码 sn-p。它将panel 添加到名为'mainPanel' 的panel 中。请阅读 cmets 以获得更好的说明。

<script type="text/javascript">
   Ext.onReady(function () {
       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

       var viewport = new Ext.Viewport({
           layout: 'border',
           items: [{
                   region: 'west',
                   id: 'west-panel',
                   title: 'West',
                   split: true,
                   width: 200,
                   minSize: 175,
                   maxSize: 400,
                   collapsible: true,
                   margins: '0 0 0 5',
                   layout: 'accordion',
                   layoutConfig: {
                       animate: true
                   },
                   contentEl: 'divMenu'
               },
               new Ext.Panel({
                   region: 'center',
                   id: 'mainPanel',
                   layout: 'fit',
                   html: ''
               })
           ]
       });
   });

   function addItem() {
       var anagPanel = new Ext.Panel({
           layout: 'border',
           items: [{
               region: 'north',
               html: 'North',
               margins: '5 5 0 5',
               bodyStyle: 'padding:10px;',
               split: true,
               html: 'Some content'
           }, {
               plain: true,
               region: 'center',
               html: 'center'
           }]
       });
   }

   // the above code removes all existing panel and child items/containers
   // just remove the whole if block if you don't want to remove any existing child containers
   if(Ext.getCmp('mainPanel').items != undefined){
    Ext.getCmp('mainPanel').items.each(function(item){
           Ext.getCmp('mainPanel').remove(item, true);
       });
   }    

   // following code is adding an extra panel
    Ext.getCmp('mainPanel').add(anagPanel);
    Ext.getCmp('mainPanel').doLayout();     
   }
</script>
</head>
<body>
   <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
   <div id="testPanel" style="border:1px solid aqua;height:0px;display:none;">
      <table style="border:1px solid red;width:100%;">
         <tr>
            <td>ciccio</td>
         </tr>
      </table>
   </div>
   <div id="divMenu">
      <a onclick="javascript:addItem()" href="#">add item</a>
   </div>

【讨论】：