3.Toolbar|Menu

最新推荐文章于 2021-03-05 19:52:21 发布

dengyiyu5280

最新推荐文章于 2021-03-05 19:52:21 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/atwanli/articles/4703511.html

版权

一、头部工具栏--tools

二、工具栏组件--Toolbar

三、菜单栏--Menu

一、头部工具栏

示例一：添加头部工具栏和提示信息

Ext.onReady(
    function() {
       //初始化提示信息
       Ext.QuickTips.init();
       var mypanel = new Ext.Panel({
           renderTo:hello,
           width:300,
           height:300,
           title:"Panel",
           html:"测试Panel",
           floating:true,
           x:300,
           y:100,
           //头部工具栏
           tools:[
              {id:"save",qtip:"保存"},  //qtip 提示信息 但必须初始化 Ext.QuickTips.init();
              {id:"help",qtip:"帮助"},
              {id:"close",qtip:"关闭"}
           ]
       });
    }
);

二、工具栏组件Toolbar

示例二：添加工具栏。

Ext.onReady(
    function() {
       //初始化提示信息
       Ext.QuickTips.init();
       var mypanel = new Ext.Panel({
           renderTo:hello,
           width:300,
           height:300,
           title:"Panel",
           html:"测试Panel",
           floating:true,
           x:300,
           y:100,
           //头部工具栏
           tools:[
              {id:"save",qtip:"保存"},
              {id:"help",qtip:"帮助"},
              {id:"close",qtip:"关闭"}
           ],
           //工具栏
           tbar:new Ext.Toolbar({
              width:300,
              height:20
           })
       });
    }
);

常用工具

Ext.Toolbar.Fill()  填充，可用来做对齐
Ext.Toolbar.TextItem() 文本
Ext.Toolbar.Spacer() 空格
Ext.Toolbar.Separator() 分隔线
Ext.Toolbar.Button()按钮

示例三：带工具的工具栏。

Ext.onReady(
    function() {
       //初始化提示信息
       Ext.QuickTips.init();
       var mypanel = new Ext.Panel({
           renderTo:hello,
           width:300,
           height:300,
           title:"Panel",
           html:"测试Panel",
           floating:true,
           x:300,
           y:100,
           //头部工具栏
           tools:[
              {id:"save",qtip:"保存"},
              {id:"help",qtip:"帮助"},
              {id:"close",qtip:"关闭"}
           ],
           //工具栏
           tbar:new Ext.Toolbar({
              width:300,
              height:20
           })
       });

       mypanel.getTopToolbar().add(new Ext.Toolbar.TextItem("工具栏"));
       mypanel.getTopToolbar().add(new Ext.Toolbar.Fill());
       mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"保存"}));
       mypanel.getTopToolbar().add(new Ext.Toolbar.Separator());
       mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"另存为"}));
    }
);

Button中有一个menu属性，用来设置该按钮的下拉菜单

示例四：

Ext.onReady(
    function() {
       //初始化提示信息
       Ext.QuickTips.init();
       var mypanel = new Ext.Panel({
           renderTo:hello,
           width:300,
           height:300,
           title:"Panel",
           html:"测试Panel",
           floating:true,
           x:300,
           y:100,
           //头部工具栏
           tools:[
              {id:"save",qtip:"保存"},
              {id:"help",qtip:"帮助"},
              {id:"close",qtip:"关闭"}
           ],
           //工具栏
           tbar:new Ext.Toolbar({
              width:300,
              height:20
           })
       });
      
　　　　//菜单对象
       var mymenu = new Ext.menu.Menu({
           items:[
              {text:"保存"},
              {text:"另存为"}
           ]
       });         

       mypanel.getTopToolbar().add(new Ext.Toolbar.TextItem("工具栏"));
       mypanel.getTopToolbar().add(new Ext.Toolbar.Fill());
       mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"保存"}));
       mypanel.getTopToolbar().add(new Ext.Toolbar.Separator());
       mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"另存为"}));
       mypanel.getTopToolbar().add(new Ext.Toolbar.Button({text:"文件",menu:mymenu}));
    }
);

三、菜单栏

示例五：响应事件

  <body>
  <div id="showMenuBar">显示菜单</div>
  </body>

