|
|
<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數組中直接添加對象，比如new Ext.Button(…)，也可以直接添加配置項，如上例所示，其實就是把對象的構造函數中的參數直接取出來，省略了new，取而代之的是xtype，由extjs根據xtype去構造相應的對象。xtype是在Ext.Component中定義的，xtype是一個字符串，它的作用是一個類型的別名。Extjs有一些默認的xtype，用戶自己也可以設置某個類型的xtype，不過這個超出了本文的范圍。xtype和類型的對應在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
再仔細看下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是無用的。后面半句才是關鍵，它的意思是如果使用xtype，對象并不是立刻構造出來的，而是采用一種延遲加載的機制，等到需要顯示這個對象的時候再去構造它，在第一次使用之前在內存中僅是一個組件配置對象（component config object),雖然API文檔沒有明說，但是卻暗示出來如果可能，使用xtype而不是new是一個更好的選擇，它可以節省內存。實際中，不是所有的組件都需要被顯示，那么那些沒有被顯示的組件就不需要被實例化。
此文中談到了這點 EXT中xtype的含義 .
介紹了下xtype，下面回到工具欄上來，上面的代碼的運行效果是：
一個很美觀的工具欄就出現了。接下來的工作是為這些按鈕添加方法，不過這不是本文的討論范圍，以后再講。
接下來介紹Menu，Menu和Toolbar是很類似的。Menu上能添加的組件在上面的xtype表中已經列出，直接看一個例子：
復制代碼 代碼如下:
<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技術：Extjs學習筆記之四 工具欄和菜單，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
