问题描述
如上图所示。我现在的做法如下:var fieldSet2 = new Ext.form.FieldSet({ title:'基本信息', //width:400, height:260, columnWidth: 1, layout: 'column', border: true, anchor:'100%', labelWidth: 60, buttonAlign: 'center', items:[{ columnWidth:.33, layout: 'form', border:false, xtype:'fieldset', autoHeight:true, defaultType:'textfield', items: [ { xtype:'panel', html:'<center>基本信息</center>' } ] },{ columnWidth:.67, layout: 'form', border:false, xtype:'fieldset', autoHeight:true, defaultType:'textfield', items: [ { fieldLabel: '简介', name: 'ccc', anchor:'95%', xtype:'textarea' },{ fieldLabel: '开始时间', name: 'ccc2', anchor:'95%' },{ fieldLabel: '结束时间', name: 'ccc2', anchor:'95%' },{ fieldLabel: '分工界面', name: 'ccc2', anchor:'95%' },{ fieldLabel: '关键要求', name: 'ccc2', anchor:'95%' },{ fieldLabel: '前端点位', name: 'ccc2', anchor:'95%' },{ fieldLabel: '中心点位', name: 'ccc2', anchor:'95%' },{ fieldLabel: '其它信息', name: 'ccc2', anchor:'95%' } ] }] }); 上面代码所展示的图形如下: 问题:1.如果能在我代码基础上实现,请指出需要修改添加的代码块2.如果用其它方式实现,请给出代码块由于对Extjs刚起步,需要解答详细些。 问题补充:<div class="quote_title">lizhi92574 写道</div><div class="quote_div">首先你要对布局了解。<br />在开始时间和结束时间加个column布局<br /><br />{<br /> layout:'column',<br /> defaults:{<br /> layout:'form',<br /> border:false,<br /> columnWidth:.5<br /> },<br /> items:[{<br /> xtype:'panel',<br /> items:[{<br /> fieldLabel: '开始时间',<br /> name: 'ccc2',<br /> anchor:'95%'<br /> }]<br /> },{<br /> xtype:'panel',<br /> items:[{<br /> fieldLabel: '结束时间',<br /> name: 'ccc2',<br /> anchor:'95%'<br /> }]<br /> }<br />]}</div><br />谢谢你的及时回复,<strong>但是有如下问题:</strong><br />一.按照你的提示,我操作了一下,但是“开始时间”、“结束时间”都没有展示出来<br />如下图:<br /><br /><img src="http://dl.iteye.com/upload/attachment/313755/3d139cd6-08f7-36c9-b9cf-762f10535312.jpg" /><br /><br />二.我问题中的“基本信息”它对于右边是行的合并,这块内容仍然需要帮忙指点解答<br /><br /><strong>敬请回复,谢谢!</strong>
解决方案
var fieldSet2 = new Ext.form.FieldSet({title : '基本信息',// width:400,height : 260,columnWidth : 1,layout : 'border',border : true,anchor : '100%',labelWidth : 60,buttonAlign : 'center',items : [{region : 'west',width : 200,anchor : '100% 100%',xtype : 'fieldset',layout : 'fit',defaultType : 'textfield',items : [{xtype : 'panel',html : '<table width="100%" height="100%" style="text-align:center"><tr><td>基本信息</td></tr></table>'}]}, {layout : 'form',region : 'center',border : false,xtype : 'fieldset',autoHeight : true,defaultType : 'textfield',items : [{fieldLabel : '简介',name : 'ccc',anchor : '95%',xtype : 'textarea'}, {layout : 'column',xtype : 'panel',defaults : {layout : 'form',border : false,defaultType : 'textfield',columnWidth : .5},items : [{xtype : 'panel',items : [{fieldLabel : '开始时间',name : 'ccc2',anchor : '95%'}]}, {xtype : 'panel',items : [{fieldLabel : '结束时间',name : 'ccc2',anchor : '95%'}]}]}, {fieldLabel : '分工界面',name : 'ccc2',anchor : '95%'}, {fieldLabel : '关键要求',name : 'ccc2',anchor : '95%'}, {fieldLabel : '前端点位',name : 'ccc2',anchor : '95%'}, {fieldLabel : '中心点位',name : 'ccc2',anchor : '95%'}, {fieldLabel : '其它信息',name : 'ccc2',anchor : '95%'}]}]});
解决方案二:
你这个不是合并,而是分为2列。之前给的代码少了几个属性{layout : 'column',xtype : 'panel',defaults : {layout : 'form',border : false,defaultType : 'textfield',columnWidth : .5},items : [{xtype : 'panel',items : [{fieldLabel : '开始时间',name : 'ccc2',anchor : '95%'}]}, {xtype : 'panel',items : [{fieldLabel : '结束时间',name : 'ccc2',anchor : '95%'}]}]}
解决方案三:
首先你要对布局了解。在开始时间和结束时间加个column布局{ layout:'column', defaults:{ layout:'form', border:false, columnWidth:.5 }, items:[{ xtype:'panel', items:[{ fieldLabel: '开始时间', name: 'ccc2', anchor:'95%' }] },{ xtype:'panel', items:[{ fieldLabel: '结束时间', name: 'ccc2', anchor:'95%' }] }]}