/** * 在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 }); });
Ext学习是9_面板2
最新推荐文章于 2011-08-26 16:27:50 发布