Ext部分例子

Ext.onReady(function() {
//	//提示信息
//	Ext.MessageBox.alert('我是标题', 'Hello', function() {
//		console.info(this);
//		alert('回调函数');
//	}, this);
	
//	//询问框
//	Ext.MessageBox.confirm('提示信息', '确认?', function(op) {
//		if (op == 'yes') {
//			alert('确认了');
//		} else {
//			alert('取消了');
//		}
//	})
	
	//输入框
	Ext.Msg.prompt('标题', '请输入信息：', function(op, value){
		//ok、cancel
		console.log(op);
		console.log(value);
	}, this, true, '张三');
	
//	//等待框
//	Ext.Msg.wait('信息', '标题', {
//		interval: 400, //非常快地移动!
//		duration: 2000,
//		increment: 5,
//	    text: '更新中...',
//	    scope: this,
//   	    fn: function(){
//   	    	alert('更新成功');
//		},
//		animate: true,
//	});
	
//	//show方法
//	Ext.Msg.show({
//		title: '我是自定义的提示框',
//		msg: '我是内容',
//		width: 300,
//		height: 100,
//		fn: function(op) {
//			console.log(op);
//		},
//		buttons: Ext.Msg.YESNOCANCEL,
//		icon: Ext.Msg.ERROR
//	});
});

Ext.create('Ext.window.Window', {
	    title: 'Hello',
	    height: 200,
	    width: 400,
	    layout: 'fit',
	    items: {  // Let's put an empty grid in just to illustrate fit layout
	        xtype: 'grid',
	        border: false,
	        columns: [{header: 'World'}],                 // 仅仅用来显示一个头部。没有数据，
	        store: Ext.create('Ext.data.ArrayStore', {}) // 一个假的空的数据存储
	    }
	}).show();

Ext.onReady(function() {
	//Ext.create方法相当于创建一个实力对象
	Ext.create('Ext.window.Window', {
		title: '第一个组件, window',
		width: 400,
		height: 200,
		layout: 'fit',
		renderTo: Ext.getBody(), //新创建的组件，渲染到什么位置
		hidden: false,
//		constrain: true, //限制窗口不超出浏览器边界
		constrainHeader: true, //不允许该窗口的title超出浏览器边界
		modal: true, //设置一个模态窗口
		plain: true,
		x: 50,
		y: 50,
		html: '<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是第二个div</div>',
		autoScroll: true, //添加滚动条
		icon: './icon-error.gif', //字符串参数，图片的路径
		
	});
//	var window = new Ext.window.Window({
//		title: '第一个组件, window',
//		width: 400,
//		height: 200,
//		layout: 'fit',
//	});
//	window.show();
});

Ext.onReady(function() {
	//ex001：点击一个按钮，打开一个窗体
	//第一种实现
	//问题：会产生窗体重复创建的问题
	var btn = Ext.get("btn"); //这个元素是经过Ext包装的ExtDom对象
	btn.on('click', function() {
		if (!Ext.getCmp('MyWindow')) { //解决方式二：没有创建时再创建
			//创建窗体
			Ext.create('Ext.window.Window', {
				id: 'MyWindow', //如果给组件加了id，那么这个组件就会被Ext所管理
				title: '新窗体',
				width: 200,
				height: 200,
				renderTo: Ext.getBody(),
//				modal: true, //解决方式一：可以解决窗体重复创建的问题
			}).show();
		}
	});
//	//第二种实现（不推荐）
//	var win = Ext.create('Ext.window.Window', {
//		title: '新窗体',
//		width: 200,
//		height: 200,
//		renderTo: Ext.getBody(),
//		closeAction: 'hide', //closeAction默认是destroy销毁
//	});
//	Ext.get('btn').on('click', function() {
//		win.show();
//	});
});

Ext.onReady(function() {
	//ex002：在组件中添加子组件，并进行针对于组件的一系列操作
	//在组件中添加子组件
	var win = new Ext.window.Window({
		title: '添加子组件实例',
		width: '40%',
		height: 400,
		renderTo: Ext.getBody(),
		draggable: false, //不允许拖拽
		resizable: false, //不允许改变窗口大小
		closable: false, //不显示关闭按钮
		collapsible: true, //显示折叠按钮
		//Ext items 配置子组件的配置项（是数组的形式）
		items: [
		        //Ext的组件给我们提供了一个简单的方法，xtype属性去创建组件
		        {
		        	xtype: 'panel',
		        	width: '50%',
		        	height: 100,
		        	html: '我是面板'
		        }, 
		        //创建按钮方式一
		        new Ext.button.Button({
		        	text: '按钮'
		        }),
		        //创建按钮方式二
//		        {
//		        	xtype: 'button',
//		        	text: '按钮',
//		        	handler: function(btn) {
//		        		alert('被点击了');
//		        		alert(btn.text);
//		        	}
//		        }
		 ]
	});
	win.show();
//	var win = new Ext.window.Window({
//		id: 'MyWin',
//		title: '操作组件的形式',
//		width: 500,
//		height: 300,
//		renderTo: Ext.getBody(),
//		closeAction: 'hide',
//		//表示在当前组件的top位置添加一个工具条
//		tbar: [ //bbar lbar rbar fbar
//		       {
//		    	   text: '按钮1',
//		    	   handler: function(btn) {
//		    		 //组件都会有up和down两个方法，表示向上或向下查找。需要的参数是组件的xtype或者是选择器
//		    		   alert(btn.up('window').title);
//		    	   },
//		       }, {
//		    	   text: '按钮2',
//				   handler: function(btn) {
//		    		   //最常用的方式
//					   alert(Ext.getCmp('MyWin').title);
//		    	   },
//		       }, {
//		    	   text: '按钮3',
//		    	   handler: function(btn) {
//		    		   //以上一级组件的形式去查找，ownerCt
//		    		   alert(btn.ownerCt.ownerCt.title);
//		    	   }
//		       }
//		       ], 
//	});
	win.show();
//	var btn = Ext.get('btn');
//	btn.on('click', function() {
//		win.show();
//	});
});

Ext.onReady(function() {
	//ex003：用windowGroup对象去操作多个window窗口
	var wingroup = new Ext.WindowGroup();
	for (var i = 1; i <= 5; i++) {
		var win = Ext.create('Ext.Window', {
			title: '第' + i + '个窗口',
			id: 'win_' + i,
			width: 300,
			height: 300,
			renderTo: Ext.getBody(),
		});
		win.show();
		wingroup.register(win); //把窗体对象注册给ZindexManger
	};
	var btn1 = Ext.create('Ext.button.Button', {
		text: '全部隐藏',
		renderTo: Ext.getBody(),
		handler: function() {
			wingroup.hideAll(); //隐藏所有被管理起来的window组件
		},
	});
	var btn2 = new Ext.button.Button({
		text: '全部显示',
		renderTo: Ext.getBody(),
		handler: function() {
			wingroup.each(function(cmp) {
				cmp.show();
			});
		}
	});
	var btn3 = new Ext.button.Button({
		text: '把第三个窗口显示在最前端',
		renderTo: Ext.getBody(),
		handler: function() {
			wingroup.bringToFront('win_3'); //当前组件显示到最前端
		}
	});
	var btn4 = new Ext.button.Button({
		text: '把第五个窗口显示在最末端',
		renderTo: Ext.getBody(),
		handler: function() {
			wingroup.sendToBack('win_5'); //当前组件显示到最末端
		}
	});
});