extjs兩個tbar問題探討

2019-11-20 22:26:10

字體：大中小

來源：轉載

供稿：網友

版本：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', 
initComponent : function() { 
this.content = mnguser.panel; 
menuOpt(this.content); //在自帶tbar上添加執行按鈕 
Ext.apply(this, { 
items : [this.content] 
}); 
mnguser.body.superclass.initComponent.call(this); 
} 
}); 