工具栏的创建
1.创建一个带图标按钮的工具栏：
<!-- 工具栏常用元素介绍：Ext.Toobar
1.Ext.Toolbar.Button——>按钮组件
2.Ext.Toolbar.Fill——>用于充满工具条的空白元素
3.Ext.Toolbar.Item——>基类,为其子类提供工具栏的基本功能支持
4.Ext.Toolbar.Separator——>分隔符
5.Ext.Toolbar.SplitButton——>菜单按钮
6.Ext.Toolbar.TextItem——>文本元素 -->
<!-- 工具栏常用方法介绍：
1.addButton()——>添加按钮
2.addElement()——>添加Element元素
3.addField()——>添加表单组件
4.addFill()——>添加一个用于充满工具栏的空白元素
5.addSeparator()——>添加一个工具栏分隔符
6.addText()——>添加一个字符串
7.add()——>向工具栏添加元素支持一次性添加多个 -->
<HTML>
<HEAD>
<TITLE>使用EXT输出HelloWorld</TITLE>
<!-- 导入extjs配置 … ... -->
<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./../ext/ext-all.js"></script>
<style type="text/css">
.newIcon{background-image:url(add.gif) !important;}
.openIcon{background-image:url(add16.gif) !important;}
.saveIcon{background-image:url(add24.gif) !important;}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var Toolbar = new Ext.Toolbar();
Toolbar.addButton([{
text: '新建',
handler: onButtonClick,
iconCls: 'newIcon'
},{
text: '打开',
handler: onButtonClick,
iconCls: 'openIcon'
},{
text: '保存',
handler: onButtonClick,
iconCls: 'saveIcon'
}]);
function onButtonClick(btn){
alert(btn.text);
}
new Ext.Panel({
renderTo:'toolbar',
width:500,
height:300,
tbar:Toolbar
});
});
</script>
</HEAD>
<body id="toolbar">
</body>
</HTML>
2.介绍工具栏的元素添加方法
<script type="text/javascript">
Ext.onReady(function(){
var tb = new Ext.Toolbar();
tb.addButton([{text: 'new'},{text: 'save'},{text: 'open'}]);
tb.addSeparator();
tb.addField(new Ext.form.TextField({width: 50}));
tb.addFill();
tb.addElement(Ext.get('a'));
tb.addSeparator();
tb.addElement(Ext.get('link'));
tb.addSeparator();
tb.addText("静态文本");
new Ext.Panel({
renderTo:'toolbar',
width:500,
height:300,
tbar:tb
});
});
</script>
</HEAD>
<body>
<div id="toolbar"></div>
<div id="a">pig</div>
<a href="#" id="link">link</a>
</body>
3.一次性添加多个元素到工具栏上的方法
add(Mixed arg1,Mixed arg2,Mixed etc.)
.Ext.Toolbar.Button:一个工具栏支持的按钮
.HtmlElement:任何标准的Html元素
.Field:表单字段
.String:字符串
.'->':一个充满工具条的空白元素
.'Separator' or '-':工具栏分隔符
<HTML>
<HEAD>
<TITLE>使用EXT输出HelloWorld</TITLE>
<!-- 导入extjs配置 … ... -->
<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./../ext/ext-all.js"></script>
<style type="text/css">
.newIcon{background-image:url(add.gif) !important;}
.openIcon{background-image:url(add16.gif) !important;}
.saveIcon{background-image:url(add24.gif) !important;}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var Toolbar = new Ext.Toolbar({width: 400});
Toolbar.add({
text: '新建',
iconCls: 'newIcon'
},{
text: '打开',
iconCls: 'openIcon'
},{
text: '编辑'
},{
text: '保存',
iconCls: 'saveIcon'
},'-',
new Ext.form.TextField({
width: 50
}),'->',
document.getElementById('a'),'-','静态文本');
function onButtonClick(btn){
alert(btn.text);
}
new Ext.Panel({
renderTo:'toolbar',
width:500,
height:300,
tbar:Toolbar
});
});
</script>
</HEAD>
<body id="toolbar">
<div id='a'>我是猪</div>
</body>
</HTML>