Ext Toolbar menu

最新推荐文章于 2018-04-27 13:31:25 发布

原创最新推荐文章于 2018-04-27 13:31:25 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

Ext基础知识专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何使用ExtJS创建工具栏和菜单组件。包括基本的工具栏配置及菜单项设置，如按钮、分割按钮等，并演示了如何通过嵌套配置对象创建子菜单。此外还介绍了日期选择菜单和颜色选择菜单的实现方法。

//toolbar的例子
var toolbar = new Ext.Toolbar({
//width: 600,
//height: 100,
items: [ '-',{
text: 'Button'
}, '-',{
//xtype: 'splitbutton',
text: 'Split Button'
},'->',
{
text:'增加'
}, '-',{
text:'删除'
}, '-',{
text:'修改'
}, '-',{
text:'查询'
}
]
});

//menu的例子

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