当我想在窗口中放置表单时,我将采用哪种布局

时间:2013-07-08 10:34:44

标签: extjs extjs4 extjs4.2

我有多个表单,并希望使用一个Window类来查看它们。现在碰巧所有表单都有不同的大小,我不想管理所有表单所以我想到了'适合'布局以及窗口的最小/最大权限/高度。

但是如果我已经应用dockedItems布局混乱了layout failed的错误,那就太容易了。无论这个错误应该告诉我什么......但是我用Google搜索并发现我需要定义一个高度和一个宽度以使这个错误随着一个名为shrinkWrapDock的新特殊属性而消失布局取决于内容的大小。

再次问我的问题

当窗口具有最大/最小尺寸时,如果我想在窗口中自动调整窗体,我会采用哪种布局?

修改

它不一定是严格的形式,只是Ext.window.Window配置了'fit'布局,应该保持自己的最小/最大尺寸。所以窗口中的一个非常小的项目可能有未使用的空间,而非常大的项目获得滚动条。窗口的最小值/最大值之间的所有值都是精确的。 e.g。

// lets say we have a window configured like this
{
    xtype:'window',
    minHeight: 50,
    maxHeight: 500,
    layout: 'fit'
}
  1. 小表格 - >添加只有一个textfield的表单。

      

    窗口使用minHeight: 50,因为一个字段的高度只有~40像素

  2. 适合最小/最大 - >添加一个包含6 textfield s的表单。

      

    Windows缩放到~240px

    形式所需的大小
  3. 以身高形式 - >添加一个包含20 textfield s

    的表单
      

    窗口使用maxHeight: 500,因为20字段的高度为~800 px

1 个答案:

答案 0 :(得分:0)

使用窗口内的面板(其中包含fix max,min ht wdt)作为父容器,对其项目使用flex属性,即多个表单 例如:

{  的xtype:'面板&#39 ;,  的itemId:' somePanelId&#39 ;,  布局:' fit',  项目:[   {     xtype:' form',     flex:2,     项目[{..}]   },   {     xtype:' form',     flex:3,     项目[{..}]   } }

根据每个表单的大小,为每个表单尝试不同的flex组合。虽然给予flex考虑作为修正号码说' 5'这里的形式为2,大小为2/5,形式2为3/5(三分之三)。