Extjs学习总结之13面板panel

Ext.onReady(function(){
 
 //定义一个工具菜单选项
 var toolBar1 = new Ext.Toolbar({
  buttons:[{
   text:"新建",
   handler:function(){
    Ext.MessageBox.alert("新建","新建操作演示");
   }
  },{
   xtype:"tbseparator"
  },{
   text:"打开"
  },{
   text:"保存"
  }]
 });
 
 //定义一个工具菜单选项负责上下步的
 var toolBar2 = new Ext.Toolbar({
  buttons:[{
   text:"上一步" 
  },{
   text:"下一步"
  },{
   text:"退出"
  }]
 });
 
 //定义一个面板
 var panel2 = new Ext.Panel({
  title:"最简单的Panel",
  width:400,
  titleCollapse:true,
  collapsible:true,
  html:"我是软通动力一份子",
  renderTo:"d",//指定面板在哪个元素下显示 <div id="d"></div>
  tbar:toolBar1,
  bbar:toolBar2,
  
  
  tools:[{
   id:"refresh",
   handler:function(event,toolEl,p){
    p.getUpdater().update({url:"panel.html",scripts:true});
   }
  },{
   id:"up",
   handler:function(event,toolEl,p){
    p.collapse(true);//收放面板
   }
  
  },{
   id:"down",
   handler:function(eventmtoolEl,p){
    p.expand(true);//展开面板
   }
  },{
   id:"help",
   handler:function(event,toolEl,p){
    Ext.Msg.alert("关于","我是一个大好人");
   }
  },{
   id:"close",
   handler:function(event,toolEl,p){
    p.hide(); //隐藏面板
   }
   
  }]
 }); 
});