Posted on 2008-11-18 16:50
Robert Su 閱讀(3007)
評論(4) 編輯 收藏 所屬分類:
Ajax
Ext.onReady(function(){
Ext.QuickTips.init();
var dateMenu = new Ext.menu.DateMenu({
handler : function(dp, date){
Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler : function(cm, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [ //定義菜單中的元素
{
text: 'I like Ext',
checked: true,
checkHandler: onItemCheck
},
'-', //添加菜單上的分隔符
{
text: 'Radio Options',
menu: { //定義二級菜單
items: [
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Vista Black',
checked: false,
group: 'color',
checkHandler: onItemCheck
}
]
}
},
{
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu
},
{
text: 'Choose a Color',
menu: colorMenu //這里前面定義了
}
]
});
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'Button Menu',
iconCls: 'bmenu', //
menu: menu //分配menu到toolbar
});
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
}
function onItemClick(item){
Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}
function onItemCheck(item, checked){
Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
}
function onItemToggle(item, pressed){
Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
}
});
在html中加入 <div id="toolbar"></div>