Ext.menu.Menu实例
1、
<head>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){
//工具条
var toolbar = new Ext.Toolbar({
renderTo:'toolbar',
width:500,
height:30
});
//添加菜单到工具条
toolbar.add(
{text:'新建'},
'-',
{text:'复制'},
'-',
{text:'黏贴'},
'-',
{text:'剪切'},
'-',
new Ext.form.TextField({
width:100
}),
'->',
document.getElementById('a'),
'-',
'菜单实例'
);
});
</script>
</head>
<body>
<div id="toolbar"></div>
<a href="http://www.baidu.com" id="a">百度</a>
</body>
2、
<head>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){
//工具条
var toolbar = new Ext.Toolbar({
renderTo:'toolbar',
width:window.screenX,
height:30
});
//文件菜单
var fileMenu = new Ext.menu.Menu({
//设置菜单四条边都有阴影
shadow : 'frame',
//添加菜单项
items:[
{
text:'新建',
handler:onMenuCheck
},
{
text:'打开',
handler:onMenuCheck
},
{
text:'保存',
handler:onMenuCheck
}
]
});
//编辑菜单
var editMenu = new Ext.menu.Menu({
shadow : 'frame',
items:[
{
text:'复制',
handler:onMenuCheck
},
{
text:'黏贴',
handler:onMenuCheck
},
{
text:'剪切',
handler:onMenuCheck
}
]
});
//添加菜单到工具条
toolbar.add(
{text:'文件',menu:fileMenu},
{text:'编辑',menu:editMenu}
);
//菜单项被点击时候的回调函数
function onMenuCheck(item){
alert(item.text);
}
});
</script>
</head>
<body>
<div id="toolbar"></div>
</body>
3、
<head>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
//工具条
var toolbar = new Ext.Toolbar({
renderTo:'toolbar',
width:window.screenX,
height:30
});
//文件菜单
var infoMenu = new Ext.menu.Menu({
//设置菜单四条边都有阴影
shadow : 'frame',
//添加菜单项
items:[
{
text:'个人信息',
menu:new Ext.menu.Menu({
items:[
{text:'身高',handler:onMenuCheck},
{text:'体重',handler:onMenuCheck},
{
text:'生日',
menu:new Ext.menu.DateMenu({
})
}
]
})
},
{
text:'公司信息',
handler:onMenuCheck
}
]
});
//添加菜单到工具条
toolbar.add(
{text:'信息',menu:infoMenu}
);
//菜单项被点击时候的回调函数
function onMenuCheck(item){
alert(item.text);
}
});
</script>
</head>
<body>
<div id="toolbar"></div>
</body>
4、
<head>
<STYLE TYPE="text/css">
.newIcon { background-image: url(images/new.gif) !important; }
.copyIcon { background-image: url(images/copy.gif) !important; }
.pasteIcon {background-image: url(images/paste.gif) !important; }
.cutIcon {background-image: url(images/cut.gif) !important; }
</STYLE>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){
//工具条
var toolbar = new Ext.Toolbar({
renderTo:'toolbar',
width:500,
height:30
});
//添加菜单到工具条
toolbar.add(
{text:'新建',iconCls:'newIcon'},
'-',
{text:'复制',iconCls:'copyIcon'},
'-',
{text:'黏贴',iconCls:'pasteIcon'},
'-',
{text:'剪切',iconCls:'cutIcon'},
'-',
new Ext.form.TextField({
width:100
}),
'->',
document.getElementById('a'),
'-',
'菜单实例'
);
});
</script>
</head>
<body>
<div id="toolbar"></div>
<a href="http://www.baidu.com" id="a">百度</a>
</body>