Ext学习是9_面板1

Ext.namespace("com.deng");
/**
 * Ext.Panel
 * TreePanel、TabPanel、FormPanel、GridPanel、EditGridPanel等，都是Panel的子类
 * 确切的说面板更应该是一个容器，在面板中放在任何组件和文字，而面板本身也可以放到其它面板中
 * 
 * 一个完整的Panel包括标题栏、顶部工具栏、底部工具栏、footer和面板主区域组成。footer一般放置诸如"确定"或
 * "取消"之类的按钮
 * 另外标题栏右侧还可以放一排小按钮，如： 关闭、刷新、最小化、最大化、设置等
 * 
 * 最简单的Panel
 */
/**
Ext.onReady(function(){

	var panel2 = new Ext.Panel({
		title :"最简单的Panel",
		width: 400,
		titleCollapse:true,
		collapsible:true,
		html: " 一个完整的Panel包括标题栏、顶部工具栏、底部工具栏、footer和面板主区域组成。footer一般放置诸如确定或" + 
		"取消之类的按钮  另外标题栏右侧还可以放一排小按钮，如： 关闭、刷新、最小化、最大化、设置等",
		renderTo: Ext.getBody()
	});
	
});
*/
/**
 * title决定Panel是否有标题栏，属性值用于指定标题栏的名字
 * collapsible: true 表示Panel可收缩,此时标题栏右侧会出现一个方向按钮
 * html：指正文区域的内容，如果想将一个页面的内容显示出来，就设置autoLoad：{url: "inner.html"},
 * 当html与autoLoad属性并存，autoLoad优先显示
 * Panel包含顶部和底部两个工具栏，属性分别为tbar(Top bar)和bbar(Bottom bar),
 * 他们都是Ext.Toolbar类型的对象，一个典型的Ext.Toolbar这样定义
 */
var toolBar1 = new Ext.Toolbar({
	buttons:[
	   {
		   text: "新建",
		   handler: function(){
			   Ext.Msg.alert("新建","新建操作演示");
		   },
		   width: 70
	   },
	   {
		   xtype: "tbseparator"
	   },
	   {
		   text: "打开"
	   },
	   {
		   text: "保存"
	   }
	]
});