ExtJs4基础知识

一、基础知识

1、JAON对象的例子

Javascript代码 ​​​​ 

2. <script type="text/javascript">   
3.         var person  =  { //json对象定义开始   
4.             name:'tom',  //字符串   
5.             age:24,     //数字   
6.             sex:'man',   
7.             married:false,//布尔值   
8.             books:[     //数组，在数组中又嵌入了两个json对象   
9.                 {name:'历史',price:30},   
10.                 {name:'文学',price:25}   
11.             ]   
12.         }//json对象定义结束   
13.         //通过点号表示法来取得JSON对象的内部属性   
14.         alert(person.name + ' ' + person.age + ' ' + person.sex);   
15.         //通过中括号表示法来取得JSON对象的内部属性   
16.         //alert(person["name"] + ' ' + person["age"] + ' ' + person["sex"]);   
17.     </script>  

<script type="text/javascript">
    var person  =  { //json对象定义开始
      name:'tom',  //字符串
      age:24,     //数字
      sex:'man',
      married:false,//布尔值
      books:[     //数组，在数组中又嵌入了两个json对象
        {name:'历史',price:30},
        {name:'文学',price:25}
      ]
    }//json对象定义结束
    //通过点号表示法来取得JSON对象的内部属性
    alert(person.name + ' ' + person.age + ' ' + person.sex);
    //通过中括号表示法来取得JSON对象的内部属性
    //alert(person["name"] + ' ' + person["age"] + ' ' + person["sex"]);
  </script>

2、逗号分隔参数列表配置组件的例子

Javascript代码 ​​​​ 

2. Ext.Msg.alert('提示','逗号分隔参数列表');//这种配置方式非常常见  

Ext.Msg.alert('提示','逗号分隔参数列表');//这种配置方式非常常见

3、JSON对象配置组件的例子

Javascript代码 ​​​​ 

2. Ext.onReady(function(){   
3.         var config = {//定义配置对象   
4.             title:'case01',   
5.             msg: '我的配置很简单，不信来看看我的源代码吧！'  
6.         }   
7.         Ext.Msg.show(config);//将配置对象传入方法中   
8.       });  

Ext.onReady(function(){
    var config = {//定义配置对象
      title:'case01',
      msg: '我的配置很简单，不信来看看我的源代码吧！'
    }
    Ext.Msg.show(config);//将配置对象传入方法中
    });

4、支持HTML格式化的Extjs信息提示框的例子

Javascript代码 ​​​​ 

2. Ext.onReady(function(){   
3.         Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');   
4.     });  

Ext.onReady(function(){
    Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');
  });

5、Ext.MessageBox的各种不同用法相关

Javascript代码 ​​​​ 

2. Ext.onReady(function(){   
3.         //Ext.MessageBox.alert('提示','请单击我，确定',callBack);   
4.                 Ext.MessageBox.show({   
5.            title: '提示',   
6.                      msg: '请单击我，确定',   
7.                      buttons: Ext.MessageBox.OKCANCEL,   
8.                      fn: callBack   
9.         });   
10.         function callBack(id){   
11.             alert('单击的按钮ID是：'+id);   
12.         }  

Ext.onReady(function(){
    //Ext.MessageBox.alert('提示','请单击我，确定',callBack);
                Ext.MessageBox.show({
       title: '提示',
                     msg: '请单击我，确定',
                     buttons: Ext.MessageBox.OKCANCEL,
                     fn: callBack
    });
    function callBack(id){
      alert('单击的按钮ID是：'+id);
    }

Javascript代码 ​​​​ 

2. Ext.onReady(function(){   
3.         Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);   
4.         function callBack(id){   
5.             alert('单击的按钮ID是：'+id);   
6.         }   
7.     });  

Ext.onReady(function(){
    Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);
    function callBack(id){
      alert('单击的按钮ID是：'+id);
    }
  });

Javascript代码 ​​​​ 

2. Ext.onReady(function(){   
3.         Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");   
4.         function callBack(id,msg){   
5.             alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);   
6.         }   
7.       });  

Ext.onReady(function(){
    Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");
    function callBack(id,msg){
      alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
    }
    });

Javascript代码 ​​​​ 

2. Ext.MessageBox.show({   
3.             title:'提示',   
4.             msg:'我有三个按钮，和一个多行文本区。',   
5.             modal:true,   
6.             prompt:true,   
7.             value:'请输入',   
8.             fn:callBack,   
9.             buttons:Ext.Msg.YESNOCANCEL,   
10.             icon:Ext.Msg.QUESTION     
11.         })   
12.         function callBack(id,msg){   
13.             alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);   
14.         }  

