Ext学习是9_面板二

/**
 * 在buttons属性中，定义一个数组，数组中的元素是json对象，即json对象数组，通常情况下代表一个按钮，text是
 * 按钮上的文字，handler是单击按钮时触发的函数，不过，除了按钮之外还可以是其它类型的元素，
 * 如：tbseparator(简写为"-"),tbspacer(简写为" ")、tbfill(简写为"->")、tbsplit(带菜单的按钮)等
 * 在上面的代码中定义了一个分隔线，这是通过tbseparator实现的，分隔线是为了能够更好的区别按钮类别而定义的
 * 竖线，也可以使用"-"代替,想下面这样：
 * 通过icon或iconCls可以在按钮前面放在 图标，icon的值为图片路径，iconCls的值是一个类选择器，必须通过css声明，
 * 因为按钮图片通过背景显示，所以文字之前一定记得留出图片空隙，cls："x-btn-text-icon",完成了这个工作
 */
var toolBar2 = new Ext.Toolbar({
	buttons:[
	  {
		  text: "上一步",
		  icon : '../_images/confirm.gif',
		  cls: "x-btn-text-icon"
	  },
	  {
		  text: "下一步",
		  icon: "../_images/del.gif",
		  cls: "x-btn-text-icon"
	  },
	  "-",
	  {
		  text: "退出"
	  }
	]
});
/**
 * 工具栏创建好后，接下来放到Panel中，分别设置tbar和bbar属性即可
 */
/**
Ext.onReady(function(){
	var panel2 = new Ext.Panel({
		title: "带工具栏的panel",
		width: 600,
		height: 300,
		titleCollapse: true,
		collapsible: true,
		html: "工具栏创建好后，接下来放到Panel中，分别设置tbar和bbar属性即可",
		autoLoad: {url: "inner.html"},
		renderTo: "d",
		tbar: toolBar1,
		bbar: toolBar2
	});
});