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>
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
