在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>');
}
})