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中此功能被取消了,所以也不另外叙述了。

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

?

?