Ext4使用總結(八) 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>');
            }
        })