Ext.menu.Menu 个性化菜单栏

Ext提供了菜单组件Ext.menu.Menu。该组件相当于菜单项的容器,在菜单组件中可以配置多个菜单项。

 

下面是一个最简单的菜单栏:

<script type="text/javascript">
    Ext.onReady(function(){
      var tb = new Ext.Toolbar({
        width:300,
      });
      
      var fileMenu = new Ext.menu.Menu({
         shadow: 'frame',
         items : [
         {text:'新建'},
         {text:'打开'}
         ]
      });
      tb.add(
        {text:'文件',menu: fileMenu}
      );
      tb.render(Ext.getBody());
      });
</script>

 

显示为:

 点击文件,文打开2个选择按钮: 新建和打开。当然,你也可以配置多级菜单,下面是个二级菜单的例子:

 

 

<script type="text/javascript">
    Ext.onReady(function(){
      var tb = new Ext.Toolbar({
        width:300,
      });
      
      var fileMenu = new Ext.menu.Menu({
         shadow: 'frame',
         items : [
         {text:'新建',
         menu: new Ext.menu.Menu({
           items:[
           {text: 'XML'},
           {text: '视频文件'}
           ]
         })
         },
         {text:'打开'}
         ]
      });
      tb.add(
        {text:'文件',menu: fileMenu}
      );
      tb.render(Ext.getBody());
      });
</script>

 

显示为:

 Ext2还提供了Ext.menu.Adapter菜单项适配器,他可以将非菜单组件包装成一个菜单项,但是由于在Ext3中此功能被取消了,所以也不另外叙述了。

 最后我们来看一下菜单项的常用方法: