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 give a tip that a teacher in the online *** video of a website has recorded a video about extjs introduction, 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: *** online video
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.

// Html code
<Div id = "win" class = "X-hidden">
</Div>

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

Parameter Introduction:
This is because the Panel component has been introduced earlier. The following describes only a few other special configuration parameters of the window component. // Several window configuration parameters that are 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 little cross 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, and false indicates that the subject has a small 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 starting from 0)
Border: false,
Items: [{Title: "tab1", HTML: "tab1 in Windows" },{ title: "tab2", HTML: "tab2 in Windows"}] // tab in tabpanel, which will be further discussed later
}),
Plain: True, // true indicates that the subject background is transparent, and false indicates that the subject has a small 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 see // bbar: [{text: "OK"}, {text: "cancel", Handler: function () {W. close () ;}], // bottom
Buttons: [{text: "OK" },{ text: "canceled", Handler: function () {W. Close () ;}}], // footer
Buttonalign: "center", // The Position of the footer button, which is in the middle
// 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 article!

 

This article from http://www.cnblogs.com/qianxudetianxia