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时，工具栏会出现错位并位置不准确的问题 */?