Ext.button/menu/toolbar

最新推荐文章于 2017-10-25 10:51:08 发布

番茄鲨鱼面

最新推荐文章于 2017-10-25 10:51:08 发布

阅读量519

点赞数

分类专栏： Ext

本文链接：https://blog.csdn.net/xiakepan/article/details/46429249

版权

Ext 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>按钮、菜单、工具栏</title>
		<link rel="stylesheet" type="text/css" href="./ext-2.0.2/resources/css/ext-all.css"/>
		<script src="./ext-2.0.2/adapter/ext/ext-base.js"></script>
		<script src="./ext-2.0.2/ext-all.js"></script>
		<style>
			ol{
				margin-left:30px;
				list-style-type:decimal;
			}	
		</style>
		<script>
			var helpWindow;
			Ext.onReady(function(){
				Ext.BLANK_IMAGE_URL="./ext-2.0.2/resources/images/default/s.gif";
				new Ext.Toolbar({
					renderTo:'toolbar',
					width:500,
					items:[{
						xtype:'tbspacer'//添加几个像素的空白
					},{
						xtpe:'tbbutton',
						cls:'x-btn-text-icon',
						icon:'./ext-2.0.2/resources/images/default/dd/drop-add.gif',
						text:'普通按钮',
						handler:function(f){//第一个参数f就是对当前组件的引用，即button
							Ext.Msg.alert('tips','普通按钮');
							f.disable();//按钮变灰，不能用
						}
					},{
						xtype:'tbseparator'
					},{
						xtype:'tbbutton',
						text:'菜单按钮',
						menu:[{
							text:'优秀'
						},{
							text:'良好',
						},{
							text:'一般'
						}]
					},{
						xtype:'tbfill'
					},{
						xtype:'tbsplit',
						text:'帮助',
						menu:[{
							text:'ONE',
							helpType:'1',//要传递到处理方法中的参数，自己随便设置
							handler:Help.doHelp//处理方法
						},{
							text:'TWO',
							helpType:'2',
							handler:Help.doHelp						
						},{
							text:'THREE',
							helpType:'3',
							handler:Help.doHelp
						}]
					},{
						xtype:'textfield',
						listeners:{
							specialkey:Help.doSearch
						}
					}]
				});
				helpWindow = new Ext.Window({
					title:'帮助',
					id:'helpWin',
					width:300,
					height:300,
					tbar:[{
						text:'关闭',
						handler:function(){
							//Ext.getCmp('helpWin').close();//close之后不能再显示
							Ext.getCmp('helpWin').hide();//hide之后可以用show再次显示
						}
					},{
						text:'不可用',
						handler:function(t){
							t.disable();//这个之后也不能再显示
						}
					}]
				});				
			});
			var Help = function(){//这个方法如果放在onReady里面，那么必须在调用的前面；如果在onReady外面，那就随便放了。
				return{
					doHelp:function(btn){
						Help.doChange(btn.helpType);
					},
					doChange:function(para){
						alert('您的选择是='+para);
						helpWindow.show();
						//Ext.getCmp('helpWin').show();
					},
					doSearch:function(frm,evt){
						if(evt.getKey()==evt.ENTER){
							Ext.Msg.alert('tips','正在搜索'+frm.getValue());
						}
					}
				};
			}();//不明白为什么这里要加一个()，但是如果不加的话就会报错			
		</script>
	</head>
	<body>
		<h1>按钮、菜单、工具栏</h1>
		<div>
			<ol>
				<li>
					几乎所有的Ext组件面板、窗口、表格都可以容纳一个顶部或底部的toolbar
				</li>
				<li>
					Ext.Toolbar:按钮的主要容器</br>
					Ext.Button:建立一个按钮并提供交互功能</br>
					Ext.menu:一个菜单
				</li>
				<li>
					普通按钮，菜单按钮和split按钮
				</li>
				<li>
					在任意元素之间添加tbfill，便会是这两个元素靠最左和最右分开</br>
					tbspacer添加几个像素的空白</br>
					tbseparator在元素之间添加分割线
				</li>
				<li>
					图片按钮。cls:'x-btn-icon',icon:'***.png'</br>
					图片文字共存按钮。cls:'x-btn-text-icon',icon:'***.gif'
				</li>
				<li>
					点击传递参数并触发事件。如：helpType:'3',handler:Help.doHelp
				</li>
				<li>
					tbar：顶部工具栏；bbar：底部工具栏
				</li>
			</ol>	
		</div>
		<div id="toolbar"></div>
	</body>
</html>

番茄鲨鱼面

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext.button/menu/toolbar

按钮、菜单、工具栏 ol{ margin-left:30px; list-style-type:decimal; } var helpWindow; Ext.onReady(function(){ Ext.BLANK_IMAGE_URL="./ext-2.0.2/resources/images/default/
复制链接

扫一扫

专栏目录