Ext复杂的菜单栏

代码示例：

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:100
20 
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:fileMenu
82 
83 })
84 
85 });

 

展示效果：
 
 
 





posted @ 2014-07-21 10:23  thero  阅读(250)  评论(0)  编辑  收藏  举报