ExtJS 4.2 - 如何将表格添加到面板？答案

【问题标题】：ExtJS 4.2 - How can I add a table to a panel?ExtJS 4.2 - 如何将表格添加到面板？
【发布时间】：2016-05-25 19:10:58
【问题描述】：
我正在尝试将其添加到面板中，但我不知道如何：
这是一个表格，容器是一个面板，我不知道如何在 ExtJS 4.2 中执行此操作，因为最近的是一个网格，但我不想要一个网格。
【问题讨论】：
您可以随时将 HTML 放入 html property。
我正在尝试，但空白单元格包含动态数据
您想要实现的目标和尝试过的目标应该是您问题的一部分。
你尝试layout:table了吗？
标签： javascript extjs extjs4.2
【解决方案1】：
最后我用表单面板解决了这个问题。代码如下：
var tabla=new Ext.form.Panel({
    bodyPadding: '0 0 0 0',
    margin:'0 5 0 5',
    bodyStyle: 'background-color:#f1f1f1;',
    border:0,
    items: [
            {
                xtype: 'container',
                anchor: '100%',
                layout: 'hbox',
                items:[
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      labelAlign: 'top',
                                      labelSeparator: '',
                                      fieldLabel: '--',
                                      labelStyle: 'text-align: center;color:#f1f1f1;background-color:#f1f1f1;',
                                      height:104,
                                      fieldStyle: 'text-align: center;',
                                      value:'NUEVO'
                                  }
                           ]
                       },
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      labelAlign: 'top',
                                      labelSeparator: '',
                                      fieldLabel: '--',
                                      labelStyle: 'text-align: center;color:#f1f1f1;background-color:#f1f1f1;',
                                      fieldStyle: 'text-align: center;',
                                      value:'GANADO',
                                      height:44
                                  },
                                  {
                                      xtype:'textfield',
                                      margin:'-5 0 0 0',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: center;',
                                      value:'PERDIDO',
                                      height:30
                                  },
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: center;',
                                      value:'PENDIENTE',
                                      height:30
                                  }
                           ]
                       },
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      anchor:'100%',
                                      labelAlign: 'top',
                                      labelSeparator: '',
                                      fieldLabel: 'VIGOR',
                                      labelStyle: 'text-align: center;background-color:#f1f1f1;',
                                      readOnly:true,
                                      fieldStyle: 'text-align: right;',
                                      height:44
                                  },
                                  {
                                      xtype:'textfield',
                                      margin:'-5 0 0 0',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  },
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'200%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  }
                           ]
                       },
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      anchor:'100%',
                                      labelAlign: 'top',
                                      labelSeparator: '',
                                      fieldLabel: 'VENCIDO',
                                      labelStyle: 'text-align: center;background-color:#f1f1f1;',
                                      readOnly:true,
                                      fieldStyle: 'text-align: right;',
                                      height:44
                                  },
                                  {
                                      xtype:'textfield',
                                      margin:'-5 0 0 0',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  }
                           ]
                       }
                 ]
            },
            {
                xtype: 'container',
                margin:'-5 0 0 0',
                anchor: '100%',
                layout: 'hbox',
                items:[
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      height:90,
                                      fieldStyle: 'text-align: center;',
                                      value:'MANTENIMIENTO'
                                  }
                           ]
                       },
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      value:'GANADO',
                                      fieldStyle: 'text-align: center;',
                                      height:30
                                  },
                                  {
                                      xtype:'textfield',
                                      margin:'-5 0 0 0',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: center;',
                                      value:'PERDIDO',
                                      height:30
                                  },
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: center;',
                                      value:'PENDIENTE',
                                      height:30
                                  }
                           ]
                       },
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  },
                                  {
                                      xtype:'textfield',
                                      margin:'-5 0 0 0',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  },
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'200%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  }
                           ]
                       },
                       {
                           xtype: 'container',
                           flex: 1,
                           layout: 'anchor',
                           items:[
                                  {
                                      xtype:'textfield',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  },
                                  {
                                      xtype:'textfield',
                                      margin:'-5 0 0 0',
                                      readOnly:true,
                                      anchor:'100%',
                                      fieldStyle: 'text-align: right;',
                                      height:30
                                  }
                           ]
                       }
                 ]
            }
    ]
});
这是结果的图像：
【讨论】：