Ext.MessageBox.show({
      title:'提示',
      msg:'我有三个按钮，和一个多行文本区。',
      modal:true,
      prompt:true,
      value:'请输入',
      fn:callBack,
      buttons:Ext.Msg.YESNOCANCEL,
      icon:Ext.Msg.QUESTION  
    })
    function callBack(id,msg){
      alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
    }

Javascript代码 ​​​​ 

2. //'ok'   
3.         Ext.MessageBox.msgButtons[0].setText('确定');   
4.         //'yes'   
5.         Ext.MessageBox.msgButtons[1].setText('是');   
6.         //'no'   
7.         Ext.MessageBox.msgButtons[2].setText('否');   
8.         //'cancel'   
9.         Ext.MessageBox.msgButtons[3].setText('取消');   
10.            
11.         Ext.MessageBox.show({   
12.             title:'提示',   
13.             msg:'自定义按钮文字',   
14.             modal:true,   
15.             buttons:Ext.Msg.YESNOCANCEL   
16.         });  

//'ok'
    Ext.MessageBox.msgButtons[0].setText('确定');
    //'yes'
    Ext.MessageBox.msgButtons[1].setText('是');
    //'no'
    Ext.MessageBox.msgButtons[2].setText('否');
    //'cancel'
    Ext.MessageBox.msgButtons[3].setText('取消');

    Ext.MessageBox.show({
      title:'提示',
      msg:'自定义按钮文字',
      modal:true,
      buttons:Ext.Msg.YESNOCANCEL
    });

Javascript代码 ​​​​ 

2. //多次设置信息提示框按钮文字//'ok'   
3.         Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置   
4.         Ext.MessageBox.alert('提示','提示信息一',function(){   
5.             Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置   
6.             Ext.MessageBox.alert('提示','提示信息二');   
7.         });  

//多次设置信息提示框按钮文字//'ok'
    Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置
    Ext.MessageBox.alert('提示','提示信息一',function(){
      Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置
      Ext.MessageBox.alert('提示','提示信息二');
    });

Javascript代码 ​​​​ 

2. //通过调用updateText方法定时更新提示信息   
3.         var msgBox = Ext.MessageBox.show({   
4.             title:'提示',   
5.             msg:'动态跟新的信息文字',   
6.             modal:true,   
7.             buttons:Ext.Msg.OK,   
8.             fn:function(){   
9.                 //停止定时任务   
10.                 Ext.TaskManager.stop(task);   
11.             }   
12.         })   
13.         //Ext.TaskManager是一个功能类，用来定时执行程序，   
14.         //在这里我们使用它来定时触发提示信息的更新。   
15.         var task = {   
16.             run:function(){   
17.                 msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));   
18.             },   
19.             interval:1000   
20.         }   
21.         Ext.TaskManager.start(task);  

//通过调用updateText方法定时更新提示信息
    var msgBox = Ext.MessageBox.show({
      title:'提示',
      msg:'动态跟新的信息文字',
      modal:true,
      buttons:Ext.Msg.OK,
      fn:function(){
        //停止定时任务
        Ext.TaskManager.stop(task);
      }
    })
    //Ext.TaskManager是一个功能类，用来定时执行程序，
    //在这里我们使用它来定时触发提示信息的更新。
    var task = {
      run:function(){
        msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
      },
      interval:1000
    }
    Ext.TaskManager.start(task);

Javascript代码 ​​​​ 

