Ext.toolbar.Toolbar的学习，是Ext Js 4的类，Ext Js3的用法有些不同
1：toolbar1.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>toolbar1</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
<script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" >
Ext.onReady(function(){
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
items: [
{
// xtype: 'button', // default for Toolbars
text: 'Button',
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
// begin using the right-justified button container
'->', // same as {xtype: 'tbfill'}, // Ext.toolbar.Fill
{
xtype: 'tbseparator'
},
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
{
xtype: 'tbfill'
},
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{xtype: 'tbfill'},// same as ' ' to create Ext.toolbar.Spacer
'text 2',
{xtype: 'tbspacer', width: 50}, // add a 50px space
'text 3'
]
});
});
</script>
</head>
<body>
</body>
</html>
程序效果图：
2：toolbar2.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>toolbar2</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
<script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" >
Ext.onReady(function(){
var enableBtn = Ext.create('Ext.button.Button', {
text : 'Enable All Items',
disabled: true,
scope : this,
handler : function() {
enableBtn.disable(); //使enableBtn无效
disableBtn.enable(); //使disableBtn有效
toolbar.enable(); //使toolbar有效
}
});
var disableBtn = Ext.create('Ext.button.Button', {
text : 'Disable All Items',
scope : this,
handler : function() {
disableBtn.disable(); //使disableBtn无效
enableBtn.enable(); //使enableBtn有效
toolbar.disable(); //使toolbar无效
}
});
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
margin : '5 0 0 0',
items : [enableBtn, disableBtn]
});
});
</script>
</head>
<body>
</body>
</html>
程序效果图：
3：toolbar3.jsp 尝试在toolbar上添加元素和删除元素
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>toolbar3</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
<script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" >
Ext.onReady(function(){
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 700,
items: [
{
text: 'Example Button'
}
]
});
var addedItems = [];
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 700,
margin : '5 0 0 0',
items : [
{
text : 'Add a button',
scope : this,
handler: function() {
var text = prompt('Please enter the text for your button:');
addedItems.push(toolbar.add({ //点击添加一个按钮
text: text
}));
}
},
{
text : 'Add a text item',
scope : this,
handler: function() {
var text = prompt('Please enter the text for your item:');
addedItems.push(toolbar.add(text)); //点击添加一个text item
}
},
{
text : 'Add a toolbar seperator',
scope : this,
handler: function() {
addedItems.push(toolbar.add('-')); //点击添加一个toolbar seperator
}
},
{
text : 'Add a toolbar spacer',
scope : this,
handler: function() {
addedItems.push(toolbar.add('->')); //点击添加一个toolbar spacer
}
},
'->',
{
text : 'Remove last inserted item',
scope : this,
handler: function() { //点击移除最后一个添加的元素
if (addedItems.length) {
toolbar.remove(addedItems.pop());
} else if (toolbar.items.length) {
toolbar.remove(toolbar.items.last());
} else {
alert('No items in the toolbar');
}
}
},
{
text : 'Remove all items', //移除所有的元素
scope : this,
handler: function() {
toolbar.removeAll();
}
}
]
});
});
</script>
</head>
<body>
</body>
</html>
效果：
图：程序初始化图
图：点击"Add a button",“Add a text item”, "Add a toolbar seperator”, "Add a toolbar spacer“后的结果
4：toolbar4.jsp，在toolbar上添加几个按钮，并添加相应的响应函数
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>toolbar4</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
<script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" >
Ext.onReady(function() {
var toolbar = Ext.create('Ext.toolbar.Toolbar',{
width: '99%',
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: '关于我们',
handler: onButtonClick
}, {
xtype: 'button',
text: '新闻中心',
handler: onButtonClick
}, {
xtype: 'button',
text: '产品中心',
handler: onButtonClick
}, {
xtype: 'button',
text: '客户服务',
handler: onButtonClick
}, {
xtype: 'button',
text: '经典案例',
handler: onButtonClick
}, {
xtype: 'button',
text: '高级管理',
handler: onButtonClick
}, {
xtype: 'button',
text: '系统管理',
handler: onButtonClick
}, {
xtype: 'button',
text: '个人管理',
handler: onButtonClick
}]
});
function onButtonClick(btn) {
alert(btn.text);
}
});
</script>
</head>
<body>
</body>
</html>
程序效果图：
图：toolbar上显示几个按钮
图：点击“新闻中心”后的程序效果