-Simply recall fieldset:
Fieldset: groups forms. A form can have multiple fieldsets.
Legend: description of each group
Fieldset has borders by default, while legend is usually displayed in the upper left corner by default. However, in some cases, you may not want to make the default styles or la s of fieldset and legend affect the appearance of the design scheme.
Solution: Set the border of fieldset to 0 in CSS and the display of legend to none.
After knowing the basic usage of HTML tags, the same is true in ext.
First, we need to know that the default fieldset style is 'x-fieldset'
What we need to do is to define a new style for fieldset,
Let's take a look at the original ext style:. X-fieldset {border: 1px solid # b5b8c8; padding: 10px; margin-bottom: 10px; display: block ;}
Instead, we only need to set the border to 0px,
Then, when using the Ext. Form. fieldset component,
First, we define a new style. It is better to have the same name as the previous one. Then, the new style will overwrite the previous one.
The new style is defined as follows: Of course, you can define any conforming style. The following shows different styles in detail.
<Style type = "text/CSS">
. X-fieldset {border: 11px solid # b5b8c8; padding: 10px; margin-bottom: 10px; display: block ;}
</Style>
You only need. form. set the basecls attribute of the fieldset component to "X-fieldset" to remove the border. Of course, you can increase the Border width or set other styles you need.
Below are several pieces of the Ext. Form. fieldset component.
The source code will be posted below for your reference:
How to Make Ext. Form. fieldset have no borders? You must know it now!
<% @ 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> No title page </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/>
<Div>
<SCRIPT type = "text/JavaScript">
Function ready ()
{
VaR fieldset = new Ext. Form. fieldset
({
Title: "Test fieldset-set borders to different colors ",
Width: 400, width: 200,
Basecls: "X-fieldset ",
Maskdisabled: True,
Renderto: Document. Body
});
}
Ext. onready (ready );
</SCRIPT>
</Div>
</Form>
</Body>
</Html>
The above Code corresponds to the following example. Other style friends don't need it anymore.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
