ExtJS3 菜单与工具栏

Ext.ns("Application");
Application = function(config){
    Ext.apply(config);
};
Ext.onReady(function(){
    var onMenuItemHandler = function(menuItem){
        Ext.Msg.alert('菜单事件', '菜单命令' + menuItem.text);
    };
       
    var onCheckboxClick = function(menuItem, checked){
        if(checked){
            Ext.Msg.alert('菜单事件', '您选择了全部打开');
        }else{
            Ext.Msg.alert('菜单事件', '您放弃了全部打开');
        }
    };
       
       
    var menu = new Ext.menu.Menu({
        items:[{
            text:'文件',
            iconCls:'Page',
            menu:[
                {
                    xtype:'menutextitem',
                    text:'文件相关操作',
                    iconCls:'Cog',
                    style:{
                        fontWeight:'bold',
                        padding:'3px',
                        lineHeight:'24px'
                    }
                },new Ext.menu.Separator({
                    style:'border:2px solid #F2348A'
                }),
                { text:'添加文件', iconCls:'Pageadd', handler:onMenuItemHandler},
                { text:'打开文件', iconCls:'Pagered', handler:onMenuItemHandler},
                { text:'保存文件', iconCls:'Pagesave', handler:onMenuItemHandler}
            ]
        },{
            text:'编辑',
            iconCls:'Pageedit',
            menu:[
                {
                    xtype:'menutextitem',
                    text:'编辑相关操作',
                    iconCls:'Cog',
                    style:{
                        fontWeight:'bold',
                        padding:'3px',
                        lineHeight:'24px'
                    }
                },'-',
                { text:'复制', iconCls:'Pagecopy', handler:onMenuItemHandler},
                { text:'剪切', iconCls:'Cut', handler:onMenuItemHandler},
                { text:'粘贴', iconCls:'Pagepaste', handler:onMenuItemHandler}
            ]
        },{
            xtype:'menucheckitem',
            text:'全部打开',
            handler:onCheckboxClick
        }],
        listeners:{
//          'beforehide':function(){
//              return false;//菜单长时间保持显示
//          }
        }
    });
       
       
       
    var button = new Ext.Button({
        text:'触发菜单',
        menu:menu
    });
    //menu.show('container');
    //button.render('container');
       
    var menu2 = new Ext.menu.Menu({
        items:[{
            text:'文件',
            iconCls:'Page',
            menu:[
                {
                    xtype:'menutextitem',
                    text:'文件相关操作',
                    iconCls:'Cog',
                    style:{
                        fontWeight:'bold',
                        padding:'3px',
                        lineHeight:'24px'
                    }
                },new Ext.menu.Separator({
                    style:'border:2px solid #F2348A'
                }),
                { text:'添加文件', iconCls:'Pageadd', handler:onMenuItemHandler},
                { text:'打开文件', iconCls:'Pagered', handler:onMenuItemHandler},
                { text:'保存文件', iconCls:'Pagesave', handler:onMenuItemHandler}
            ]
        },{
            text:'编辑',
            iconCls:'Pageedit',
            menu:[
                {
                    xtype:'menutextitem',
                    text:'编辑相关操作',
                    iconCls:'Cog',
                    style:{
                        fontWeight:'bold',
                        padding:'3px',
                        lineHeight:'24px'
                    }
                },'-',
                { text:'复制', iconCls:'Pagecopy', handler:onMenuItemHandler},
                { text:'剪切', iconCls:'Cut', handler:onMenuItemHandler},
                { text:'粘贴', iconCls:'Pagepaste', handler:onMenuItemHandler}
            ]
        },{
            xtype:'menucheckitem',
            text:'全部打开',
            //handler:onCheckboxClick
            listeners:{
                'checkchange':onCheckboxClick
            }
        }],
        listeners:{
//          'beforehide':function(){
//              return false;//菜单长时间保持显示
//          }
        },
        floating:false
    });
       
    //menu2.render('container');
       
    var menu3 = new Ext.menu.Menu({
        items:[{
            text:'选择颜色',
            menu:{
                defaults:{
                    group:'color',
                    xtype:'menucheckitem'
                },
                items:[
                    { text:'蓝色' },
                    { text:'红色' },
                    { text:'绿色' }
                ]
            }
        }],
        listeners:{
            'beforehide':function(){
                return false;//菜单长时间保持显示
            }
        }
    });
    menu3.show('container');
});


知识共享许可协议
《ExtJS3 菜单与工具栏》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     142.06ms