Ext.onReady(
    function() {
        Ext.get("showMenuBar").on("click",function(){//点击页面“显示菜单”div相应事件
            alert("fdsf");
        }
        );
    }
);

示例六：显示菜单

Ext.onReady(
    function() {
        //菜单
        var myMenu = new Ext.menu.Menu();
        //添加文件菜单
        myMenu.add({
            text:"文件",
            menu:[
                {text:"打开"},//菜单选项
                {text:"保存"}
            ]
        });
        //添加编辑菜单
        myMenu.add({
            text:"编辑",
            menu:[
                {text:"复制"},
                {text:"粘贴"},
                {text:"剪切"}
            ]    
        });
        
        var divShow = Ext.get("showMenuBar");  //获取showMenuBar div并在点击时将菜单显示到该div上
        divShow.on("click",function(){
            myMenu.show(divShow);
        }
        );
    }
);

文本菜单项：仅仅显示文本，没有其他作用

Ext.onReady(
    function() {
        //菜单栏
        var myMenu = new Ext.menu.Menu();
        //文本菜单项
        myMenu.add("文本菜单项"); //与下面效果一样
        //文本菜单项
        myMenu.add(new Ext.menu.TextItem({text:"文本菜单项"}));        
        var divShow = Ext.get("showMenuBar");
        divShow.on("click",function(){
            myMenu.show(divShow);
        }
        );
    }
);

单选、复选菜单项：Ext.menu.CheckItem，

当不设置其group属性时，则为复选菜单项，否则为单选菜单项

Ext.onReady(
    function() {
        //菜单栏
        var myMenu = new Ext.menu.Menu();
        //字体菜单
        myMenu.add({
            text:"字体大小",
            menu:[
                new Ext.menu.CheckItem({text:"一号",group:"font"}),
                new Ext.menu.CheckItem({text:"二号",group:"font"})
            ]
        });
        //字体效果菜单
        myMenu.add({
            text:"字体效果",
            menu:[
                new Ext.menu.CheckItem({text:"粗体"}),
                new Ext.menu.CheckItem({text:"斜体"})
            ]
        });
        
        var divShow = Ext.get("showMenuBar");
        divShow.on("click",function(){
            myMenu.show(divShow);
        }
        );
    }
);

日期选择及颜色选择菜单

Ext.onReady(
    function() {
        //菜单栏
        var myMenu = new Ext.menu.Menu();
        //字体菜单
        myMenu.add({
            text:"字体大小",
            menu:[
                new Ext.menu.CheckItem({text:"一号",group:"font"}),
                new Ext.menu.CheckItem({text:"二号",group:"font"})
            ]
        });
        //字体效果菜单
        myMenu.add({
            text:"字体效果",
            menu:[
                new Ext.menu.CheckItem({text:"粗体"}),
                new Ext.menu.CheckItem({text:"斜体"})
            ]
        });
        //其他菜单
        myMenu.add({
            text:"其他",
            menu:[
                {text:"时间选择",menu:new Ext.menu.DateMenu()},//日期选择器
                {text:"颜色选择",menu:new Ext.menu.ColorMenu()}//颜色选择器
            ]
        });
        
        var divShow = Ext.get("showMenuBar");
        divShow.on("click",function(){
            myMenu.show(divShow);
        }
        );
    }

N级菜单

Ext.onReady(
    function() {
        //菜单栏
        var myMenu = new Ext.menu.Menu();
        //1级菜单
        myMenu.add({
            text:"1级菜单",
            menu:[{
                //2级菜单
                text:"2级菜单",
                menu:[{
                    text:"3级菜单",
                    menu:[{
                        text:"4级菜单",
                        menu:[{
                            text:"5级菜单"
                        }]
                    }]
                }]
            }]
        })
        
        var divShow = Ext.get("showMenuBar");
        divShow.on("click",function(){
            myMenu.show(divShow);
        }
        );
    }
);

转载于:https://www.cnblogs.com/atwanli/articles/4703511.html

dengyiyu5280

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.Toolbar|Menu

目录一、头部工具栏--tools二、工具栏组件--Toolbar三、菜单栏--Menu一、头部工具栏示例一：添加头部工具栏和提示信息Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); var mypanel = new Ext.Panel(...
复制链接

扫一扫