【原】基础篇:第十篇,Ext组件系列之--fieldSet组件的基本用法将fieldSet上的边框去掉或者。。。...

最新推荐文章于 2022-04-19 16:20:19 发布

weixin_30755709

最新推荐文章于 2022-04-19 16:20:19 发布

阅读量365

点赞数

原文链接：http://www.cnblogs.com/kelly/archive/2009/06/05/1496900.html

版权

-先把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组件的时候，

我们先定义一个新的样式，最好和以前的同名，然后这个新的样式就会覆盖以前的样式

现在定义新的样式为：当然你可以定义任何符合规范的样式，下面的效果图向你详细展示了不同的样式

只要将Ext.form.FieldSet组件的baseCls属性设置为新的"x-fieldset", 就可以将边框去掉，当然你可以将边框的宽度增加，也可以设置其他你需要的样式。

下面张贴几张Ext.form.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>

上面的代码对应下面的示例图，其它样式朋友们不需要了吧

转载于:https://www.cnblogs.com/kelly/archive/2009/06/05/1496900.html

weixin_30755709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【原】基础篇:第十篇,Ext组件系列之--fieldSet组件的基本用法将fieldSet上的边框去掉或者。。。...

-先把fieldSet简单的回忆下： fieldset：对表单进行分组，一个表单可以有多个fieldset legend：说明每组的内容描述 fieldset默认是带边框的，而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。解决方法：在CSS中将fieldset的border设置为0，legend的dis...
复制链接

扫一扫