工具欄和選單條
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script typt="text/javascript" src="../ext/ext-all.js"></script>
<link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" href="../css/工具和選單條.css"/>
</head>
<body>
<div id="toolbar" ></div><!--工具欄-->
<input type="button" id="enable" value="啟用工具欄"/>
<input type="button" id="disable" value="禁用工具欄"/>
<script typt="text/javascript">
Ext.onReady(function(){
var tool=new Ext.toolbar.Toolbar({
renderTo:'toolbar',
width:500
});
tool.add([{
text:'新建檔案',
iconCls:'createFile',/*類樣式*/
handler:btnClick,
menu: new Ext.menu.Menu({
shadow:'drop',
items:[{
text:'新建World檔案',
menu:new Ext.menu.Menu({
shadow:'drop',
items:[{
text:'建立97-2003版本',
icon:'../image/tianjia.png',
menu:new Ext.menu.Menu({
shadow:'drop',
items:[{
text:'顏色選擇',
menu:new Ext.menu.ColorPicker()
},{
text:'日期選額',
menu:new Ext.menu.DatePicker()
}]
})
},{
text:'建立2008版本'
}]
})
},{
text:'新建Excel檔案'
},{
text:'新建PPT檔案'
}]
})
},{
text:'開啟檔案',
iconCls:'openFile',
handler:btnClick,
menu:new Ext.menu.Menu({
shadow:'drop',
items:[{
text:'開啟Word 檔案'
},{
text:'開啟Excel檔案'
},{
text:'開啟PPT檔案'
}]
})
},{
text:'儲存檔案',
iconCls:'saveFile',
handler:btnClick
},'-',{
xtype:'textfield',
hideLabel:true,
width:100
},'->','<a href="http://www.baidu.com">百度</a>','百度']);
function btnClick(btn){
/* alert(btn.text);*/
}
/*啟用和禁用工具欄*/
Ext.get("enable").on("click",function(){
tool.enable();
});
Ext.get("disable").on("click",function(){
tool.disable();
});
});
</script>
</body>
</html>