2. //通过调用updateProgress方法同时更新提示信息和进度条   
3.         var msgBox = Ext.MessageBox.show({   
4.             title:'提示',   
5.             msg:'动态跟新的进度条和信息文字',   
6.             modal:true,   
7.             width:300,   
8.             progress:true  
9.         })   
10.   
11.         var count = 0;//滚动条被刷新的次数   
12.         var percentage = 0;//进度百分比   
13.         var progressText = '';//进度条信息   
14.   
15.         var task = {   
16.             run:function(){   
17.                 count++;   
18.                 //计算进度   
19.                 percentage = count/10;   
20.                 //生成进度条文字   
21.                 progressText = '当前完成度：'+percentage*100 + "%";   
22.                 //更新信息提示对话框   
23.                 msgBox.updateProgress(percentage,progressText,   
24.                     '当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));   
25.                 //刷新10次后关闭信息提示对话框   
26.                 if(count > 10){   
27.                     Ext.TaskManager.stop(task);   
28.                     msgBox.hide();   
29.                 }   
30.                    
31.             },   
32.             interval:1000   
33.         }   
34.   
35.         Ext.TaskManager.start(task);  

//通过调用updateProgress方法同时更新提示信息和进度条
    var msgBox = Ext.MessageBox.show({
      title:'提示',
      msg:'动态跟新的进度条和信息文字',
      modal:true,
      width:300,
      progress:true
    })

    var count = 0;//滚动条被刷新的次数
    var percentage = 0;//进度百分比
    var progressText = '';//进度条信息

    var task = {
      run:function(){
        count++;
        //计算进度
        percentage = count/10;
        //生成进度条文字
        progressText = '当前完成度：'+percentage*100 + "%";
        //更新信息提示对话框
        msgBox.updateProgress(percentage,progressText,
          '当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
        //刷新10次后关闭信息提示对话框
        if(count > 10){
          Ext.TaskManager.stop(task);
          msgBox.hide();
        }

      },
      interval:1000
    }

    Ext.TaskManager.start(task);

Javascript代码 ​​​​ 

2. //等待提示框会显示一个自动更新的进度条   
3. Ext.MessageBox.wait('请等待，操作需要很长时间！','提示',{   
4.             text : '进度条上的文字'  
5.         });  

//等待提示框会显示一个自动更新的进度条
Ext.MessageBox.wait('请等待，操作需要很长时间！','提示',{
      text : '进度条上的文字'
    });

6、进度条的使用

Javascript代码 ​​​​ 

2. //手动模式的进度条   
3. var ProgressBar = new Ext.ProgressBar({   
4.             width:300,//设定进度条的宽度   
5.             renderTo:'ProgressBar'  
6.         });   
7.         var count = 0;//滚动条被刷新的次数   
8.         var percentage = 0;//进度百分比   
9.         var progressText = '';//进度条信息   
10.   
11.         Ext.TaskManager.start({   
12.             run:function(){   
13.                 count++;   
14.                 //刷新10次后关闭信息提示对话框   
15.                 if(count > 10){   
16.                     ProgressBar.hide();   
17.                 }   
18.                 //计算进度   
19.                 percentage = count/10;   
20.                 progressText = percentage * 100 + '%'  
21.                 //更新信息提示对话框   
22.                 ProgressBar.updateProgress(percentage,progressText,true);   
23.             },   
24.             interval:1000,//设置时间间隔   
25.             repeat : 6//设置执行次数   
26.         });  

//手动模式的进度条
var ProgressBar = new Ext.ProgressBar({
      width:300,//设定进度条的宽度
      renderTo:'ProgressBar'
    });
    var count = 0;//滚动条被刷新的次数
    var percentage = 0;//进度百分比
    var progressText = '';//进度条信息

    Ext.TaskManager.start({
      run:function(){
        count++;
        //刷新10次后关闭信息提示对话框
        if(count > 10){
          ProgressBar.hide();
        }
        //计算进度
        percentage = count/10;
        progressText = percentage * 100 + '%'
        //更新信息提示对话框
        ProgressBar.updateProgress(percentage,progressText,true);
      },
      interval:1000,//设置时间间隔
      repeat : 6//设置执行次数
    });

 

Javascript代码 ​​​​ 

2. //自动模式的进度条   
3.         var ProgressBar = new Ext.ProgressBar({   
4.             width:300,//设定进度条的宽度   
5.             renderTo:'ProgressBar'  
6.         });   
7.         ProgressBar.wait({   
8.             duration:10000,//进度条持续更新10秒钟   
9.             interval:1000,//每1秒钟更新一次   
10.             increment:10,//进度条分10次更新完毕   
11.             scope:this,//回调函数的执行范围   
12.             text : 'waiting',//进度条上的文字   
13.             fn:function(){//更新完成后调用的回调函数   
14.                 alert('更新完毕');   
15.             }   
16.         });  

//自动模式的进度条
    var ProgressBar = new Ext.ProgressBar({
      width:300,//设定进度条的宽度
      renderTo:'ProgressBar'
    });
    ProgressBar.wait({
      duration:10000,//进度条持续更新10秒钟
      interval:1000,//每1秒钟更新一次
      increment:10,//进度条分10次更新完毕
      scope:this,//回调函数的执行范围
      text : 'waiting',//进度条上的文字
      fn:function(){//更新完成后调用的回调函数
        alert('更新完毕');
      }
    });

Css代码 ​​​​ 

2. <STYLE TYPE="text/css">   
3.     .custom .x-progress-inner {   
4.         height:17px;   
5.         background: #fff;   
6.     }   
7.     .custom .x-progress-bar {   
8.         height:15px;   
9.         background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;   
10.         border-top:1px solid #BEBEBE;   
11.         border-bottom:1px solid #EFEFEF;   
12.         border-right:0;   
13.     }      
14.   </STYLE>  

<STYLE TYPE="text/css">
    .custom .x-progress-inner {
    height:17px;
    background: #fff;
  }
  .custom .x-progress-bar {
    height:15px;
    background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;
    border-top:1px solid #BEBEBE;
    border-bottom:1px solid #EFEFEF;
    border-right:0;
  } 
  </STYLE>

Javascript代码 ​​​​ 

2. //自定义样式的进度条样式   
3.         var ProgressBar = new Ext.ProgressBar({   
4.             width:300,//设定进度条的宽度   
5.             renderTo:'ProgressBar',   
6.             cls:'custom'//使用自定义样式   
7.         });   
8.         ProgressBar.wait({   
9.             duration:10000,//进度条持续更新10秒钟   
10.             interval:1000,//每1秒钟更新一次   
11.             increment:10//进度条分10次更新完毕   
12.         });  

//自定义样式的进度条样式
    var ProgressBar = new Ext.ProgressBar({
      width:300,//设定进度条的宽度
      renderTo:'ProgressBar',
      cls:'custom'//使用自定义样式
    });
    ProgressBar.wait({
      duration:10000,//进度条持续更新10秒钟
      interval:1000,//每1秒钟更新一次
      increment:10//进度条分10次更新完毕
    });

7、工具栏、菜单栏相关

Javascript代码 ​​​​ 

2. //简单的工具栏   
3.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
4.             renderTo:'toolbar',   
5.             width:300   
6.         });   
7.   
8.         toolbar.add([//向工具栏中添加按钮   
9.             {   
10.                 text:'新建',//按钮上显示的文字   
11.                 handler:onButtonClick,//点击按钮的处理函数   
12.                 iconCls:'newIcon'//在按钮上显示的图标   
13.             },   
14.             {text:'打开',handler:onButtonClick,iconCls:'openIcon'},   
15.             {text:'保存',handler:onButtonClick,iconCls:'saveIcon'}   
16.         ]);   
17.   
18.         function onButtonClick(btn){//点击按钮时调用的处理函数   
19.             alert(btn.text);//取得按钮上的文字   
20.         }  

