Panel Summary of ext (good article)

I couldn't help looking at ext. window API documentation, found that only more than panel what maximize, minimize, close, set before, after, animation triggered target settings, adjustable size of these features. Things such as the title bar and toolbar have long been encapsulated in Ext. Panel. With Ext. Panel, you can finally make a fortune. Hahaha.

This article mainly summarizes the common usage of panel.

　　1. Hide the title bar of the Panel

This is often the case. A topic does not need a title. What can be done? Add header: false in config during creation. OK.

　　2. How to Make the Panel be dragged

Make sure that the following settings are in config:

VaR config1 = {Title: 'This is the title bar ',
Width: 300,
Height: 300,
Header: false,
Floating: True,
Renderto: Ext. getbody (),
Draggable :{
Insertproxy: false,

Ondrag: function (e ){
VaR Pel = This. Proxy. getel ();
This. x = pel. getleft (true );
This. Y = pel. gettop (true );

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 );
}
},
HTML: 'This is the panel content !!! ',
Layout: 'fit ',
Collapsible: true };

Okay, the key is the red part above. It can be seen from the previous document: ext. panel. the DD class only provides the effect of moving proxy elements. The mouse is loose and the Panel is still in the old place, so you have to write code for implementation. For Ext. Panel. DD, this class is not public and I have not found it in the source code. I don't know where to put it. Finally, I had to open Firefox + firebug to see what was in it.

Why floating: true? The reason is very simple. To be able to drag, the DIV is absolute, and a panel. El is not absolute by default. So you have to set it to floating to make it floating.

　　3. How can a panel be folded and expanded.

This is very simple. Panel provides a toggle tool in title tools to do this. However, by default, this function of panel is disabled. The Panel also provides a function. clicking any part of the title will produce the toggle collapse effect. The related config attributes are proposed as follows:

　　Animcollapse: Boolean

Collapsefirst: Boolean

Collapsed: Boolean

Collapsedcls: String

Collapsible: Boolean // In fact, it is OK to set it to true. Other values can be left unspecified.

Titlecollapse: Boolean

For instructions on their use, see the previous API documentation. However, simply looking at the name should be known for use, and the name is very intuitive.

　　4. How to Set title tools for panel.

This is how to add a button to the title bar of the Panel. The container is similar to the following code in config:

Tools: [{ID: Close, Handler: function (event, toolel, panel) {panel. Hide () ;}}],

The format is generally: Tools :[{......}, {......}, {……}]

　　5. How to display and hide a panel

This is easy, just panel. Show ()/hide. However, if floating: True, it will be troublesome, and show will not be displayed. As I can see in firebug, panel. El. Dom. style. Left = "-pixel PX ". Of course, this is not displayed. So, you have to set the position when you show it. That's all.

　　6. Add sub-components for panel

Simple: add the items attribute in config, which is similar to the following code:

Items: [{ID: 'win1', xtype: 'window', Title: 'title', height: 100, width: 100}],

The format is generally: items :[{......}, {......}, {……}]

If xtype is not set at the time of definition, the sub-component is created to take the defaulttype value for xtype. As shown above, since the window is not displayed after creation, you have to show it. Therefore, I will give it an ID when defining it. In this way, you can: Ext. getcmp ("win1"). Show () in Ext. onready (). Hey, it's coming out. The addition of other components is similar. One {} is a component.

As previously called inert rendering, there is also a way of writing: items: [new XXX (config)]. Such a definition is displayed directly when the component is created.

　　7. Set layout for panel

This is the key. It is to set layout and layoutconfig. This is a detailed description. Usually. Here we use the code in the borderlayout document as an example:

Layout: 'border ',
Items :[{
Title: 'southpanel ',
Region: 'south ',
Height: 100,
Minsize: 75,
Maxsize: 250,
Margins: '0 5 5 5'
},{
Title: 'West panel ',
Region: 'west ',
Margins: '5 0 5 ',
Cmargins: '5 5 0 5 ',
Width: 200,
Minsize: 100,
Maxsize: 300
},{
Title: 'main content ',
Region: 'center ',
Margins: '5 5 0 0'
}],

In fact, the APIs of the layout class are simple and not complex to use. Actually, I learned the swing set.

Ext. layout. borderlayout is a special layout class. It does not have the correct configurations, unlike panel. You only need to set layout, and then use region to indicate the region of the member component. Ext. layout. borderlayout:East, west, south, north, center.

I personally like this layout very much, because using it as the outer layout can easily achieve the same effect as cnblogs. I still don't know the fixed width of the left column, how is the layout of the right column filled with the remaining screen? Unless JavaScript code is written in the window. manually tune in onload. Otherwise, CSS is the only option. Later, I also found a way to use table. Table has a feature that can be set to fill the whole horizontal direction. The first column is fixed width, and the second column is automatically left. However, I don't know whether there is a pure CSS solution. To be honest, div + CSS is too difficult to control, and table layout has great advantages in the horizontal direction. For example, put two contents in the same row, the left alignment on the left, and the right alignment on the right. It is troublesome to use Div, and it is also floating. It is obvious to use table, with two cells: one align = left and one align = right. This topic is far away. Whining.

　　8. How to Make the Panel resize

In fact, if the size of a Panel can be changed, you can consider using a window. Set dragable to false. If you do not like those buttons, you can also find a way to remove them. Panel itself does not have this function. However, extjs has a class that provides this function: Ext. resizable. It is easy to use, as follows:

VaR resizer = new Ext. resizable ("element-ID ",{
Handles: 'all ',
Minwidth: 200,
Minheight: 100,
Maxwidth: 500,
Maxheight: 400,
Pinned: True
});

It can be seen from the above that its function is to provide a function that can change the size of a specified element. This feature is not surprising. How to use it for panel. Hey, it is actually a key to get the ID of the element where X-panel is located. In fact, I have discussed this in Ext. Panel. Two Methods: panel. El or panel. getel () are the same.

Therefore, the code should be written as follows:

　　VaR resizer = new Ext. resizable (panel1.getel (), {handlers: 'all', pinned: true });

Resizer. On ('resize', function () {panel1.updatebox (panel1.getsize ());});

After creating the panel, add the two lines of code. Why add the following line? This Ext. resizable only changes the size of panel. getel (), but the content in it does not change. The result is that the newly added part is gray. That's the proxy color. To adjust the sub-component of the Panel to the actual size, you must use updatebox, which can be setwidth and setheight.

This function is simple. For details about Ext. resizable, see its official documentation.

　　9. How to provide toolbar for panel

This problem is important. Panel provides two tool bars: tbar and bbar. But the defined methods are the same. First, I want to study the tbar type: Object/array. The API documentation says: it can be a toolbar object, a Config of a toolbar, or an array of buttons, of course, it can also be an array of the first two. If the goal is clear, we need to make a little research on the toolbar, which has a large topic. In fact, it should be done as a topic. But first, let's figure out how to use it first.

Here is a good article about Ext. toolbar. Click here to view it! For more information about how to use the toolbar in Ext. Panel, click here. More detailed research and usage of Toolbar will be provided in the next article.

 

At this point, we have all the FAQs about Ext. Panel. After figuring out these issues, we can basically achieve general requirements.