工具栏的创建

最新推荐文章于 2024-08-06 00:38:24 发布

原创最新推荐文章于 2024-08-06 00:38:24 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #CSS #JavaScript #HTML #ViewUI

ExtJS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用ExtJS创建带有图标的工具栏，并演示了工具栏元素的添加方法，包括按钮、分隔符、文本框等，同时展示了如何一次性添加多个元素。

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>