Extjs-工具条和菜单 Ext.menu和Ext.Toolbar

转载自：http://blog.csdn.net/itlwc/article/details/7878002

1.创建一个简单工具条
效果图

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. // 创建带三个按钮的工具条
4. var tb = new Ext.Toolbar({
5. width : 300,
6. items : [{
7. text: '新建'
8. },{
9. text: '修改'
10. },{
11. text: '删除'
12. }]
13. });
14. // 为工具条再添加一个按钮
15. tb.add({
16. text: '显示'
17. });
18. //tb.doLayout();//重新计算容器的布局尺寸
19. new Ext.Viewport({
20. items: [tb]
21. });
22. });
23. </script>

2.创建一个简单菜单
效果图

代码

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. //创建工具条
4. var tb = new Ext.Toolbar({
5. width : 300
6. });
7. //创建一个菜单
8. var menuFile = new Ext.menu.Menu();
9. menuFile.add({text: '新建'});
10. menuFile.add('-');
11. menuFile.add({text: '打开'});
12. menuFile.add('separator');
13. menuFile.add({text: '保存'});
14. menuFile.add(new Ext.menu.Separator());
15. menuFile.add({text: '关闭'});
16. // 为工具条再添加一个菜单
17. tb.add({
18. text: '文件',
19. menu: menuFile
20. });
21. //tb.doLayout();//重新计算容器的布局尺寸
22. new Ext.Viewport({
23. items: [tb]
24. });
25. });
26. </script>

3.多级菜单

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. var menuFile = new Ext.menu.Menu({
4. items:[{
5. text: '历史',
6. menu: [{
7. text: '今天'
8. },{
9. text: '昨天'
10. }]
11. }]
12. });
13. var tb = new Ext.Toolbar({
14. width : 300,
15. items : [{
16. text: '文件',
17. menu : menuFile
18. }]
19. });
20. new Ext.Viewport({
21. items: [tb]
22. });
23. });
24. </script>

4.多选菜单

1. 单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数

效果图

代码

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. var menuCheck = new Ext.menu.Menu({
4. items : [
5. new Ext.menu.CheckItem({
6. text : '粗体',
7. checkHandler : function(item,checked){
8. Ext.Msg.alert('多选',(checked ? '选中':'取消')+'粗体');
9. }
10. }),
11. new Ext.menu.CheckItem({
12. text : '斜体',
13. checkHandler : function(item,checked){
14. Ext.Msg.alert('多选',(checked ? '选中':'取消')+'斜体');
15. }
16. })
17. ]
18. });
19. var tb = new Ext.Toolbar({
20. items : [{
21. text : '字形',
22. menu : menuCheck
23. }]
24. });
25. new Ext.Viewport({
26. items : [tb]
27. });
28. });
29. </script>

5.单选按钮菜单

1. 单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数

效果图

代码

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. var menuRadio = new Ext.menu.Menu({
4. items : [
5. new Ext.menu.CheckItem({
6. text : '宋体',
7. group : 'font',
8. checkHandler : function(item,checked){
9. Ext.Msg.alert('单选',(checked ? '选中':'取消')+'宋体');
10. }
11. }),
12. new Ext.menu.CheckItem({
13. text : '黑体',
14. group : 'font',
15. checkHandler : function(item,checked){
16. Ext.Msg.alert('单选',(checked ? '选中':'取消')+'黑体');
17. }
18. }),
19. new Ext.menu.CheckItem({
20. text : '楷体',
21. group : 'font',
22. checkHandler : function(item,checked){
23. Ext.Msg.alert('单选',(checked ? '选中':'取消')+'楷体');
24. }
25. })
26. ]
27. });
28. var tb = new Ext.Toolbar({
29. items : [{
30. text : '字体',
31. menu : menuRadio
32. }]
33. });
34. new Ext.Viewport({
35. items : [tb]
36. });
37. });
38. </script>

6.日期菜单
效果图

代码

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. var tb = new Ext.Toolbar({
4. items : [{
5. text : '日期',
6. menu : new Ext.menu.DateMenu({
7. handler : function(dp, date){
8. Ext.Msg.alert('选择日期', '选择的日期是 {0}.', date.format('Y年m月d日'));
9. }
10. })
11. }]
12. });
13. new Ext.Viewport({
14. items : [tb]
15. });
16. });
17. </script>

