Discussion on two tbar issues in extjs_extjs

Version: extjs3.4

Comrades who have come into contact with extjs all know that each panel has a tbar (top bar upper toolbar), bbar (bottom bar bottom toolbar)

Everyone does it What does a query page generally look like?
The most basic one is a table to display data.
Go one step further:
Add operations on data, such as adding buttons
Go one step further:
General queries will have query conditions, and the query conditions can be quickly located.

As for extjs, extjs encapsulates many components, and the concept of components is very similar to java swing, such as panel, button, component, container, etc.
For the above query page, there is no problem at all when doing Java development. Three tables or three divs are enough.
What about extjs?
In fact, extjs is also very simple. To display data, use the grid component, query button, button component, query conditions, and text format. But if you put the add button and query search conditions on a tbar, this will also work. , at least the function is implemented.
But everything is for the sake of customers, considering the most obvious behavior: thinking of users as fools, and doing everything in a fool-like manner. For example, point-and-shoot cameras and point-and-shoot installation systems are very popular.

Then for the sake of Xindaya, how to put the execution button and query search conditions on two tbars respectively?
There is a code on the Internet to add two tbars to the grid. For newcomers who are anxious about the project, I have a simple way to achieve Xindaya:
The simplest way is: use listeners. Way.

First: Place the execution button, such as the add button, on the tbar that comes with the panel.
Second: Customize the toolbar and put query search conditions on it.
Third: Customize the toolbar to monitor the tbar that comes with the panel [that is, the second monitoring is the first]

The code is as follows:

Copy the code The code is as follows:

tbar:new Ext.Toolbar({items:['-']}),
//Write the query toolbar in Below the button toolbar
listeners: {
render: function(){
queryBar.render(this.tbar);
}
}

//Our project part The main code 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 below 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 an execution button on the built-in tbar
Ext.apply(this, {
items : [this. content]
});
mnguser.body.superclass.initComponent.call(this);
}
});

The effect is as follows: