ExtJs Study Notes Ext. Panle Ext. TabPanel Ext. Viewport page 1/3

The following content can be learned through this article:
1. Create a simple Panel Ext. Panel
2. Create a Panel Ext. Panel that can be dragged
3. Use the tab panel
3. Use Ext. Viewport to build a simple layout (use a small example to summarize all the content in this article)
Panel is the foundation of ExtJs controls. Many controls are extended based on the panel, or they may be related to other controls.
A panel consists of a toolbar, a bottom toolbar, a panel header, a rear panel, and a main area. This class also provides functions such as panel expansion and closure. Some reusable tool buttons are provided for flexible control panel. The Panel can be placed in any other container, and the Panel itself is also a container, so the Panel can also contain other components. The Panel class is Ext. panel, and its xtype is Panel.
The following example shows the components of the Panel:
// Common panel
Function panel (){
Var panel = new Ext. Panel ({
RenderTo: 'panel ',
Title: 'panel head ',
Width: 400,
Height: 200,
Html: 'Tbar: [{text: 'top toolbar buttons '}],
Bbar: [{text: 'bottom toolbar '}],
Buttons :[
{
Text: 'button at the bottom of the Panel ',
Handler: function ()
{
Ext. Msg. alert ('hs', 'event of the button at the bottom of the panel! ');
}
}
]
});
}
The above code is not described in detail. Note that renderTo: 'panel '. This Code binds the panel to a div layer, and the panel is the ID of the div.
<Div id = "panel"> </div>
After the code is executed, the following results are displayed:

Good results! The Panel can have multiple Toolbar, which can be located at the top or bottom of the Panel. The Ext Toolbar is represented by the Ext. Toolbar class. The toolbar can store buttons, text, and other content. Some practical tool bar are also provided in the Panel. You can add tool bar options to the panel header through the tools Configuration Attribute. See the following example:
Function panel (){
Var panel = new Ext. Panel ({
Tools :[
{Id: "save "},
{Id: "help "},
{Id: "up "},
{
Id: "close ",
Handler: function (){
Ext. MessageBox. alert ("toolbar button", "toolbar close button event ")
}
}
],
RenderTo: 'panel ',
Title: 'panel head ',
Width: 400,
Height: 200,
Html: 'Tbar: [{text: 'top toolbar buttons '}],
Bbar: [{text: 'bottom toolbar '}],
Buttons :[
{
Text: 'button at the bottom of the Panel ',
Handler: function ()
{
Ext. Msg. alert ('hs', 'event of the button at the bottom of the panel! ');
}
}
]
});
}