关于Extjs中FieldSet中的单元格合并的问题

问题描述

如上图所示。我现在的做法如下: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 />&nbsp; layout:'column',<br />&nbsp; defaults:{<br />&nbsp;&nbsp;&nbsp;&nbsp; layout:'form',<br />&nbsp;&nbsp;&nbsp;&nbsp; border:false,<br />&nbsp;&nbsp;&nbsp;&nbsp; columnWidth:.5<br />&nbsp;&nbsp; },<br />&nbsp;&nbsp; items:[{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; xtype:'panel',<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; items:[{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fieldLabel: '开始时间',<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name: 'ccc2',<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; anchor:'95%'<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }]<br />&nbsp;&nbsp;&nbsp; },{<br />&nbsp;&nbsp; xtype:'panel',<br />&nbsp;&nbsp; items:[{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fieldLabel: '结束时间',<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name: 'ccc2',<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; anchor:'95%'<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }]<br />&nbsp;&nbsp;&nbsp;&nbsp; }<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%' }] }]}

时间: 2024-07-30 09:50:14

关于Extjs中FieldSet中的单元格合并的问题的相关文章

ExtJS 4.2 Grid组件单元格合并的方法_extjs

ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri

Excel中常见的拆分单元格两种方法

  下图中的表头就是已经合并了四个单元格的一个大单元格,本教程需要讲述的就是如何将这个大的单元格拆分成原有的四个小单元格.下面请看小编图文详解Excel中常见的拆分单元格两种方法. 拆分单元格方法一 选中要拆分的大单元格,切换到"开始"选项卡,在"对齐方式"组中单击"合并后居中"按钮.这个按钮之前是选中状态,单击之后,就取消选中了,达到了拆分的效果. 拆分单元格方法二 1.选中要合并的单元格,单击鼠标右键,在弹出的快捷菜单中选择"设置单

Excel2013中怎么给特定区域单元格加密?

  Excel2013中怎么给特定区域单元格加密? 1.用Excel2013打开一篇工作表,选中我们需要加密的区域,切换到"审阅"选项卡,单击"允许用户编辑区域"按钮. Excel2013 2.此时会弹出一个"允许用户编辑区域"对话框,我们单击"新建"按钮. Excel2013 3.跳转到"新区域"对话框,我们在"区域密码"下面的文本框中输入密码,然后单击"确定"按钮

Word文档中表格的单个单元格边框怎么设置

  Word文档中表格的单个单元格边框怎么设置           1.在表格中选择需要设置边框的单元格,在"表格工具-设计"选项卡的"边框"组中单击"边框"按钮上的下三角按钮,在展开的列表中选择"边框和底纹"选项,如图1所示. 图1 选择"边框和底纹"选项 2.打开"边框和底纹"对话框,在预览栏中单击相应的按钮可以添加或取消边框线,如当按钮 处于按下状态时,表示单元格在该位置有边框线,

Excel工作表中快速跳转单元格的快捷键一览

  Excel工作表中快速跳转单元格的快捷键一览         在Excel工作表中,可以使用如下的快捷键快速跳转单元格: (1)按组合键Ctrl+Home:可以快速跳转到工作表的第1个单元格; (2)按组合键Ctrl+End:可以快速跳转到工作表的最后一个单元格; (3)按组合键Shift+Ctrl+Home:可以快速选中工作表中第1行的所有单元格内容; (4)按组合键Shift+Ctrl+End:可以快速选中工作表中最后一行的所有单元格内容.

填充Excel表中上方非空单元格数据的方法

填充Excel表中上方非空单元格数据的方法   1.选择范围 将需要填写的空单元格以及其上方单元格一起选中 2.定位空值 同时按住ctrl+G,跳出"定位"对话框,点击"定位条件" 在弹出的"定位条件"对话款,选中"空值',并确定,这样,空白单元格全被选中 3.输入公式 输入"="和第一个空单元格上方单元格的地址(A2),如下图,输入完成后,同时按住ctrl+enter,即可

在excel中不包含一些单元格数值的随机数方法介绍

  excel是办公尤其是处理数据的一个好帮手,他能给需要进行各类数据处理提供很强大的支持,这是我在工作中遇到的一个问题,是这样的,比如有两个单元格有固定值,而另外还有一个单元格需要取随机数,但又要求不要和那两个有固定值得单元格重复.如何取呢?随机函数?rand()和randbetween()都可以,但是一时间还真想不出满足要求的写法.于是我想用VBA编写也许更简单.于是就有了下文. 工具/原料 方法/步骤 这里为了方便验证,我们将随机数值尽量取小一点,如果你要大一些的随机数,可以修改程序. 设

Word2010中表格怎样拆分单元格

  我们可以根据需要将Word2010中表格的一个单元格拆分成两个或多个单元格,从而制作较为复杂的表格. 方法一 打开Word2010文档,右键单击需要拆分的单元格. 在打开的菜单中选择"拆分单元格"命令 打开"拆分单元格"对话框,分别设置需要拆分成的"列数"和"行数",单击"确定"按钮完成拆分. 方法二 打开Word2010文档,左键单击需要拆分的单元格. 单击"布局"选项卡. 单击&

table iew-ios tableView中,点击单元格,弹出对话框显示单元格的内容。

问题描述 ios tableView中,点击单元格,弹出对话框显示单元格的内容. 在ios tableView中,我想实现的功能是点击单元格,弹出对话框显示单元格的内容.但现在的问题是,我点击第一个单元格时,不弹出对话框,但点击第二个单元格时,弹出对话框,但是显示的内容是第一次点击的单元格的内容.是不是哪里设置有问题 ,求各位大神指教.单元格点击响应代码如下. -(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:

css-CSS问题 单元格中的图片超出单元格范围

问题描述 CSS问题 单元格中的图片超出单元格范围 如下图,在单元格中插入了一张图片,但是图片却超出了单元格的范围,求大神帮忙分析下原因. 解决方案 给图片增加width:100%,height:100%样式试试..如果你不控制图片的宽度和高度,会自动撑开表格的