快捷導(dǎo)航

extjs兩個(gè)tbar問(wèn)題探討

更新時(shí)間：2013年08月08日 15:41:48 作者：

知道每個(gè)panel都有一個(gè)tbar(top bar 上面工具欄) ,bbar(bottom bar 底部工具欄)下面為大家介紹下extjs的兩個(gè)tbar問(wèn)題，感興趣的朋友可以參考下

版本：extjs3.4

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

大家做查詢(xún)頁(yè)面，一般都是啥樣子的？
最基本的是一個(gè)table，來(lái)顯示數(shù)據(jù)。
再進(jìn)一步：
添加對(duì)數(shù)據(jù)的操作，比如添加按鈕
再進(jìn)一步：
一般查詢(xún)都會(huì)有查詢(xún)條件，查詢(xún)條件可以快速定位。

那對(duì)于extjs來(lái)說(shuō)，extjs中封裝了很多組件，其中組件的概念很類(lèi)似于java swing，比如panel，button，component，container等這種東西。
對(duì)于上述的查詢(xún)頁(yè)面，做java開(kāi)發(fā)，相比一點(diǎn)問(wèn)題都沒(méi)有，三個(gè)table，或三個(gè)div即可。
那對(duì)于extjs呢？
其實(shí)extjs也灰常簡(jiǎn)單，顯示數(shù)據(jù)的，使用gird組件，查詢(xún)按鈕，使用button組件，查詢(xún)條件，文本格式啊，但是若把添加按鈕和查詢(xún)搜索條件放在一個(gè)tbar上，這樣也可以，至少功能實(shí)現(xiàn)了。
但是一切都是為客戶(hù)著想，著想最明顯的行為：把用戶(hù)想成傻瓜，一切傻瓜式操作。比如傻瓜式相機(jī)，傻瓜式裝系統(tǒng)，不是挺火的啊。

那為了信達(dá)雅，到底如何把執(zhí)行按鈕和查詢(xún)搜索條件分別放在兩個(gè)tbar上呢？
網(wǎng)上有一種在grid中添加兩個(gè)tbar的代碼，對(duì)于項(xiàng)目著急的新手來(lái)說(shuō)，本人有個(gè)簡(jiǎn)單的做法，一樣實(shí)現(xiàn)信達(dá)雅：
最簡(jiǎn)單的做法是：使用listeners監(jiān)聽(tīng)器方式。

第一：把執(zhí)行按鈕，比如添加按鈕，放在panel自帶的tbar上。
第二：自定義工具欄，在其上放查詢(xún)搜索條件。
第三：自定義工具欄監(jiān)聽(tīng)panel自帶的tbar【即第二監(jiān)聽(tīng)第一】

代碼如下：

復(fù)制代碼代碼如下:

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

//我們項(xiàng)目部分主要代碼如下： 
mnguser.panel = new Ext.Panel({ 
id :'mngmenuDiv', 
title : '用戶(hù)管理', 
region : 'center', 
layout : 'fit', 
style : 'padding:3px;', 
bodyBorder : true, 
border : true, 
items : _grid, 
tbar:new Ext.Toolbar({items:['-']}), 
//把查詢(xún)工具欄寫(xiě)在按鈕工具欄下面 
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上添加執(zhí)行按鈕 
Ext.apply(this, { 
items : [this.content] 
}); 
mnguser.body.superclass.initComponent.call(this); 
} 
}); 