ExtJs 学习小笔记之Tab标签

xiaoyeshen · 2014-09-15 20:43 · 1219次阅读

tab标签中的互相切换,小代码:

Ext.onReady(function(){
	var tabs = new Ext.TabPanel({
        renderTo: 'tabs1',
        width:450,
        height:300,
        activeTab: 0,
        frame:true,
        buttonAlign:'center',
        defaults:{autoHeight: true},
        items:[
            {id:'hz',contentEl:'hzxx', title: '标签1',closable:true},
            {id:'mx',contentEl:'mxxx', closable:true, title: '标签2'}
        ],
        buttons : [{
			text : '切换',
			icon:'resources/images/default/tree/drop-yes.gif',
			iconAlign:'left',
			handler : function() {
				if(tabs.getActiveTab().getItemId()=='hz'){
					tabs.activate('mx');
				}else if(tabs.getActiveTab().getItemId()=='mx'){
					tabs.activate('hz');
				}
				
			}
		},{
			text : '禁用',
			icon:'resources/images/yourtheme/grid/refresh.gif',
			iconAlign:'left',
			handler : function() {
				Ext.getCmp('hz').disable();
			}
		},{
			text : '激活',
			icon:'resources/images/yourtheme/tree/drop-yes.gif',
			iconAlign:'left',
			handler : function() {
				Ext.getCmp('hz').enable();
			}
		}]
    });
})

//下面为部分提示框的使用,小代码:

Ext.onReady(function(){
	var ts1 = new Ext.Button({
		text:'提示框1'
	})
	var ts2 = new Ext.Button({
		text:'提示框2'
	})
	var qr1 = new Ext.Button({
		text:'确认框1'
	})
	var qr2 = new Ext.Button({
		text:'确认框2'
	})
	var sr1 = new Ext.Button({
		text:'输入框1'
	})
	var dd1 = new Ext.Button({
		text:'等待框1'
	})
	var form = new Ext.form.FormPanel({
		height:200,
		width:500,
		frame:true,
		buttons:[ts1,ts2,qr1,qr2,sr1,dd1]
	})
	
	ts1.on("click", function(){
    	Ext.MessageBox.alert("提示","最简单的书写方式:<b>无进程阻塞!<b>");
    });
    ts2.on("click", function(){
    	Ext.MessageBox.alert("提示","没区别!");
    });
    qr1.on("click", function(){
    	Ext.MessageBox.confirm("提示","你是纯爷们吗?",function(button){
    		if(button=='yes')
				Ext.MessageBox.alert("Result","是"); 
			else
				Ext.MessageBox.alert("Result","否");
    	});
    });
    qr2.on("click", function(){
    	alert("Hello EXTJS!!");
    });
    sr1.on("click", function(){
    	Ext.MessageBox.prompt("提示","请输入您的地址信息:",function(button,text){
    		if(button=='ok')
    			Ext.MessageBox.alert("Result","输入的内容为:"+text); 
    		else
    			Ext.MessageBox.alert("取消","输入的内容为:"+text); 
    	},this,100);
    });
    dd1.on("click", function(){
		Ext.MessageBox.show({    
			title:'请等待',    
			msg:'正在初始化....',    
//			progressText:'正在初始化...',    
			width:200,    
			progress:true,  
//			wait : true,
//			waitConfig : {
//				interval : 200
//			},
			closable:false    
		});    
		var f = function(v){    
			return function(){    
				if(v == 12){
					Ext.MessageBox.hide();    
					Ext.MessageBox.alert('结果','初始化完成!');    
				}else{    
					var i = v/11;    
					Ext.MessageBox.updateProgress(i,'已加载'+Math.round(100*i)+'%');    
				}    
			};    
		};    
		for(var i=0; i<13;i++){    
			setTimeout(f(i),i*500);
		} 
    });
	var win = new Ext.Window({
		title : '消息对话框',
		collapsible : true,
		items:form
	});
	win.show();
})
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册