Ext Toolbar menu

最新推荐文章于 2020-08-19 10:24:43 发布

iteye_6603

最新推荐文章于 2020-08-19 10:24:43 发布

阅读量96

点赞数

分类专栏： Ext基础知识文章标签： EXT

本文链接：https://blog.csdn.net/iteye_6603/article/details/81925348

版权

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

2 篇文章 0 订阅

订阅专栏

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