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

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

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

<script type="text/javascript" defer>
    Ext.onReady(function(){
        // 创建带三个按钮的工具条
        var tb = new Ext.Toolbar({
            width : 300,
            items : [{
                text: '新建'
            },{
                text: '修改'
            },{
                text: '删除'
            }]
        });
        // 为工具条再添加一个按钮
        tb.add({
            text: '显示'
        });
        //tb.doLayout();//重新计算容器的布局尺寸
        new Ext.Viewport({
            items: [tb]
        });
    });
</script>

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

代码

<script type="text/javascript" defer>
    Ext.onReady(function(){
        //创建工具条
        var tb = new Ext.Toolbar({
            width : 300
        });
        //创建一个菜单
        var menuFile = new Ext.menu.Menu();
        menuFile.add({text: '新建'});
        menuFile.add('-');
        menuFile.add({text: '打开'});
        menuFile.add('separator');
        menuFile.add({text: '保存'});
        menuFile.add(new Ext.menu.Separator());
        menuFile.add({text: '关闭'});
        // 为工具条再添加一个菜单
        tb.add({
            text: '文件',
            menu: menuFile
        });
        //tb.doLayout();//重新计算容器的布局尺寸
        new Ext.Viewport({
            items: [tb]
        });
    });
</script>

3.多级菜单

 

<script type="text/javascript" defer>
    Ext.onReady(function(){
        var menuFile = new Ext.menu.Menu({
            items:[{
                text: '历史',
                menu: [{
                    text: '今天'
                },{
                    text: '昨天'
                }]
            }]
        });
        var tb = new Ext.Toolbar({
            width : 300,
            items : [{
                text: '文件',
                menu : menuFile
            }]
        });
        new Ext.Viewport({
            items: [tb]
        });
    });
</script>

4.多选菜单

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

效果图

代码

<script type="text/javascript" defer>
    Ext.onReady(function(){
        var menuCheck = new Ext.menu.Menu({
            items : [
                new Ext.menu.CheckItem({
                    text : '粗体',
                    checkHandler : function(item,checked){
                        Ext.Msg.alert('多选',(checked ? '选中':'取消')+'粗体');
                    }
                }),
                new Ext.menu.CheckItem({
                    text : '斜体',
                    checkHandler : function(item,checked){
                        Ext.Msg.alert('多选',(checked ? '选中':'取消')+'斜体');
                    }
                })
            ]
        });


        var tb = new Ext.Toolbar({
            items : [{
                text : '字形',
                menu : menuCheck
            }]
        });
        new Ext.Viewport({
            items : [tb]
        });
    });
</script>

5.单选按钮菜单

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

效果图

代码

<script type="text/javascript" defer>
    Ext.onReady(function(){
        var menuRadio = new Ext.menu.Menu({
            items : [
                new Ext.menu.CheckItem({
                    text : '宋体',
                    group : 'font',
                    checkHandler : function(item,checked){
                        Ext.Msg.alert('单选',(checked ? '选中':'取消')+'宋体');
                    }
                }),
                new Ext.menu.CheckItem({
                    text : '黑体',
                    group : 'font',
                    checkHandler : function(item,checked){
                        Ext.Msg.alert('单选',(checked ? '选中':'取消')+'黑体');
                    }
                }),
                new Ext.menu.CheckItem({
                    text : '楷体',
                    group : 'font',
                    checkHandler : function(item,checked){
                        Ext.Msg.alert('单选',(checked ? '选中':'取消')+'楷体');
                    }
                })
            ]
        });

        var tb = new Ext.Toolbar({
            items : [{
                text : '字体',
                menu : menuRadio
            }]
        });
        new Ext.Viewport({
            items : [tb]
        });
    });
</script>

6.日期菜单
效果图

代码

<script type="text/javascript" defer>
    Ext.onReady(function(){
        var tb = new Ext.Toolbar({
            items : [{
                text : '日期',
                menu : new Ext.menu.DateMenu({
                    handler : function(dp, date){
                        Ext.Msg.alert('选择日期', '选择的日期是 {0}.', date.format('Y年m月d日'));
                    }
                })
            }]
        });
        new Ext.Viewport({
            items : [tb]
        });
    });
</script>

7.颜色菜单

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

效果图

 

代码

<script type="text/javascript" defer>
    Ext.onReady(function(){
        var tb = new Ext.Toolbar({
            items : [{
                text : '颜色',
                menu: new Ext.menu.ColorMenu({
                    handler : function(cm, color){
                        if (typeof color == 'string') {
                            Ext.Msg.alert('选择颜色', '选择的颜色是 ' + color);
                        }
                    }
                })
            }]
        });
        new Ext.Viewport({
            items : [tb]
        });
    });
</script>

8.右键弹出菜单

<script type="text/javascript">
    Ext.onReady(function(){
        var contextmenu = new Ext.menu.Menu({
            items: [{
                text: '新建'
            },{
                text: '修改'
            },{
                text: '删除'
            },{
                text: '显示'
            }]
        });
        Ext.get(document).on('contextmenu', function(e) {
            e.preventDefault();
            contextmenu.showAt(e.getXY());
        });
    });
</script>

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

 

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

代码

var menuWj = new Ext.menu.Menu({
    id: 'menu1',
    allowOtherMenus: true,
    items: [
        {text: '今天'},
        {text: '昨天'}
    ]
});
Ext.get('showButton').on('click', function() {
    //获取menu实例
    var menu1 = Ext.menu.MenuMgr.get('menu1');
    menu1.show(tb.el);
    Ext.getDoc().removeAllListeners();
});
Ext.get('hideButton').on('click', function() {
    Ext.menu.MenuMgr.hideAll();
});

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

代码

<script type="text/javascript">
    Ext.onReady(function(){
        var tb = new Ext.Toolbar({
            items : [
                '文本框',
                new Ext.form.TextField({
                    name: 'text'
                }),
                '时间框',
                new Ext.form.DateField({
                    name: 'date'
                })
            ]
        });
        new Ext.Viewport({
            items : [tb]
        });
    });
</script>

11工具条加HTML标签
效果图

代码

<script type="text/javascript">
    Ext.onReady(function(){
        var tb = new Ext.Toolbar({
            items : [
                '<span style="color:red;font-weight:bold;">红字</span>',
                '<input type="text">',
                '<button>按钮</button>'
            ]
        });
        new Ext.Viewport({
            items : [tb]
        });
    });
</script>

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

<script type="text/javascript">
    Ext.onReady(function(){
        var tb = new Ext.Toolbar({
            items : [{
                text : '按钮1'
            },
            new Ext.Button({
                text : '按钮2'
            }),
            new Ext.Toolbar.Button({
                text : '按钮3'
            })]
        });
        new Ext.Viewport({
            items : [tb]
        });
    });
</script>

13. Ext.Toolbar.Spacer

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

 

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

14. Ext.Toolbar.Separator

 

 

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

 

 

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

15. Ext.Toolbar.Fill

 

 

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

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