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

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

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

2. 菜单的横向布局

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