转:Extjs2.0之横向Radio经典布局
我想大家最需要的就是这样的布局
但是找遍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();