//简单的工具栏
    var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
      renderTo:'toolbar',
      width:300
    });

    toolbar.add([//向工具栏中添加按钮
      {
        text:'新建',//按钮上显示的文字
        handler:onButtonClick,//点击按钮的处理函数
        iconCls:'newIcon'//在按钮上显示的图标
      },
      {text:'打开',handler:onButtonClick,iconCls:'openIcon'},
      {text:'保存',handler:onButtonClick,iconCls:'saveIcon'}
    ]);

    function onButtonClick(btn){//点击按钮时调用的处理函数
      alert(btn.text);//取得按钮上的文字
    }

 

Javascript代码 ​​​​ 

2. //使用add方法加入多种元素的复杂工具栏   
3.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
4.             renderTo:'toolbar',   
5.             width:500   
6.         });   
7.         toolbar.add(   
8.             {text:'新建'},{text:'打开'},   
9.             {text:'编辑'},{text:'保存'}, //加入按钮   
10.             '-',                          //加入工具栏分隔符   
11.             {     //加入表单元素   
12.                 xtype:'textfield',   
13.                 hideLabel : true,   
14.                 width:150   
15.             },   
16.             '->',                        //加入一个充满工具栏的空白元素   
17.             '<a href=#>超连接</div>',    //加入一个Element元素   
18.             {xtype: 'tbspacer', width: 50},//加入一个空白元素，宽度为50像素   
19.             '静态文本'                   //加入一个简单字符串   
20.         );  

