Coolite (4): Container Control filedset, panel, and window

Source: Internet
Author: User
Tags autoload
I. fieldsetWidget
The fieldset control is still very frequently used during development. After all, Microsoft does not provide the group control on the Web. Usually, fieldset is used. Form And so on Interface Layout group. In Coolite Toolkit It provides such a control and attaches many other functional attributes and methods to it.
<Ext: fieldset id = "fieldset1" runat = "server" collapsible = "true" Height = "200px" Title = "fieldset group" width = "200px">
<Body>
<Table border = "0" cellpadding = "0" cellspacing = "0">
<Tr>
<TD> date: </TD>
<TD>
<Ext: datefield id = "datefield2" runat = "server"/>
</TD>
</Tr>
</Table>
</Body>
</Ext: fieldset>

The most basic attributes such as title, height, and width can be left empty. The collapsible attribute is used to set fieldset to foldable. Status . Above Code The effect of the fragment on the remote line is as follows:

II,PanelWidget
We have analyzed the fieldset control, which can be used to group the interface layout and make it a more advanced application operation through relevant attribute settings. Fieldset has the same features for panel. The panel control is also provided in ASP. NET, so what are the characteristics of the Panel provided by coolite toolit compared to the Panel in ASP. NET? Haha, there are many features. Please continue to look at the following ......
In my personal understanding, panel controls are a container control. Without using an HTML Tag, I can set its runat = "server" to achieve the same effect. Coolite toolkit provides the same panel, but it extends some common functions based on the panel of ASP. NET, including Dynamic Set the value, and embed other web functions.
<% -- <Ext: Panel id = "panel2" runat = "server" Height = "300" Title = "title"> -- %>
<Ext: Panel id = "Panel1" runat = "server" Height = "300" Title = "title"
Collapsible = "true" width = "300">
<Body>
</Body>
</Ext: Panel>

Like the fieldset control, public attribute settings are provided to determine whether to collapse. The preceding HTML code snippet can be placed in the <body> tag and we need to render the elements on the interface. In addition, it also provides an attribute (HTML ), you can also set this attribute.DisplayThe content is as follows:
<Ext: Panel id = "panel2" runat = "server" Height = "100" Title = "title"
Collapsible = "true" width = "300" html = "<H5> set the displayed content through HTML properties </H5>">
</Ext: Panel>

when using this control, you must note that although the label and HTML attributes can both set the content displayed by the control, there are certain constraints, tags and HTML attributes cannot be used at the same time.
set the content to be presented through attributes, the control also provides properties to set the data (for example, a page , similar to IFRAME ).




<Ext: Panel id = "panel3" runat = "server" Height = "125px" Title = "automatically loaded content"
Width = "400px" collapsible = "true">
<Body>
</Body>
<Autoload url = "http://beniao.cnblogs.com"> </autoload>
</Ext: Panel>

In addition to the above implementation method, you can also use the public method loadcontent () to dynamically load and present a page.
Protected void page_load (Object sender, eventargs E)
{
This. panel3.loadcontent ("http://beniao.cnblogs.com", true );
}

As mentioned aboveIFRAMEThe usage of this item in our usual development is also very high, and the coolite toolkit will certainly not forget its existence. It also provides IFRAME support for the panel control, and the panel control loads an externalWebPages can also be displayed in IFRAME format.
Protected void page_load (Object sender, eventargs E)
{
This. panel3.autoload. url = http://beniao.cnblogs.com /;
This. panel3.autoload. mode = loadmode. IFRAME;
This. panel3.autoload. nocache = true;
}

You can also set loading in the loadcontent () method.Mode:
This. panel3.loadcontent (New loadconfig ("http://beniao.cnblogs.com", loadmode. IFRAME, true ));

In addition to the above features, the coolite Toolkit's panel folding and expansion feature also has its own unique features. Through listeners, you can set it to load the specified web page during expansion, clear the content when folding.
<Ext: panel id = "panel4" runat = "server" Title = "load when expanding | clear" width = "300" Height = "100" collapsible = "true">
<Autoload url = "http://www.cnblogs.com" mode = "iframe" nocache = "true" showmask = "true" maskmsg = "loading"/>
<Listeners>
<Expand handler = "This. Reload ();"/>
<Collapse handler = "This. clearcontent ();"/>
</Listeners>
</Ext: Panel>

3. Window Control
Form (window) control. Most of the time, this control is used for pop-up window effects. Simply put, I click the button or other event-drivenComponentsImmediately, a window pops up for me. The window control can be said to be dedicated to solving this technical requirement.
<Ext: Window id = "window1" runat = "server" collapsible = "true" icon = "application"
Title = "title">
<Body> </body>
</Ext: WINDOW>

Drag a window control directly from the toolbox to the interface. By default, the window control is foldable and can be closed and displayed as the page is loaded. You can set the showonload = "false | true" attribute to enable display during page loading.
You can call the client API or the Server API when you need to display it.
<Ext: Window id = "window1" runat = "server" collapsible = "true" icon = "application"
Title = "title" showonload = "false">
<Body> </body>
<Listeners>
<Hide handler = "This. clearcontent ();"/>
</Listeners>
</Ext: WINDOW>
<Ext: Button Id = "btnshowwindow" runat = "server" text = "display window">
<Listeners>
<% -- <Click handler = "# {window1}. Show ();"
/> -- %>
</Listeners>
<Ajaxevents>
<Click onevent = "show_window"> </click>
</Ajaxevents>
</Ext: button>
<SCRIPT type = "text/C #" runat = "server">
Protected void show_window (Object sneder, ajaxeventargs E)
{
This. window1.show ();
}
</SCRIPT>

The window control is also a container control, but it is more flexible and powerful than other controls, such as show and hide) draggable and modal.
<Ext: Window id = "window1" runat = "server" collapsible = "true" icon = "application" width = "300"
Draggable = "false" Modal = "true" Title = "Touch state | do not drag the application example" showonload = "false">
<Body>
Touch mode | application example that cannot be dragged <br/>
Do not drag: draggable = "false" <br/>
Touch mode: modal = "true" <br/>
</Body>
<Listeners>
<Hide handler = "This. clearcontent ();"/>
</Listeners>
</Ext: WINDOW>
<Ext: button id = "btnshowwindow" runat = "server" text = "display window">
<Listeners>
<% -- <Click handler = "# {window1}. Show ();"
/> -- %>
</Listeners>
<Ajaxevents>
<Click onevent = "show_window"> </click>
</Ajaxevents>
</Ext: button>
<SCRIPT type = "text/C #" runat = "server">
Protected void show_window (Object sneder, ajaxeventargs E)
{
This. window1.show ();
// This. window1.hide ();
}
</SCRIPT>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.