Ext学习是9_面板3

/**
 * 在标题栏的右侧，还可以放置一些小图标，如果设置了collapsible属性，我们可以看到一个向上的箭头
 * 事实上可以放置更多的按妞，这写按钮通常是一个小图标，没有文字，在Ext.Panel中通过tools来定义。
 * tools中的按钮都已经定义，通过id来区别，比如id为refresh时，表示这是刷新按钮，但是没有定义单击事件
 * ，具体的响应过程还需通过handler来定义，handler函数有三个参数，event是Ext.EventObject对象,toolEl
 * 指当前按钮对象，p则指当前面板对象，通过p.getUpdater().update(url:"inner.html", scripts: true);可以
 * 更新面板正文区域的内容	，注意内容是从inner.html文件中加载的，scripts为true表示执行该文件中的脚本，否则
 * 脚本不会执行
 * tools中的可选值如下：
 * toggle close minimize maximize restore gear pin unpin right left up down refresh minus
 * plus help search save print
 * 
 * 在下面的例子中，将放置5个小按钮，分别完成 "刷新"、"收缩面板"、"打开面板"、"帮助"和"关闭面板"
 */
Ext.onReady(function(){
	var panel2 = new Ext.Panel({
		title: "带小按钮的Panel",
		width: 400,
		titleCollapse: true,
		collapsible: true,
		html: "不会显示",
		autoLoad:{url: "inner.html"},
		renderTo: "d",
		tbar: toolBar1,
		bbar: toolBar2,
		
		tools: [
		        {
		        	id: "refresh",
		        	handler: function(event,toolEl,p){
		        		p.getUpdater().update({url: "inner.html", scripts:true});
		        	}
		        },
		        {
		        	id: "up",
		        	handler: function(event,toolEl,p){
		        		p.collapse(true);
		        	}
		        },
		        {
		        	id: "down",
		        	handler: function(event,toolEl,p){
		        		p.expand(true);
		        	}
		        },
		        {
		        	id: "close",
		        	handler: function(event,toolEl,p){
		        		p.hide();
		        	}
		        }
		]
		
	});
	
});

/**
 * 备注：
 *  代码中涉及Panel的一些方法，collapse()方法可以收缩面板，expand()可以展开面板，这2个方法都带有boolean类型的参数
 *  ，为true时面板以动画方式徐徐展开或收缩。hide将面板隐藏
 *  Ext.Panel的frame配置为true时，工具栏会出现错位并位置不准确的问题
 */