Extjs2.0 Learning Series (3)-Ext. Window

Source: Internet
Author: User

For extjs, in order to take care of beginners who are not yet getting started, I would like to remind you that a video of extjs's getting started was recorded by a teacher on the langxi video online website, the environment may be different, but the principle and usage are the same. It is definitely worth seeing (if you want to get started). I hope there is no advertisement.
Main Site: langxi video online
Extjs introduction and application example: extjs video tutorial 1st extjs introduction and application example
I don't know if I want to register. If I feel good, it's worth it!

We have introduced the Panel component -- extjs2.0 Learning Series (2) -- Ext. Panel. Today we will introduce the window component, which inherits from the Panel.
First, we will introduce the simplest example.

// HtmlCode
< Div ID = " Win " Class = " X-hidden " >
< / Div>

 

// JS Code
VaR W = New Ext. Window ({
Contentel: " Win " , // The HTML element displayed by the subject can also be written as El: "win"
Width: 300 ,
Height: 200 ,
Title: " Title "  
});
W. Show ();


Parameter Introduction:
This is because we have already introduced the Panel component. Next we will only introduce several other special configuration parameters of the window component.

// Several window configuration parameters not described earlier
1 . Closeaction: The enumerated value is close (default). When you click Close, close the window.
Hide, closed, only the hidden window
2 . Closable: true: the close button of the sub-Forks is displayed in the upper right corner. The default value is true.
3 . Constrain: true: This window is forced to be controlled in viewport. The default value is false.
4 . Modal: True indicates the mode window, and the subsequent content cannot be operated. The default value is false.
5 . Plain: // True indicates that the subject background is transparent. False indicates that the subject has a slightly different background color. The default value is false.

 

// The show () method needs to be displayed. The default window can be dragged, closed, and can be dragged.
W. Show ()


Instance introduction:
1. nested window of tabpanel

VaR W = New Ext. Window ({
Contentel: " Win " ,
Width: 300 ,
Height: 200 ,
Items: New Ext. tabpanel ({
Activetab: 0 , // The current tag is 1st tabs (index starts from 0)
Border: False ,
Items: [{Title: " Tab1 " , HTML: " Tab1 in Windows " },{ Title: " Tab2 " , HTML: " Tab2 in Windows " }] // The tab in tabpanel, which will be further discussed later
}),
Plain: True , // True indicates that the subject background is transparent. False indicates that the subject has a slightly different background color. The default value is false.
Title: " Title "
});
W. Show ();


We nested the tabpanel component in the main body of the window through items.
Let's look at the Add Toolbar

// Bbar: [{text: "OK" },{ text: "canceled", Handler: function () {W. Close () ;}}], // bottom
Buttons: [{text: " OK " }, {Text: " Cancel " , Handler: Function () {W. Close () ;}}], // Footer
Buttonalign: " Center " , // The position where the footer button is arranged.
// Collapsible: True, // button in the upper right corner


The same is true for other tool bar methods.
For the complex nested layout in the window, let's give an example after we have finished the extjs layout.
Today's content is relatively small, Please Master PP, let's look forward to the next articleArticle!

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.