extjs学习05——extjs的初级UI设计2

extjs学习05——extjs的初级UI设计2
学习自dojo china陈治文老师的extjs视频教程
本篇日志是对视频章节的小结

一、Ext.Window
	说明：该组件是实现窗体化开发的基础
	构造参数：
		-title:窗体名称
		-minimizable:是否显现最小化按钮
		-maximizable:是否显现最大化按钮
	方法：
		-show:使得窗口显现
		-hide:使得窗口隐藏
		-事件：
		-hide:当隐藏时触发
		-show:当显现时触发
	/**一个指定的打算作为一个应用程序窗口的面板。
	默认窗口是浮动的，resizable, 并且draggable。
	窗口可以maximized来充满视口，恢复到他们以前的大小，并且能minimize。
	窗口可以被链接到一个Ext.ZIndexManager或者Ext.WindowManager管理来提供 分组，活动，道歉，到后面和其他指定应用程序的行为。
	默认的，窗体靠document.body呈现。 为constrain（限制）一个窗体到另一个指定为renderTo的元素。
	作为伴随所有的Containers，考虑如何你想设置窗口的大小和安排任何子组件时非常重要的。 
	选择一个适当的在所需的方式中给出的子组件的layout配置*/

	Ext.onReady(function(){
		var _window = new Ext.Window({
			title:"...",
			frame:true,
			width:200,
			height:300
			layout:"form",
			labelWidth:45,
			plain:true,//为true时不在选项卡上显示全部背景
			resizable:false,//不可改变大小
			defaults:[xtype:"textfield",width:180],
			bodyStyle:"padding:3px",
			buttonAlign:"center",
			//closable:false,
			/**为真时显示‘close’工具按钮并且允许用户关闭窗体, 为假时隐藏按钮并且不允许关闭窗体。
			默认的，当无论是通过点击在头部的关闭按钮或是当窗口有焦点时敲击Ecs请求关闭时，将呼叫close方法。 
			这将destroy 窗口并且它的内容意味着它不能被重用。
			关闭一个窗口 隐藏窗口以便于它可能被重新使用， 设置closeAction为'hide'.*/
			closeAction:"hide",
			//当标题头的关闭按钮被单击这个动作将被执行(默认为destroy)：
			listeners:{
				"show":function(){
					alert(".show..");
				}
				"hide":function(){
					alert(".hide..");
				}
				"close":function(){
					alert(".close..");
				}
				/**关闭window。
				默认情况下这个方法会将其自身的DOM对象在浏览器中移除，
				destroys 销毁Panel对象并且销毁该window中的子组件。
				在关闭window动作发生之前beforeclose事件被触发，
				如果要取消关闭动作则在其事件的处理函数中返回false即可。*/
			}
			items:[{
				fieldLabel:"name"
			},{
				fieldLabel:"address"
			}],
			buttons:[{
				text:".1.."
				handler:function(){
					_window.hide();//当点击窗口的关闭按钮时也会触发hide方法
				}
			},{
				text:".2.."
			}]
		});
		_window.show();
	});


	Ext.onReady(function(){
		var _window = new Ext.Window({
			title:"测试窗体",
			layout:"form",
			width:100,
			plain:true,
			items:{
				xtype:"textfield",
				fieldLabel:"姓名"//要使用fieldLabel就一定要设置layout:"form"
			},
			buttons:[{
				text:"确定",
				handler:function(){
					alert(this.text);//this指向的是公布handler方法的对象本身
					alert(this.ownerCt.title);//当前容器组件
					alert(this.ownerCt.items.first().getValue());
					/**【单个组件,或者是以数组形式定义的子组件集合 将会自动添加到容器中去
					如果开发者没有配置layout属性， 默认是按顺序将子组件渲染到在容器中，不考虑子组件的大小和定位
					如果子组件是指定的,它的实际组件的类型将根据xtype选项进行实例化. 每个组件都有各自的xtype.
					如果没有指定 xtype, 那么将会使用 defaultType，默认是panel.】*/
					/** 如果有多个item
						var _coll = this.ownerCt.items;
						var _temp = "";
						_temp += _coll.first().getValue();
						_temp += _coll.itemAt(1).getValue();
					*/
				}
			}]
		});
		_window.show();
	});

	引申：Ext.util.MixedCollection
	——代表一系列键值对集合。MixedCollection中的每个键 必须唯一, 同一个键不能出现两次。
	这个集合是有序的， 集合中的每个项能通过索引或者键访问。
	新增的项 在集合的尾部。本类类似于Ext.util.HashMap， 但是它是重量级的，提供了更多的功能。
	使用范例：
		var coll = new Ext.util.MixedCollection();
		coll.add('key1', 'val1');
		coll.add('key2', 'val2');
		coll.add('key3', 'val3');

		console.log(coll.get('key1')); // prints 'val1'
		console.log(coll.indexOfKey('key3')); // prints 2
	
	MixedCollection也支持对集合中的值的排序和过滤
		var coll = new Ext.util.MixedCollection();
		coll.add('key1', 100);
		coll.add('key2', -100);
		coll.add('key3', 17);
		coll.add('key4', 0);
		var biggerThanZero = coll.filterBy(function(value){
			return value > 0;
		});
		console.log(biggerThanZero.getCount()); // prints 2