快捷導(dǎo)航

Extjs學(xué)習(xí)筆記之四工具欄和菜單

更新時間：2010年01月07日 21:01:48 作者：

本文介紹在桌面程序開發(fā)中很常用也很簡單的工具欄和菜單，但是在通常的web開發(fā)中，要實現(xiàn)好工具欄和菜單并非易事，然而extjs使我們能夠用類似桌面程序開發(fā)的方法來開發(fā)web的工具欄和菜單。

ToolBar的使用很簡單，關(guān)鍵是向ToolBar上面添加內(nèi)容，默認(rèn)地ToolBar添加的是Button，不過實際上可以向Toolbar添加任意的組件。下面是一個例子：

 
<script type="text/javascript"> 
Ext.onReady(function() { 
var tb = new Ext.Toolbar({ 
renderTo: document.body, 
width: 600, 
height: 100, 
items: [ 
{ 
// xtype: 'button', // default for Toolbars, same as 'tbbutton' 
text: 'Button' 
}, 
{ 
xtype: 'splitbutton', // same as 'tbsplitbutton' 
text: 'Split Button' 
}, 
// begin using the right-justified button container 
'->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill 
{ 
xtype: 'textfield', 
name: 'field1', 
emptyText: 'enter search term' 
}, 
// add a vertical separator bar between toolbar items 
'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator 
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem 
{xtype: 'tbspacer' }, // same as ' ' to create Ext.Toolbar.Spacer 
'text 2', 
{ xtype: 'tbspacer', width: 50 }, // add a 50px space 
'text 3' 
] 
}); 

}); 
</script> 

Extjs添加組件的方式很靈活，可以在items數(shù)組中直接添加對象，比如new Ext.Button(…)，也可以直接添加配置項，如上例所示，其實就是把對象的構(gòu)造函數(shù)中的參數(shù)直接取出來，省略了new，取而代之的是xtype，由extjs根據(jù)xtype去構(gòu)造相應(yīng)的對象。xtype是在Ext.Component中定義的，xtype是一個字符串，它的作用是一個類型的別名。Extjs有一些默認(rèn)的xtype，用戶自己也可以設(shè)置某個類型的xtype，不過這個超出了本文的范圍。xtype和類型的對應(yīng)在extjs的api文檔中有，下面摘抄出一部分備查。

Toolbar components
---------------------------------------
paging Ext.PagingToolbar
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button (deprecated; use button)
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton (deprecated; use splitbutton)
tbtext Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu Ext.menu.Menu
colormenu Ext.menu.ColorMenu
datemenu Ext.menu.DateMenu
menubaseitem Ext.menu.BaseItem
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.TextItem

Form components
---------------------------------------
form Ext.form.FormPanel
checkbox Ext.form.Checkbox
checkboxgroup Ext.form.CheckboxGroup
combo Ext.form.ComboBox
datefield Ext.form.DateField
displayfield Ext.form.DisplayField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField

再仔細(xì)看下xtype的api文檔的原文：
xtype : String

The registered xtype to create. This config option is not used when passing a config object into a constructor. This config option is used only when lazy instantiation is being used, and a child item of a Container is being specified not as a fully instantiated Component, but as a Component config object. Thextype will be looked up at render time up to determine what type of child Component to create.

這句話說的是如果在new的時候使用xtype，這個xtype是忽略的，這個是明顯的，用了new就肯定要指定一個類型，xtype是無用的。后面半句才是關(guān)鍵，它的意思是如果使用xtype，對象并不是立刻構(gòu)造出來的，而是采用一種延遲加載的機(jī)制，等到需要顯示這個對象的時候再去構(gòu)造它，在第一次使用之前在內(nèi)存中僅是一個組件配置對象（component config object),雖然API文檔沒有明說，但是卻暗示出來如果可能，使用xtype而不是new是一個更好的選擇，它可以節(jié)省內(nèi)存。實際中，不是所有的組件都需要被顯示，那么那些沒有被顯示的組件就不需要被實例化。
此文中談到了這點 EXT中xtype的含義 .
介紹了下xtype，下面回到工具欄上來，上面的代碼的運(yùn)行效果是：

一個很美觀的工具欄就出現(xiàn)了。接下來的工作是為這些按鈕添加方法，不過這不是本文的討論范圍，以后再講。

接下來介紹Menu，Menu和Toolbar是很類似的。Menu上能添加的組件在上面的xtype表中已經(jīng)列出，直接看一個例子：

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

 
<script type="text/javascript"> 
Ext.onReady(function() { 
var tb = new Ext.Toolbar({ 
renderTo: document.body, 
width: 600, 
height: 100 
}); 
var filemenu = new Ext.menu.Menu({ 
shadow: 'frame', 
items: [{ text: 'New' }, { text: 'Open' }, { text: 'Save' }, 
"-", { text: 'Export' },{ text: 'Import' } 
] 
}); 
tb.add({ text: 'File', menu: filemenu }); 
var dateMenu = new Ext.menu.DateMenu({}); 
var colorMenu = new Ext.menu.ColorMenu({}); 

tb.add({ text: 'Colorful', menu: { xtype: 'menu', items: [ 
{text: 'Choose a date', menu: dateMenu }, 
{ text: 'Choose a color', menu: colorMenu }, "-", 
{ 
text: 'Radio Options', 
menu: { // <-- submenu by nested config object 
items: [ 
// stick any markup in a menu 
'<b class="menu-title">Choose a Theme</b>', 
{ 
text: 'Aero Glass', 
checked: true, 
group: 'theme' 
}, { 
text: 'Vista Black', 
checked: false, 
group: 'theme' 
}, { 
text: 'Gray Theme', 
checked: false, 
group: 'theme' 
}, { 
text: 'Default Theme', 
checked: false, 
group: 'theme' 
} 
] 
} 
} 
]} 
}); 
tb.doLayout(); 
}); 
</script> 