|
|
<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>
效果如下：
JavaScript技術(shù)：Extjs學(xué)習(xí)筆記之四 工具欄和菜單，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