//使用add方法加入多种元素的复杂工具栏
    var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
      renderTo:'toolbar',
      width:500
    });
    toolbar.add(
      {text:'新建'},{text:'打开'},
      {text:'编辑'},{text:'保存'}, //加入按钮
      '-',                          //加入工具栏分隔符
      {     //加入表单元素
        xtype:'textfield',
        hideLabel : true,
        width:150
      },
      '->',                        //加入一个充满工具栏的空白元素
      '<a href=#>超连接</div>',    //加入一个Element元素
      {xtype: 'tbspacer', width: 50},//加入一个空白元素，宽度为50像素
      '静态文本'                   //加入一个简单字符串
    );

 

Html代码 ​​​​ 

2. <HTML>  
3.  <HEAD>  
4.   <TITLE>启用和禁用工具栏</TITLE>  
5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
6.   <link rel="stylesheet" type="text/css" href="javascript:void(0)" />  
7.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
8.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>  
9.   <script type="text/javascript">  
10.     Ext.onReady(function(){   
11.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
12.             renderTo:'toolbar',   
13.             width:200,   
14.             items :[{   
15.                 text:'新建',//按钮上显示的文字   
16.                 handler:onButtonClick//点击按钮的处理函数   
17.             },   
18.             {text:'打开',handler:onButtonClick},   
19.             {text:'保存',handler:onButtonClick}]   
20.         });   
21.   
22.         function onButtonClick(btn){//点击按钮时调用的处理函数   
23.             alert(btn.text);//取得按钮上的文字   
24.         }   
25.            
26.         Ext.get('enabledBtn').on('click',function(){   
27.             //启用工具栏   
28.             toolbar.enable();   
29.         });   
30.         Ext.get('disabledBtn').on('click',function(){   
31.             //禁用工具栏   
32.             toolbar.disable();   
33.         });   
34.     });   
35.   </script>  
36.  </HEAD>  
37.  <BODY STYLE="margin: 10px">  
38.     <div id='toolbar'></div>  
39.     <input type=button value='启用工具栏' id='enabledBtn'>  
40.     <input type=button value='禁用工具栏' id='disabledBtn'>  
41.  </BODY>  
42. </HTML>  

<HTML>
 <HEAD>
  <TITLE>启用和禁用工具栏</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="javascript:void(0)" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
    var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
      renderTo:'toolbar',
      width:200,
      items :[{
        text:'新建',//按钮上显示的文字
        handler:onButtonClick//点击按钮的处理函数
      },
      {text:'打开',handler:onButtonClick},
      {text:'保存',handler:onButtonClick}]
    });

    function onButtonClick(btn){//点击按钮时调用的处理函数
      alert(btn.text);//取得按钮上的文字
    }

    Ext.get('enabledBtn').on('click',function(){
      //启用工具栏
      toolbar.enable();
    });
    Ext.get('disabledBtn').on('click',function(){
      //禁用工具栏
      toolbar.disable();
    });
  });
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
  <div id='toolbar'></div>
  <input type=button value='启用工具栏' id='enabledBtn'>
  <input type=button value='禁用工具栏' id='disabledBtn'>
 </BODY>
