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

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!