<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>