转：Extjs2.0之横向Radio经典布局

最新推荐文章于 2020-05-06 11:03:29 发布

weixin_34033624

最新推荐文章于 2020-05-06 11:03:29 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/samsonhuang/articles/2765350.html

本文介绍如何在ExtJS中实现Radio Button的横向布局。通过使用table布局并设置isFormField为true，可以成功实现这一布局效果，解决了常见的布局难题。

我想大家最需要的就是这样的布局

但是找遍google，要么是太复杂在render里添加后续radio，要么是采用FieldSet方式额外加了一大框。但是我想像中需要的却是上面这种方式。

经过测试，上面这样的radio横向布局是可以做到的，关键是采用table的layout及radio行的isFormField设置为true，设置isFormField这点尤其重要，因为panel默认不是属于FormField的，因此即使设置了fieldLabel属性也不不会显示label。

生成此window的js如下：

 1 (new Ext.Window({
 2     id: 'hall_addPrjWindow',
 3     title: 'title',
 4     layout:'fit',
 5     width: 500,
 6     height: 300,
 7     buttonAlign: 'center',
 8     closeAction: 'hide',
 9     modal: true,
10     items:[{
11         xtype: 'form',
12         width: 400,
13         frame: true,
14         defaultType: 'textfield',
15         items:[{
16             id: 'prjNm',
17             fieldLabel: '项目名称',
18             name: 'prjNm',
19             value: ''
20         },{
21             xtype: 'panel',
22             layout: 'table',
23             fieldLabel: '项目权限',
24             defaultType: 'radio',
25             isFormField: true,
26             items: [{
27                 name: 'prjPermissionCode',
28                 boxLabel: '自由进入',
29                 value: ''
30             },{
31                 name: 'prjPermissionCode',
32                 boxLabel: '需要验证',
33                 value: ''
34             }]
35         },{
36             id: 'prjStartupDate',
37             fieldLabel: '预计启动日期',
38             name: 'prjStartupDate',
39             value: ''
40         }]
41     }],
42     buttons:[{
43         text: '建立新项目',
44         handler: function(){
45             
46         }
47     }]
48 })).show();