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

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

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

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

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

 
<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ù)組中直接添加對(duì)象，比如new Ext.Button(…)，也可以直接添加配置項(xiàng)，如上例所示，其實(shí)就是把對(duì)象的構(gòu)造函數(shù)中的參數(shù)直接取出來，省略了new，取而代之的是xtype，由extjs根據(jù)xtype去構(gòu)造相應(yīng)的對(duì)象。xtype是在Ext.Component中定義的，xtype是一個(gè)字符串，它的作用是一個(gè)類型的別名。Extjs有一些默認(rèn)的xtype，用戶自己也可以設(shè)置某個(gè)類型的xtype，不過這個(gè)超出了本文的范圍。xtype和類型的對(duì)應(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的時(shí)候使用xtype，這個(gè)xtype是忽略的，這個(gè)是明顯的，用了new就肯定要指定一個(gè)類型，xtype是無用的。后面半句才是關(guān)鍵，它的意思是如果使用xtype，對(duì)象并不是立刻構(gòu)造出來的，而是采用一種延遲加載的機(jī)制，等到需要顯示這個(gè)對(duì)象的時(shí)候再去構(gòu)造它，在第一次使用之前在內(nèi)存中僅是一個(gè)組件配置對(duì)象（component config object),雖然API文檔沒有明說，但是卻暗示出來如果可能，使用xtype而不是new是一個(gè)更好的選擇，它可以節(jié)省內(nèi)存。實(shí)際中，不是所有的組件都需要被顯示，那么那些沒有被顯示的組件就不需要被實(shí)例化。
此文中談到了這點(diǎn) EXT中xtype的含義 .
介紹了下xtype，下面回到工具欄上來，上面的代碼的運(yùn)行效果是：

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

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

復(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> 