首页 > 代码库 > Ext复杂的菜单栏

Ext复杂的菜单栏

2024-07-13 04:27:58   224人阅读

代码示例：

1、按钮组的配置方式是按照buttongrouptable进行布局的，columns可以多少行，colspan跨几行，所以在布局的时候注意；
2、在buttonggroup中，scale:‘large‘表示图标的大小；
3、iconAlign：可以定义按钮所在的位置，上面或下面
4、new Ext.menu.ColorPicker可以定义一个颜色选择器
 1 Ext.onReady(function(){ 2  3 var toolbar =newExt.toolbar.Toolbar({ 4  5 renderTo:‘toolbar‘, 6  7 width:300 8  9 });10 11 var fileMenu =newExt.menu.Menu({12 13 items:[{14 15 xtype:‘textfield‘,16 17 hideLabel:true,18 19 width:10020 21 },{22 23 text:‘颜色选择‘,24 25 menu:newExt.menu.ColorPicker()26 27 },{28 29 xtype:‘datepicker‘30 31 },{32 33 xtype:‘buttongroup‘,34 35 columns:3,36 37 title:‘按钮组‘,38 39 items:[{40 41 text:‘用户管理‘,42 43 scale:‘large‘,44 45 colspan:3,46 47 width:170,48 49 iconCls:‘userManager‘,50 51 iconAlign:‘top‘52 53 },{54 55 text:‘新建‘,56 57 iconCls:‘newIcon‘58 59 },{60 61 text:‘新建‘,62 63 iconCls:‘openIcon‘64 65 },{66 67 text:‘保存‘,68 69 iconCls:‘saveIcon‘70 71 }]72 73 }]74 75 });76 77 toolbar.add({78 79 text:‘文件‘,80 81 menu:fileMenu82 83 })84 85 });

 

展示效果：
 
 
 



来自为知笔记(Wiz)


联系
我们