先把fieldSet简单的回忆下:
fieldset:对表单进行分组,一个表单可以有多个fieldset
legend:说明每组的内容描述
fieldset默认是带边框的,而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。
解决方法:在CSS中将fieldset的border设置为0,legend的display设置为none即可。
同样的道理,知道了html标签的基本用法后,在Ext里也是一样的
首先,我们要知道FieldSet默认的样式是'x-fieldset'
其次,我们需要做的就是给FieldSet定义一个新的样式,
我们看看Ext原始的样式是什么:.x-fieldset{border:1px solid #B5B8C8;padding:10px;margin-bottom:10px;display:block;}
而我们只要将其中的border设置为0px ,
然后在使用Ext.form.FieldSet组件的时候,
我们先定义一个新的样式,最好和以前的同名,然后这个新的样式就会覆盖以前的样式
现在定义新的样式为:当然你可以定义任何符合规范的样式,下面的效果图向你详细展示了不同的样式
<style type="text/css">
.x-fieldset{border:11px solid #B5B8C8;padding:10px;margin-bottom:10px;display:block;}
</style>
只要将Ext.form.FieldSet组件的baseCls属性设置为新的"x-fieldset", 就可以将边框去掉,当然你可以将边框的宽度增加,也可以设置其他你需要的样式。
下面张贴几张Ext.form.FieldSet组件的效果图片
上面的代码对应下面的示例图,其它样式 朋友们不需要了吧
下面把源代码贴出来,供有兴趣的朋友参考:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FieldSet.aspx.cs" Inherits="WebExt.Sample4.FieldSet" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="../ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ExtJS/ext-all.js"></script>
<script type="text/javascript" src="../ExtJS/ext-lang-zh_CN.js"></script>
<style type="text/css">
.x-fieldset{border:12px solid #B5B8C8;padding:10px;margin-bottom:10px;display:block;border-bottom-color:Red; border-left-color:Green; border-right-color:Blue; border-top-color:Purple; text-decoration:underline;}
</style>
</head>
<body style="text-align:center;">
<form id="form1" runat="server">
<br /><br /><br /><br />
<div>
<script type="text/javascript">
function ready()
{
var fieldSet = new Ext.form.FieldSet
({
title:"测试fieldSet-将边框设置成不同的颜色",
width:400,height:200,
baseCls:"x-fieldset",
maskDisabled:true,
renderTo:document.body
});
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>
分享到:
相关推荐
用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...
Flex3自定义组件类似于Fieldset
MyJsp(html的fieldset使用 MyJsp(html的fieldset使用MyJsp(html的fieldset使用MyJsp(html的fieldset使用
Extjs fieldset两行两列布局
<fieldset id="annex1" style="width:800px"> <legend>SubTable 1 SubTable List Field1 Field2 Field3 ...
jquery fieldset和legend标签代码是一款基于jQuery实现的简单的样式代码。
cmxform-fieldset
HTML中fieldset如何把界面上需要在一块的内容放到一个容器,即分组
之前HTML没有好好学,导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读,感兴趣的朋友可以了解下,或许对你有所帮助
最好使用<Fieldset>组件,该组件将: 模拟数据树并处理字段命名 提供上下文给子组件(Field,ErrorMessage,Custom Components等) 使代码更容易 不会附加到特定的表单库,并且可以与其他库一起使用 确保您需要它...
可收放的HTML fieldset。 模仿MSDN的可收放Fieldset 。
fieldset标签定义说明.docx
JavaScript方法代码: 代码如下:// 设置FieldSet高度方法,支持IE浏览器、Firefox // 参数1:pTableID,FieldSet内部div或table的id // 参数2:pFieldSetID,FieldSet的ID // 参数3:pImageID,图片的ID,展开或收缩...
...
...
js控制fieldset高度的代码
FieldSetView FieldSetView是一个Android自定义视图,它模仿HTML中...用法 就像其他ViewGroup一样,将FieldSetView添加到布局中: (注意: FieldSetView扩展了FrameLayout ) < libs .mjn.fieldset.FieldSetView
第14周-16章节-Python3.5-html的body内标签之fieldset标签和label标签.avi
简单方法:ul左侧边距设定及div中每行实现虚线 复制代码代码如下: body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0; padding:0;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-...