</HTML>

 

Html代码 ​​​​ 

2. <HTML>  
3.  <HEAD>  
4.   <TITLE>简单的菜单栏</TITLE>  
5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
6.   <link rel="stylesheet" type="text/css" href="javascript:void(0)" />  
7.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
8.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>  
9.   <script type="text/javascript">  
10.     Ext.onReady(function(){   
11.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
12.             renderTo:'toolbar',   
13.             width:300   
14.         });   
15.         var fileMenu = new Ext.menu.Menu({//文件创建菜单   
16.             shadow : 'frame',//设置菜单四条边都有阴影   
17.             allowOtherMenus : true,   
18.             items : [   
19.                 new Ext.menu.Item({   
20.                     text: '新建',//菜单项名称   
21.                     menuHideDelay:1000,   
22.                     handler:onMenuItem//菜单项处理函数   
23.                 }),//添加菜单项   
24.                 {text: '打开',handler:onMenuItem},   
25.                 {text: '关闭',handler:onMenuItem}   
26.             ]   
27.         });   
28.         var editMenu = new Ext.menu.Menu({//编辑创建菜单   
29.             shadow : 'drop',//设置菜单在右下两条边有阴影   
30.             allowOtherMenus : true,   
31.             items : [   
32.                 {text: '复制',handler:onMenuItem},//添加菜单项   
33.                 {text: '粘贴',handler:onMenuItem},   
34.                 {text: '剪切',handler:onMenuItem}   
35.             ]   
36.         });   
37.         toolbar.add(   
38.             {text : '文件',   menu : fileMenu},//将菜单加入工具栏   
39.             {text : '编辑',   menu : editMenu}   
40.         );   
41.         function onMenuItem(item){//菜单项的回调方法   
42.             alert(item.text);//取得菜单项的text属性   
43.         }   
44.     });   
45.   </script>  
46.  </HEAD>  
47.  <BODY STYLE="margin: 10px">  
48.     <div id='toolbar'></div>  
49.  </BODY>  
50. </HTML>  

<HTML>
 <HEAD>
  <TITLE>简单的菜单栏</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="javascript:void(0)" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
    var toolbar = new Ext.toolbar.Toolbar({//创建工具栏
      renderTo:'toolbar',
      width:300
    });
    var fileMenu = new Ext.menu.Menu({//文件创建菜单
      shadow : 'frame',//设置菜单四条边都有阴影
      allowOtherMenus : true,
      items : [
        new Ext.menu.Item({
          text: '新建',//菜单项名称
          menuHideDelay:1000,
          handler:onMenuItem//菜单项处理函数
        }),//添加菜单项
        {text: '打开',handler:onMenuItem},
        {text: '关闭',handler:onMenuItem}
      ]
    });
    var editMenu = new Ext.menu.Menu({//编辑创建菜单
      shadow : 'drop',//设置菜单在右下两条边有阴影
      allowOtherMenus : true,
      items : [
        {text: '复制',handler:onMenuItem},//添加菜单项
        {text: '粘贴',handler:onMenuItem},
        {text: '剪切',handler:onMenuItem}
      ]
    });
    toolbar.add(
      {text : '文件', menu : fileMenu},//将菜单加入工具栏
      {text : '编辑', menu : editMenu}
    );
    function onMenuItem(item){//菜单项的回调方法
      alert(item.text);//取得菜单项的text属性
    }
  });
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
  <div id='toolbar'></div>
 </BODY>
</HTML>

 

Html代码 ​​​​ 

