• 【原】基础篇:第十篇,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>

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

  • 相关阅读:
    Apicloud_(模板)登陆注册功能模板
    Apicloud_(接口验证)用户注册头部信息X-APICloud-AppKey生成
    Apicloud_(项目)网上书城02_后端数据获取
    Apicloud_(项目)网上书城01_前端搭建
    R_Studio(时序)Apriori算法寻找频繁项集的方法
    R_Studio(聚类)针对iris数据比较几种聚类方法优劣
    R_Studio(神经网络)BP神经网络算法预测销量的高低
    JavaWeb_(SSH论坛)_七、辅助模块
    JavaWeb_(SSH论坛)_六、点赞模块
    JavaWeb_(SSH论坛)_五、帖子模块
  • 原文地址:https://www.cnblogs.com/kelly/p/1496900.html
Copyright © 2020-2023  润新知