首页>>图形网页>>EXTJS 实现标题栏弹出菜单代码
EXTJS 实现标题栏弹出菜单代码
来源: 时间: 2015-03-27 20:58:48

Ext.onReady(function(){
 Ext.BLANK_IMAGE_URL="../resources/images/default/s.gif";  // Ext的一个占位图
 var Toolbar = new Ext.Toolbar({
  applyTo:"toolbar",
  width:300
 });
 //创建菜单
 var fileMenu = new Ext.menu.Menu({
  shadow:"frame",//设置菜单四边都有阴影,(sides:阴影位置:左右下,drop:阴影位置:右下)默认为:sides
  items:[
   {text:"新建",handler:onMenuItem}, //添加菜单项
   {text:"打开",handler:onMenuItem},
   {text:"保存",handler:onMenuItem}
  ]
 });
 //创建菜单
 var editMenu = new Ext.menu.Menu({
  shadow:"drop",
  items:[
   {text:"复制",handler:onMenuItem}, //添加菜单项
   {text:"粘贴",handler:onMenuItem},
   {text:"剪切",handler:onMenuItem}
  ]
 });
 Toolbar.add(
  {text:"文件", menu:fileMenu},//将菜单加入工具栏
  {text:"编辑", menu:editMenu}
 );
 function onMenuItem(item){
  alert(item.text);
 }
});
运行看一下效果吧!



创建二级或多级菜单:
Ext.onReady(function(){
 Ext.BLANK_IMAGE_URL="../resources/images/default/s.gif";
 var toolbar = new Ext.Toolbar({
  applyTo:"toolbar",
  width : 300
 });
 
 var infoMenu = new Ext.menu.Menu({  // 一级菜单
  items:[{
    text:"个人信息",
    menu:new Ext.menu.Menu({     //二级菜单
     items:[{text:"身高",handler:onMenuItem},
         {text:"体重",handler:onMenuItem},
         {
          text:"日期",
          menu:new Ext.menu.DateMenu({  //三级菜单
           handler:onClickDate
          })
         }]
    })
   },{text:"公司信息"}
  ]
 });
 toolbar.add({
  text:"设置",
  menu:infoMenu
 });
 function onClickDate(dm,date){
  alert(date.format("y-m-j"));
 }
 function onMenuItem(item){
  alert(item.text);
 }
});

本页地址:http://www.easytd.com/tuxingwangye/d_15032720343.html

上一篇:Javascript常用的验证邮箱和QQ的正则表达式 下一篇:Javascript对象序列化JSON.stringify的使用