<1>簡單工具條
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function()
{
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add(
{
text:'新建',
handler:function(){
Ext.Msg.alert('提示','新建');
}
},
{
text:'修改',
handler:function(){
Ext.Msg.alert('提示','修改');
}
},
{
text:'刪除',
handler:function(){
Ext.Msg.alert('提示','刪除');
}
},
{
text:'顯示',
handler:function(){
Ext.Msg.alert('提示','顯示');
}
}
);
tb.doLayout();
}
);
</script>
</head>
<body>
<div id = "toolbar">
</div>
</body>
</html>
<2>簡單菜單
Ext.onReady(function()
{
//工具條
var tb = new Ext.Toolbar();
tb.render('toolbar');
//菜單
var fileMenu = new Ext.menu.Menu();
fileMenu.add({text:'新建'});
fileMenu.add('-');
fileMenu.add({text:'打開'});
fileMenu.add('-');
fileMenu.add({text:'保存'});
fileMenu.add('-');
fileMenu.add({text:'關閉'});
//爲工具條添加按鈕
tb.add(
{
text:'文件',
menu:fileMenu
}
);
tb.doLayout();
}
);
另一種寫法：
Ext.onReady(function(){
// 創建工具條
var tb = new Ext.Toolbar();
tb.render('toolbar');
var menu1 = new Ext.menu.Menu({
items: [
{text: '新建'},
{text: '打開'},
{text: '關閉'}
]
});
var menu2 = new Ext.menu.Menu({
items: [
{text: '複製'},
{text: '剪切'},
{text: '撤銷'}
]
});
var menu3 = new Ext.menu.Menu({
items: [
{text: 'HTML'},
{text: 'Java'},
{text: 'c++'}
]
});
// 爲工具條添加4個按鈕
tb.add(
{
text: '文件',
menu: menu1
},
{
text: '編輯',
menu: menu2
},
{
text: '語言',
menu: menu3
}
);
tb.doLayout();
});
<3>多級菜單
Ext.onReady(function(){
// 創建工具條
var tb = new Ext.Toolbar();
tb.render('toolbar');
var menuHistory = new Ext.menu.Menu(
{
items:[
{text:'今天'},
{text:'昨天'},
{text:'一週'},
{text:'一月'},
]
}
);
var menu1 = new Ext.menu.Menu({
items: [
{text: '新建'},
{text: '打開'},
{text:'歷史',menu:menuHistory},//嵌套子菜單
{text: '關閉'}
]
});
var menu2 = new Ext.menu.Menu({
items: [
{text: '複製'},
{text: '剪切'},
{text: '撤銷'}
]
});
var menu3 = new Ext.menu.Menu({
items: [
{text: 'HTML'},
{text: 'Java'},
{text: 'c++'}
]
});
// 爲工具條添加4個按鈕
tb.add(
{
text: '文件',
menu: menu1
},
{
text: '編輯',
menu: menu2
},
{
text: '語言',
menu: menu3
}
);
tb.doLayout();
});
<4>多選菜單和單選菜單
Ext.onReady(function(){
// 創建工具條
var tb = new Ext.Toolbar();
tb.render('toolbar');
var checkItem1 = new Ext.menu.CheckItem(
{
text:'粗體',
checked:'true',
checkHandler:function(item,checked){
Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '粗體');
}
}
);
var checkItem2 = new Ext.menu.CheckItem(
{
text:'斜體',
checkHandler:function(item,checked){
Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '斜體');
}
}
);
//字形菜單
var menu1 = new Ext.menu.Menu(
{
items:[
checkItem1,
checkItem2
]
}
);
//字體菜單
var radioItem1 = new Ext.menu.CheckItem(
{
text:'宋體',
group:'font',
checked:'true',
checkHandler:function(item,checked){
Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '宋體');
}
}
);
var radioItem2 = new Ext.menu.CheckItem(
{
text:'楷體',
group:'font',
checkHandler:function(item,checked){
Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '楷體');
}
}
);
var radioItem3 = new Ext.menu.CheckItem(
{
text:'黑體',
group:'font',
checkHandler:function(item,checked){
Ext.Msg.alert('多選', (checked ? '選中' : '取消') + '黑體');
}
}
);
var menu2 = new Ext.menu.Menu(
{
items:[
radioItem1,
radioItem2,
radioItem3
]
}
);
// 爲工具條添加4個按鈕
tb.add(
{
text: '字形',
menu: menu1
},
{
text: '字體',
menu: menu2
}
);
tb.doLayout();
});
<5>Tab標籤
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>TabPanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var i = 4 ;
//注意:每個Tab標籤只渲染一次
var tabs = new Ext.TabPanel({
renderTo: Ext.getBody(),//綁定在body標籤上
activeTab: 0,//初始顯示第幾個Tab頁
deferredRender: false,//是否在顯示每個標籤的時候再渲染標籤中的內容.默認true
tabPosition: 'top',//表示TabPanel頭顯示的位置,只有兩個值top和bottom.默認是top.
enableTabScroll: true,//當Tab標籤過多時,出現滾動條
items: [//Tab的個數
{
title: '管理學科',
html: '管理學科面板',
listeners: {render:function(){//爲每個Tab標籤添加監聽器.當標籤渲染時觸發
Ext.Msg.alert("管理學科","渲染管理學科面板成功") ;
}}
},{
title: '管理年級',
html: '管理年級面板'
},{
title: '管理班級',
html: '管理班級面板',
closable: true //可以關閉
},{
title: '管理保障類型',
html: '管理保障類型面板',
closable: true //可以關閉
}],
//添加一個底部工具欄,並且在該工具欄上添加兩個按鈕
bbar:[
{
text:'添加標籤',
//添按鈕被點擊時觸發這個匿名函數(注意:該屬性在button中能查到).
handler:function(){
var id = i ;
//添加一個Tab標籤
tabs.add({
id: id,
title:'Tab '+i,
closable: true
}) ;
i=i+1;
tabs.setActiveTab(id) ;//當id爲"id"的Tab標籤顯示(變爲活動標籤).
}
},{
text:'刪除標籤',
handler: function(){
//獲得當前活動標籤的引用
var t = tabs.getActiveTab();
if(t.closable){
tabs.remove(t);//刪除標籤
}else{
Ext.Msg.alert("提示","該標籤不能關閉") ;
}
}
}]
});
//把TabPanel組件充滿整個body容器.
new Ext.Viewport({
layout: 'fit',
items: tabs
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
</body>
</html>
