We know that each panel has a tbar (top toolbar of topbar). The following section describes two tbar problems of extjs. If you are interested, refer to the following version: extjs3.4.
Comrades who have been familiar with extjs know that each panel has a tbar (top bar top toolbar) and bbar (bottom Toolbar of bottom bar)
What do you usually look like when querying pages?
The most basic is a table to display data.
Further:
Add operations on data, such as the Add button
Further:
Generally, queries have query conditions, which can be quickly located.
For extjs, extjs encapsulates many components. The concept of components is similar to that of java swing, such as panel, button, component, and container.
For the above query page, java development, there is no problem at all, three tables, or three p.
What about extjs?
In fact, extjs is also very simple. For data display, you can use the gird component, query button, button component, query condition, and text format, however, if you place the Add button and Search Condition on a tbar, you can at least implement the function.
But all is for the sake of the customer, the most obvious behavior: think of the user as a fool, all silly operations. For example, a silly camera or a stupid installation system is not very popular.
How can we put the execution button and query Search Condition on two tbar instances for the sake of Cinda?
There is a way to add two tbar codes to the grid on the Internet. For beginners who are worried about the project, I have a simple method to achieve the same as Cinda:
The simplest way is to use listeners.
First, place the execution button, such as the Add button, on the tbar that comes with the panel.
2. on the custom toolbar, place the search criteria on it.
Third: the custom toolbar listens to the tbar that comes with the panel [that is, the second listener first]
The Code is as follows:
The Code is as follows:
Tbar: new Ext. Toolbar ({items: ['-']}),
// Write the query toolbar under the button Toolbar
Listeners :{
Render: function (){
QueryBar. render (this. tbar );
}
}
// The main code of our project is as follows:
Mnguser. panel = new Ext. Panel ({
Id: 'mngmenudiv ',
Title: 'user management ',
Region: 'center ',
Layout: 'fit ',
Style: 'padding: 3px ;',
BodyBorder: true,
Border: true,
Items: _ grid,
Tbar: new Ext. Toolbar ({items: ['-']}),
// Write the query toolbar under the button Toolbar
Listeners :{
Render: function (){
QueryBar. render (this. tbar );
}
}
});
Mnguser. body = Ext. extend (Ext. Viewport ,{
Layout: 'border ',
InitComponent: function (){
This. content = mnguser. panel;
MenuOpt (this. content); // Add the execution button on the built-in tbar
Ext. apply (this ,{
Items: [this. content]
});
Mnguser. body. superclass. initComponent. call (this );
}
});
The effect is as follows:
