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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在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>');
}
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值