ext实例:FormPanel布局例子,可以一行多列

最新推荐文章于 2018-05-21 11:16:16 发布

转载最新推荐文章于 2018-05-21 11:16:16 发布 · 6k 阅读

文章标签：

#ext #border #layout #电话

Javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用 ExtJS 框架的 FormPanel 布局示例，展示了如何通过 columnWidth 属性实现表单字段的一行多列布局。此示例包含多个文本框和组合框，并通过锚定百分比调整各字段宽度。

ext实例:FormPanel布局例子,可以一行多列

2008-12-06 14:48

columnWidth:05表示一行的50%
-------------------------------------------------------------------------------
new Ext.FormPanel({
                        labelAlign:'left',buttonAlign:'right',bodyStyle:'padding:5px;',
                        frame:true,labelWidth:65,monitorValid:true,
                        items:[
                            {layout:'column',border:false,labelSeparator:':',
                            defaults:{layout: 'form',border:false,columnWidth:.5},
                            items:[
                                {items: [{xtype:'textfield',fieldLabel: '学校法人',name: 'xming',anchor:'90%'}]},
                                {items: [{xtype:'textfield',fieldLabel: '法人代码',name: 'xming',anchor:'90%'}]},
                                {items: [{xtype:'textfield',fieldLabel: '学校地址',name: 'xming',anchor:'90%'}]},
                                {items: [{xtype:'textfield',fieldLabel: '联系电话',name: 'xming',anchor:'90%'}]},
                                {items: [{xtype:'textfield',fieldLabel: '占地面积',name: 'xming',anchor:'90%'}]},
                                {items: [{xtype:'textfield',fieldLabel: '建筑面积',name: 'xming',anchor:'90%'}]},
                                {items: [{xtype:'combo',fieldLabel: '单位类别',store:ds_sex,triggerAction: 'all',valueField:'id',displayField:'sex',mode: 'local',typeAhead: true,name: 'xbie',anchor:'90%'}]},
                                {items: [{xtype:'combo',fieldLabel: '学校等级',store:ds_sex,triggerAction: 'all',valueField:'id',displayField:'sex',mode: 'local',typeAhead: true,name: 'xbie',anchor:'90%'}]},
                                {columnWidth:1.05,items: [{xtype:'htmleditor',height:150,enableAlignments:false,enableLists:false,fieldLabel: '备注',name: 'xming',anchor:'90%',}]}
                                ]//items
                                }
                        ]//items
                    })//FormPanel