2. <HTML>  
3.  <HEAD>  
4.   <TITLE>多级菜单栏</TITLE>  
5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
6.   <link rel="stylesheet" type="text/css" href="javascript:void(0)" />  
7.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
8.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>  
9.   <script type="text/javascript">  
10.     Ext.onReady(function(){   
11.         var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
12.             renderTo:'toolbar',   
13.             width:300   
14.         });   
15.         var infoMenu = new Ext.menu.Menu({//一级菜单   
16.             ignoreParentClicks : true,//忽略父菜单的单击事件   
17.             plain : true,   
18.             items : [   
19.                 {   
20.                     text: '个人信息',   
21.                     menu: new Ext.menu.Menu({//二级菜单   
22.                         ignoreParentClicks : true,//忽略父菜单的单击事件   
23.                         items:[   
24.                             {   
25.                                 text: '基本信息',   
26.                                 menu : new Ext.menu.Menu({//三级菜单   
27.                                     items:[   
28.                                         {text: '身高',handler:onMenuItem},   
29.                                         {text: '体重',handler:onMenuItem}   
30.                                     ]   
31.                             })}   
32.                         ]   
33.                     })   
34.                 },//添加菜单项   
35.                 {text: '公司信息'}   
36.             ]   
37.         });   
38.         Toolbar.add(   
39.             {text : '设置',   menu : infoMenu}//将菜单加入工具栏   
40.         );   
41.         function onMenuItem(item){//选择菜单项的处理函数   
42.             alert(item.text);//取得菜单项的text属性   
43.         }   
44.     });   
45.   </script>  
46.  </HEAD>  
47.  <BODY STYLE="margin: 10px">  
48.     <div id='toolbar'></div>  
49.  </BODY>  
50. </HTML>  

<HTML>
 <HEAD>
  <TITLE>多级菜单栏</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="javascript:void(0)" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
    var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏
      renderTo:'toolbar',
      width:300
    });
    var infoMenu = new Ext.menu.Menu({//一级菜单
      ignoreParentClicks : true,//忽略父菜单的单击事件
      plain : true,
      items : [
        {
          text: '个人信息',
          menu: new Ext.menu.Menu({//二级菜单
            ignoreParentClicks : true,//忽略父菜单的单击事件
            items:[
              {
                text: '基本信息',
                menu : new Ext.menu.Menu({//三级菜单
                  items:[
                    {text: '身高',handler:onMenuItem},
                    {text: '体重',handler:onMenuItem}
                  ]
              })}
            ]
          })
        },//添加菜单项
        {text: '公司信息'}
      ]
    });
    Toolbar.add(
      {text : '设置', menu : infoMenu}//将菜单加入工具栏
    );
    function onMenuItem(item){//选择菜单项的处理函数
      alert(item.text);//取得菜单项的text属性
    }
  });
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
  <div id='toolbar'></div>
 </BODY>
</HTML>

 

Html代码 ​​​​ 

2. <HTML>  
3.  <HEAD>  
4.   <TITLE>将更多组件加入菜单</TITLE>  
5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
6.   <link rel="stylesheet" type="text/css" href="javascript:void(0)" />  
7.   <STYLE TYPE="text/css">  
8.     .userManagerIcon { background-image: url(images/userManager.gif) !important; }   
9.     .newIcon { background-image: url(images/new.gif) !important; }   
10.     .openIcon { background-image: url(images/open.gif) !important; }   
11.     .saveIcon { background-image: url(images/save.gif) !important; }   
12.   </STYLE>  
13.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
14.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>  
15.   <script type="text/javascript">  
16.     Ext.onReady(function(){   
17.   
18.         var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
19.             renderTo:'toolbar',   
20.             width:300   
21.         });   
22.   
23.         var fileMenu = new Ext.menu.Menu({//文件创建菜单   
24.             items : [{   
25.                     xtype : 'textfield',//创建表单字段   
26.                     hideLabel: true,   
27.                     width : 100   
28.                 },{   
29.                     text:"颜色选择",    
30.                     menu : new Ext.menu.ColorPicker()   
31.                 },   
32.                 {xtype: 'datepicker'},//添加日期选择器组件   
33.                 {   
34.                     xtype: 'buttongroup',//添加按钮组组件   
35.                     columns: 3,   
36.                     title: '按钮组',   
37.                     items: [{   
38.                         text: '用户管理',   
39.                         scale: 'large',   
40.                         colspan : 3,   
41.                         width : 170,   
42.                         iconCls: 'userManagerIcon',   
43.                         iconAlign: 'top'   
44.                     },{   
45.                         text: '新建', iconCls: 'newIcon'   
46.                     },{   
47.                         text: '打开', iconCls: 'openIcon'   
48.                     },{   
49.                         text: '保存', iconCls: 'saveIcon'   
50.                     }]   
51.                 }   
52.             ]   
53.         });   
54.   
55.         Toolbar.add(   
56.             {text : '文件',   menu : fileMenu}//将菜单加入工具栏   
57.         );   
58.     });   
59.   </script>  
60.  </HEAD>  
61.  <BODY STYLE="margin: 10px">  
62.     <div id='toolbar'></div>  
63.  </BODY>  
64. </HTML>  

