ExtJS 4.2 - 如何将 table 添加到面板？

Question

我正在尝试将其添加到面板，但我不知道如何：

这是一个table，容器是一个面板，我不知道如何在 ExtJS 4.2 中做到这一点，因为最近的东西是一个网格，但我不想要一个网格.

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

这是结果的图像：

ExtJS 4.2 - 如何将 table 添加到面板？

ExtJS 4.2 - How can I add a table to a panel?

javascript

extjs

extjs4.2