extjs兩個tbar問題探討_extjs

版本：extjs3.4

接觸過extjs的同志們都知道每個panel都有一個tbar(top bar 上面工具列) ,bbar(bottom bar 底部工具列)

大家做查詢頁面，通常都是啥樣子的？
最基本的是一個table，來顯示資料。
再進一步：
新增對資料的操作，例如新增按鈕
再進一步：
一般查詢都會有查詢條件，查詢條件可以快速定位。

那對於extjs來說，extjs中封裝了很多元件，其中元件的概念很類似於java swing，例如panel，button，component，container等這種東西。
對於上述的查詢頁面，做java開發，相比一點問題都沒有，三個table，或三個div即可。
那對於extjs呢？
其實extjs也灰常簡單，顯示資料的，使用gird元件，查詢按鈕，使用button元件，查詢條件，文字格式啊，但是若把新增按鈕和查詢搜尋條件放在一個tbar上，這樣也可以，至少功能實現了。
但是一切都是為客戶著想，著想最明顯的行為：把使用者想成傻瓜，一切傻瓜式操作。例如傻瓜式相機，傻瓜式裝系統，不是挺火的啊。

那為了信達雅，到底如何把執行按鈕和查詢搜尋條件分別放在兩個tbar上呢？
網路上有一種在grid中添加兩個tbar的程式碼，對於專案著急的新手來說，本人有個簡單的做法，一樣實現信達雅：
最簡單的做法是：使用listeners監聽器方式。

第一：把執行按鈕，例如新增按鈕，放在panel自備的tbar上。
第二：自訂工具列，在上面放查詢搜尋條件。
第三：自訂工具列監聽panel自帶的tbar【即第二監聽第一】

程式碼如下：

複製程式碼 程式碼如下:

tbar:new Ext.Toolbar({items:['-']}),
//把查詢工具列寫在按鈕工具列下面
listeners: {
render: function(){
queryBar.render(this.tbar);
}
}

//我們專案部分主程式碼如下：
mnguser.panel = new Ext.Panel({
id :'mngmenuDiv',
title : '使用者管理',
region : 'center',
layout : 'fit',
style : 'padding:3px;',
bodyBorder : true,
border : true,
items : _grid,
tbar:new Ext.Toolbar({items: ['-']}),
//把查詢工具列寫在按鈕工具列下面
listeners: {
render: function(){
queryBar.render(this.tbar);
}
}
});

mnguser.body = Ext.extend(Ext.Viewport, {
layout : 'border',
initonent : functionComp() {
this.content = mnguser.panel;
menuOpt(this.content); //在自帶tbar上新增執行按鈕
Ext.apply(this, {
items : [this. content]
});
mnguser.body.superclass.initComponent.call(this);
}
});

效果如下：
效果如下： 效果如下： 效果如下：