Ext. panle Ext. tabpanel Ext. viewport page 2/3

 
There is no difference from a common panel, but there is only one more tool Configuration Attribute. You can set the toolbar option type through ID. If you need to add an event to the toolbar option, you can directly configure the handler attribute. Below I have posted some ID enumeration values for you:
Toggle (default value when collapsable is true)
Close
Minimize
Maximize
Restore
Gear
Pin
Unpin
Right
Left
Up
Down
Refresh
Minus
Plus
Help
Search
Save
Print
I have not tested all the above items. If you are interested, just give it a try.
If we want to drag this panel, we need to add three configuration attributes to change one configuration.
X: 88,
Y: 88,
Renderto: Ext. getbody (), // X, Y, renderto: Ext. getbody () initialize the position of the Panel
Draggable :{
Insertproxy: false, // when dragging, the original position is displayed without dotted lines.
Ondrag: function (e ){
VaR Pel = This. Proxy. getel ();
This. x = pel. getleft (true );
This. Y = pel. gettop (true); // obtain the Panel coordinate when dragging
VaR S = This. Panel. getel (). Shadow;
},
Enddrag: function (e ){
This. Panel. setposition (this. X, this. Y); // move to the final position
}
}
X and Y are set at the display position on the screen. renderto does not need to specify the div id. You can directly use Ext. getbody () to load the panel.
Draggable is the setting when dragging, ondrag is the event triggered when dragging, and enddrag is the ending drag event.
Effect:

In this way, you can drag it, but you will find that there is a black box when you drag it, which may be somewhat bad. If we need to change the black box with the moving position. Then we need to add the following code in the ondrag event function:
If (s ){
S. Realign (this. X, this. Y, Pel. getwidth (), Pel. getheight ());
}
Let's take a look at all the code of the drag example:
// Panel that can be dragged
Function paneldrag (){
VaR Panel = new Ext. Panel ({
Title: 'drag it to see if I can't .',
X: 88,
Y: 88,
Renderto: Ext. getbody (), // X, Y, renderto: Ext. getbody () initialize the position of the Panel
Floating: True, // true
Frame: True, // rounded border
Width: 400,
Height: 200,
Draggable :{
Insertproxy: false, // when dragging, the original position is displayed without dotted lines.
Ondrag: function (e ){
VaR Pel = This. Proxy. getel ();
This. x = pel. getleft (true );
This. Y = pel. gettop (true); // obtain the Panel coordinate when dragging
VaR S = This. Panel. getel (). Shadow;
If (s ){
S. Realign (this. X, this. Y, Pel. getwidth (), Pel. getheight ());
}
},
Enddrag: function (e ){
This. Panel. setposition (this. X, this. Y); // move to the final position
}
}
})
}
Ext. Panel has several sub-classes, so we will introduce the common configuration attributes and methods in panel. The following content is in the document:
1. autoload: a valid URL string that loads and displays the data in the body of the URL. However, there may be no style or JS control, but only HTML data.
2. autoscroll: if it is set to true, a scroll bar is generated when the content overflows. The default value is false.
3. autoshow: Set to true to display the elements set to "X-hidden". It is necessary that the default value is false.
4. bbar: Bottom Bar, displayed in the subject, // code: bbar: [{text: 'bottom toolbar bottomtoolbar'}],
5. tbar: top bar, displayed in the subject, // code: tbar: [{text: 'top toolbar toptoolbar'}],
6. Buttons: button set, automatically added to footer (footer parameter, displayed outside the main body) // code: buttons: [{text: "The button is located in footer"}]
7. buttonalign: Specifies the button position in footer. The enumerated values are: "Left", "right", and "center". The default value is right.
8. collapsible: Set to true. The button in the upper right corner is displayed. The default value is false.
9. draggable: True indicates that the image can be dragged, but you need to provide the operation procedure. The default value is false.
10. html: Subject content
11. ID: ID value. You can find this component by ID. We recommend that you add this ID value.
12. Width: width
13. Height: Height
13. Title: Title
14. titlecollapse: if it is set to true, the title bar can be scaled down anywhere. The default value is false.
15. applyto: (ID) the HTML element to which the image is displayed.
16. contentel: (ID) the HTML element to which the content in El is displayed.
17. renderto: (ID) in which HTML element is displayed
Applyto, contentel, and renderto are different from each other: applyto and renderto are bound to HTML elements, while contentel is the HTML element to the ext component.
As mentioned above, the Panel is bound to a display panel in an HTML element, which is partial. Extjs also has a component Ext. viewport that can be displayed in the entire body, which will change with the browser. Note that only one viewport instance can exist on a page. See the following code.
Function viewport (){
VaR view = new Ext. viewport ({
Enabletabscroll: True,
Layout: "fit ",
Items :[
{
Title: 'title ',
HTML: "content ",
Bbar :[
{Text: "button 1 "}
]
}
]
})
}

Similar to other usage methods, you do not need to specify renderto for viewport. viewport is usually used on the homepage of a website. The common layout of viewport includes fit and border. You can set the layout attribute to change the layout.
We have learned about the basic panel, and there is also a very important panel tabpanel. Here we will use a small example to illustrate it, so the code will not be explained. Panel usage is very flexible. We can use our imagination to make beautiful tab panels and practical functions. Because it can nested controls infinitely.

Function tabpanel (){
VaR tabpanel = new Ext. tabpanel ({
Activetab: 0, // set the default Tab
Renderto: 'tabpanel ',
Width: 200,
Height: 150,
Items :[
{
Title: "First Option ",
HTML: "First content"
},
{
Title: "second option ",
HTML: "First content"
}
]
});
}

Current page 2/3 previous page 123 next page
Detailed source reference: http://www.jb51.net/article/16996_2.htm

 

 

Http://www.jb51.net/article/16996_2.htm