〖ExtJS〗之ToolBar实例

 

面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。
比如下面的代码：

 

Ext.onReady( function(){
new Ext.Panel({
    renderTo: "hello",
    title: "hello", //面板标题
    width:300,
    height:300,
    html:'<h1>Hello,HelloWorld!</h1>',
    tools:[{       //生成面板右上角的工具栏
        id: "save",
      handler: function(){Ext.Msg.alert('最大化','呵呵');}     //点击工具栏调用些方法
        },
        {id: "help",
      handler: function(){Ext.Msg.alert('帮助','please help me!');}
        },
        {id: "close"}],
    tbar:[ new Ext.Toolbar.TextItem('工具栏：'), //添加一文本
      {pressed: true,text:'刷新'},
      {xtype: "tbfill"}, //加上这句，后面的就显示到右边去了
      {pressed: true,text: "添加"},
      {pressed: true,text: "保存"}
      ]
      });
  });