Ext4使用总结(八) Ext4使用Ext.view.View 做菜单的灵活布局

Ext4菜单布局实践

最新推荐文章于 2022-03-26 19:00:24 发布

最新推荐文章于 2022-03-26 19:00:24 发布 · 264 阅读

开发专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用Ext4中的Ext.view.View实现菜单的灵活布局，包括竖向布局和横向布局的具体实现方法。通过不同的状态展示菜单标识，并采用特定的模板进行渲染。

在Ext4中使用Ext.view.View,可以灵活地做菜单布局
1. 菜单的竖向布局，根据菜单的不同的状态显示不同的菜单的标识


   itemSelector: 'div',
    overItemCls: 'menu-list-item-hover',
    tpl:  new Ext.XTemplate(
        '<tpl for=".">',
        '{[this.renderItem(values)]}',
        '</tpl>',
          {
            renderItem: function (values) {
              if (values.state == 0) {
                 return '<div  class="menu-unreceive" >'+ values.menuName + '</div>';
                }
                if (values.state == 1) {
                 return '<div  class="menu-uncommit" >'+ values.menuName + '</div>';
                }
                if (values.state == 2) {
                 return '<div  class="menu-commit" >' + values.menuName + '</div>';
                }
            }
        })

2. 菜单的横向布局


    selModel: {
        mode: 'SINGLE'
    },
    listeners: {
        scope: this,
        single:true,
        viewready: function(view) {
            view.fireEvent('displayMenusForFirstStep',view);
        }
    },
    trackOver: true,
    itemSelector: 'li',
    tpl:  new Ext.XTemplate(
        '<div class="topmenu">[list]',
        '<tpl for=".">',
        '{[this.renderItem(step)]}',
        '</tpl>',
        '[/list]</div>',
        {
            renderItem: function (step) {
                return '<li class="li'.concat(step.sequence).concat('">[url=#]').concat(step.name).concat('[/url]</li>');
            }
        })