<HTML>
 <HEAD>
  <TITLE>将更多组件加入菜单</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="javascript:void(0)" />
  <STYLE TYPE="text/css">
    .userManagerIcon { background-image: url(images/userManager.gif) !important; }
  .newIcon { background-image: url(images/new.gif) !important; }
  .openIcon { background-image: url(images/open.gif) !important; }
  .saveIcon { background-image: url(images/save.gif) !important; }
  </STYLE>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){

    var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏
      renderTo:'toolbar',
      width:300
    });

    var fileMenu = new Ext.menu.Menu({//文件创建菜单
      items : [{
          xtype : 'textfield',//创建表单字段
          hideLabel: true,
          width : 100
        },{
          text:"颜色选择", 
          menu : new Ext.menu.ColorPicker()
        },
        {xtype: 'datepicker'},//添加日期选择器组件
        {
          xtype: 'buttongroup',//添加按钮组组件
          columns: 3,
          title: '按钮组',
          items: [{
            text: '用户管理',
            scale: 'large',
            colspan : 3,
            width : 170,
            iconCls: 'userManagerIcon',
            iconAlign: 'top'
          },{
            text: '新建', iconCls: 'newIcon'
          },{
            text: '打开', iconCls: 'openIcon'
          },{
            text: '保存', iconCls: 'saveIcon'
          }]
        }
      ]
    });

    Toolbar.add(
      {text : '文件', menu : fileMenu}//将菜单加入工具栏
    );
  });
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
  <div id='toolbar'></div>
 </BODY>
</HTML>

 

Html代码 ​​​​ 

2. <HTML>  
3.  <HEAD>  
4.   <TITLE>具有选择框的菜单</TITLE>  
5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
6.   <link rel="stylesheet" type="text/css" href="javascript:void(0)" />  
7.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
8.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>  
9.   <script type="text/javascript">  
10.     Ext.onReady(function(){   
11.   
12.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏   
13.             renderTo:'toolbar',   
14.             width:300   
15.         });   
16.         var themeMenu = new Ext.menu.Menu({//文件创建菜单   
17.             items : [{   
18.                 text:'主题颜色',   
19.                 menu:new Ext.menu.Menu({   
20.                     items:[{   
21.                         text: '红色主题',   
22.                         checked: true,//初始为选中状态   
23.                         group: 'theme',//为单选项进行分组   
24.                         checkHandler: onItemCheck   
25.                     },{   
26.                         text: '蓝色主题',   
27.                         checked: false,//初始为未选中状态   
28.                         group: 'theme',   
29.                         checkHandler: onItemCheck   
30.                     },{   
31.                         text: '黑色主题',   
32.                         checked: false,   
33.                         group: 'theme',   
34.                         checkHandler: onItemCheck   
35.                     }]   
36.                 })   
37.             },{   
38.                 text:'是否启用',   
39.                 checked : false   
40.             }]   
41.         });   
42.   
43.         toolbar.add(   
44.             {text : '风格选择', menu : themeMenu}//将菜单加入工具栏   
45.         );   
46.         function onItemCheck(item){//菜单项的回调方法   
47.             alert(item.text);//取得菜单项的text属性   
48.         }   
49.     });   
50.   </script>  
51.  </HEAD>  
52.  <BODY STYLE="margin: 10px">  
53.     <div id='toolbar'></div>  
54.  </BODY>  
55. </HTML>