对齐面板中心的组件：EXT JS

我是新来的分机JS，我尝试将3个组件放在FormPanel中，但我不知道要在中心对齐它们。对齐面板中心的组件：EXT JS

这里是我的代码

var durationForm = new Ext.FormPanel({ 
     border  : false, 
     labelAlign : 'top', 
     frame  : true, 
     bodyStyle : 'padding-left:475px;', 
     items: [{ 
      items: [{ 
      rowWidth : .5, 
      layout  :'column', 
       items:[{ 
        columnWidth  : .13, 
        layout   : 'form', 
        items   : [getNewLabel('<br/><font size="3">Duration: </font>')] 
       },{ 
        columnWidth  : .20, 
        layout   : 'form', 
        items   : [fromDate()] 
       },{ 
        columnWidth  : .17, 
        layout   : 'form', 
        items   : [toDate()] 
       }] 
      }] 
     }] 
    }); 

    durationForm.render(Ext.getBody());

这说明这样的 enter image description here

输出，但我想组件在面板的中心对齐。任何人都知道如何做到这一点？

来源

2011-07-06 Ajan


{ 
//... 
    layout:'hbox', 
    layoutConfig: { 
    padding:'5', 
    pack:'center', 
    align:'middle' 
    }, 
    items:[{ 
     columnWidth  : .13, 
     layout   : 'form', 
     items   : [getNewLabel(...)] 
    },{ 
     columnWidth  : .20, 
     layout   : 'form', 
     items   : [fromDate()] 
    },{ 
     columnWidth  : .17, 
     layout   : 'form', 
     items   : [toDate()] 
    }] 
//... 
}

见this

来源

2011-07-06 21:58:11

感谢阿莫尔，它现在定位在中间。但是现在，“持续时间”，“发件人”和“收件人：”之间没有空格。他们三个并排放置。你知道如何在它们之间留出一点空间吗？ – Ajan

现在我明白了，谢谢。我没有看到“看到这个”。 – Ajan

不，我很抱歉。但是这似乎并没有解决我的问题。实际上，现在当我改变我的浏览器窗口大小时，它并没有出现在中间。这种布局不是自我调整的。你知道问题在哪里吗？ – Ajan

万一有人来一起寻找答案，像我一样，无法在这里找到它，使用的xtype：“分流”各项目之间像这样 -

items:[{ 
     xtype:'something' 
     }, 
     { 
     xtype:'splitter' 
     }, 
     { 
     xtype:'something-else' 
     } 
}]

来源

2012-10-19 14:53:37 Vivek

我以“表”布局解决了这个问题：

{ 
    layout : 'fit', // parent panel should have 'fit' layout 
    items : [ // and only one item 
     { 
      xtype : 'panel', 
      border : false, // optional 
      layout : { 
       type : 'table', 
       columns : 1, 
       tableAttrs : { 
        style : { 
         width : '100%', 
         height : '100%'         
        } 
       }, 
       tdAttrs : { 
        align : 'center', 
        valign : 'middle', 
       }, 
      }, 
      items : [ // a single container for nested components 
       { 
        xtype : 'panel', 
        layout : 'fit', 
        cellId : 'cell_id', // this one will be placed as id for TD 
        items : [ 
         {}, {}, {} // nested components 
        ] 
       } 
      ] 
     } 
    ] 
}

来源

2013-06-10 21:21:39 DMS

对齐面板中心的组件：EXT JS

回答

相关问题