Ext JS表单布局（七）

一、默认的平铺布局

        自上而下的布局方式。

二、平行分列布局

说明：先使用layout：’column‘来说明要使用的是列布局，然后再items指定的每列中使用columnWidth指定每列所占总宽度的百分比。如果使用分列布局，就不能在表单中使用defaultType指定默认的xtype了，否则会影响布局结果。每一列中也必须手动指定使用layout：’form‘，这样才能在每列中正常显示输入框和对应标签。layout：’form‘是FormPanel默认使用的布局方式，即自上而下依次排列。

》》》示例：

var   form  =  new  Ext.form.FormPanel（{

    labelAlign：‘right‘，

    labelWidth：60，

    title：’form‘，

    frame：true，

    width：650，

    url：’页面名.jsp‘，

    items：[{

            layout：’column‘，

            items：[{

                    columnWidth：.33，   

                    layout：’form‘，

                    items：[{xtype：’textfield‘，fieldLabel：’‘俩字}]

            }，{

                    columnWidth：.33，

                    layout：’form‘，

                    items：[{xtype：’textfield‘，fieldLabel：’三个字‘}]

            }，{

                    columnWidth：.33，

                    layout：’form‘，

                    items：[{xtype：’textfield‘，fieldLabel：’四个汉字‘}]

            }]

    }]，

    buttons：[{

            text：’按钮‘，

            handler：function（）{

                    form.getForm（）.submit（）；

            }

    }]

}）；

三、在布局中使用fieldset

说明：虽然EXT中的表单很漂亮了，依然可以用fieldset来进行内部分组。

》》》示例：

items：[{

        layout：’column‘，

        items：[{

                columnWidth：.5，

                layout：’form‘，

                xtype：’fieldset‘，

                title：’俩字‘，

                autoHeight：true，

                defaultType：’textfield‘，

                items：[

                        {fieldLabel：’俩字‘}，

                        {fieldLabel：’俩字‘}

                ]

        }，{

                columnWidth：.5，

                layout：’form‘，

                xtype：’fieldset‘，

                title：’三个字‘，

                autoHeight：true，

                style：’margin-left：20px‘，

                defaultType：’textfield‘，

                items：[

                        {fieldLabel：’三个字‘}，

                        {fieldLabel：’三个字‘}，

                        {fieldLabel：’三个字‘}

                ]

        }]

}，{

        xtype：’fieldset‘，

        title：’四个汉字‘，

        autoHeight：true，

        items：[{

                width：345，

                height：100，

                xtype：’textarea‘，

                fieldLabel：’四个汉字‘

        }]

}]，

四、在fieldset中使用布局

说明：直接在表单里使用分列布局很简单。

五、自定义布局

说明：向表单中添加不属于Ext.form.Field子类的控件，比如图片和文字之类的静态内容。因为Ext.form.FormPanel继承自Ext.Panel，所以可以使用layout和items提供各种内部布局形式。除了Ext.form.Field之类的输入控件外，还可以使用其他Panel来装饰表单。

》》》示例：

{

    columnWidth：.5，

    layout：’form‘，

    xtype：’fieldset‘，

    title：’三个字‘，

    autoHeight：true，

    style：’margin-left：20px‘，

    defaultType：’textfield‘，

    items：[

            {fieldLabel：’三个字‘}，

            {fieldLabel：’三个字’}，

            {fieldLabel：’三个字‘}，

            {xtype：’panel‘，html：’<center><img  src="图片名.png"/></center>‘}

    ]

}

转载于:https://my.oschina.net/tobeexpertismydream/blog/2990642