zoukankan      html  css  js  c++  java
  • 【原】基础篇:第十篇,Ext组件系列之fieldSet组件的基本用法 将fieldSet上的边框去掉或者。。。

    -先把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组件的效果图片


     

    下面把源代码贴出来,供有兴趣的朋友参考:

    具体如何使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-将边框设置成不同的颜色",
                  400,height:200,             
                  baseCls:"x-fieldset",             
                  maskDisabled:true,
                  renderTo:document.body
             });
        }
        Ext.onReady(ready);
        </script>
        </div>
        </form>
    </body>
    </html>

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

  • 相关阅读:
    How to change hostname on SLE
    How to install starDIct on suse OS?
    python logging usage
    How to reset password for unknow root
    How to use wget ?
    How to only capute sub-matched character by grep
    How to inspect who is caller of func and who is the class of instance
    How to use groovy script on jenkins
    Vim ide for shell development
    linux高性能服务器编程 (二) --IP协议详解
  • 原文地址:https://www.cnblogs.com/kelly/p/1496900.html
Copyright © 2011-2022 走看看