ExtJS 4.2-如何將表添加到面板？

Question

我正在嘗試將其添加到面板中，但我不知道如何：

這是一個表，而容器是一個面板，我不知道如何在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
                                  }
                           ]
                       }
                 ]
            }
    ]
});

這是結果的圖像：