7.颜色菜单

1. Ext本身一些问题,颜色选中的时候handler会执行两次,第二次的参数传入一个event对象,
2. 所以要加typeof进行判断,以免出现问题
3. 最后颜色值返回6位的字符串,在它前面加#就可以使用了

效果图

代码

1. <script type="text/javascript" defer>
2. Ext.onReady(function(){
3. var tb = new Ext.Toolbar({
4. items : [{
5. text : '颜色',
6. menu: new Ext.menu.ColorMenu({
7. handler : function(cm, color){
8. if (typeof color == 'string') {
9. Ext.Msg.alert('选择颜色', '选择的颜色是 ' + color);
10. }
11. }
12. })
13. }]
14. });
15. new Ext.Viewport({
16. items : [tb]
17. });
18. });
19. </script>

8.右键弹出菜单

1. <script type="text/javascript">
2. Ext.onReady(function(){
3. var contextmenu = new Ext.menu.Menu({
4. items: [{
5. text: '新建'
6. },{
7. text: '修改'
8. },{
9. text: '删除'
10. },{
11. text: '显示'
12. }]
13. });
14. Ext.get(document).on('contextmenu', function(e) {
15. e.preventDefault();
16. contextmenu.showAt(e.getXY());
17. });
18. });
19. </script>

9.使用Ext.menu.MenuMgr统一管理菜单

1. Ext为我们提供了MenuMgr来统一管理页面上的所有菜单
2. 每创建一个菜单都会注册到Ext.menu.MenuMgr中,可以使用MenuMgr的函数对菜单进行操作,
3. Ext.menu.MenuMgr是一个单例,我们不需要创建就可以直接调用功能函数get(),根据id获取对应的菜单

代码

1. var menuWj = new Ext.menu.Menu({
2. id: 'menu1',
3. allowOtherMenus: true,
4. items: [
5. {text: '今天'},
6. {text: '昨天'}
7. ]
8. });
9. Ext.get('showButton').on('click', function() {
10. //获取menu实例
11. var menu1 = Ext.menu.MenuMgr.get('menu1');
12. menu1.show(tb.el);
13. Ext.getDoc().removeAllListeners();
14. });
15. Ext.get('hideButton').on('click', function() {
16. Ext.menu.MenuMgr.hideAll();
17. });

10工具条加文本框和时间框
效果图

代码

1. <script type="text/javascript">
2. Ext.onReady(function(){
3. var tb = new Ext.Toolbar({
4. items : [
5. '文本框',
6. new Ext.form.TextField({
7. name: 'text'
8. }),
9. '时间框',
10. new Ext.form.DateField({
11. name: 'date'
12. })
13. ]
14. });
15. new Ext.Viewport({
16. items : [tb]
17. });
18. });
19. </script>

11工具条加HTML标签
效果图

代码

1. <script type="text/javascript">
2. Ext.onReady(function(){
3. var tb = new Ext.Toolbar({
4. items : [
5. '<span style="color:red;font-weight:bold;">红字</span>',
6. '<input type="text">',
7. '<button>按钮</button>'
8. ]
9. });
10. new Ext.Viewport({
11. items : [tb]
12. });
13. });
14. </script>

12.工具条加按钮的三种方法

1. <script type="text/javascript">
2. Ext.onReady(function(){
3. var tb = new Ext.Toolbar({
4. items : [{
5. text : '按钮1'
6. },
7. new Ext.Button({
8. text : '按钮2'
9. }),
10. new Ext.Toolbar.Button({
11. text : '按钮3'
12. })]
13. });
14. new Ext.Viewport({
15. items : [tb]
16. });
17. });
18. </script>

13. Ext.Toolbar.Spacer

1. Ext.Toolbar.Spacer向菜单添加空白元素,
2. xtype = tbspacer它是一个2px的空白

1. tb.add({
2. xtype : 'tbspacer'
3. });

14. Ext.Toolbar.Separator

1. Ext.Toolbar.Separator向菜单添加一个竖线
2. xtype = tbseparator 或者 –

1. tb.add({
2. xtype : 'tbseparator'
3. });

15. Ext.Toolbar.Fill

1. 将处于它右侧的工具条组件以右对齐的方式排列在工具条右侧
2. xtype=tbfill 或者->

1. tb.add({
2. xtype : 'tbfill'
3. });