Ext.Toolbar 工具栏组件

Ext.Toolbar是Ext提供的简单的工具栏组件,在其中可以放置各种工具栏元素,比如按钮,文字和菜单组件,下面我们通过一个例子来大致了解下Toolbar的使用

 

 <script type="text/javascript">
    Ext.onReady(function(){
       var newT = new Ext.Toolbar({
         width:300,
       });
       newT.addButton([
         {
           text:'我是按钮',
           handler:onButtonClick
         }
       ]);
       function onButtonClick(btn){
         alert(btn.text);
       }
       newT.render(Ext.getBody());

      });
</script>

 <script type="text/javascript">
    Ext.onReady(function(){
       var newT = new Ext.Toolbar({
         width:300,
       });
       newT.addButton([
         {
           text:'我是按钮',
           handler:onButtonClick
         }
       ]);
       function onButtonClick(btn){
         alert(btn.text);
       }
       newT.render(Ext.getBody());
    
      });
</script>

 

显示为:

 上面的代码创建了一个很简单的工具栏,上面只有一个按钮名为"我是按钮"。

 这里遇到了一个小小的问题,就是:必须先追加控件,再追加布局上。意思就是:newT.render(Ext.getBody())这段追加布局代码必须要等控件追加结束后再给予显示,如果把这段代码迁移,工具栏将无法正常显示,而只是显示一条细小的横线而已。

 

  下面我们来写一个比较复杂的ToolBar:

<script type="text/javascript">
    Ext.onReady(function(){
       var newT = new Ext.Toolbar({
         width:300,
       });
       newT.addButton([
         {
           text:'我是按钮',
           handler:onButtonClick
         }
       ]);
       function onButtonClick(btn){
         alert(btn.text);
       }
       newT.addSeparator();
       newT.addField(new Ext.form.TextField({width:50}));
       newT.addFill();
       newT.addSeparator();
       newT.addText('静态文本');
       newT.render(Ext.getBody());

      });
</script>

<script type="text/javascript">
    Ext.onReady(function(){
       var newT = new Ext.Toolbar({
         width:300,
       });
       newT.addButton([
         {
           text:'我是按钮',
           handler:onButtonClick
         }
       ]);
       function onButtonClick(btn){
         alert(btn.text);
       }
       newT.addSeparator();
       newT.addField(new Ext.form.TextField({width:50}));
       newT.addFill();
       newT.addSeparator();
       newT.addText('静态文本'); 
       newT.render(Ext.getBody());
    
      });
</script>

 显示为:

 

 

这样就可以丰富我们的工具栏了！当然,我们也可以调用一次方法加入不同的元素,这就是add方法:

 

<script type="text/javascript">
    Ext.onReady(function(){
       var newT = new Ext.Toolbar({
         width:300,
       });
       newT.add(
       {text:'按钮1'},
       {text:'按钮2'},
       '-',
       new Ext.form.TextField({
         width:50
       }),
       '你好'
       );
      newT.render(Ext.getBody());
      });
</script>

<script type="text/javascript">
    Ext.onReady(function(){
       var newT = new Ext.Toolbar({
         width:300,
       });
       newT.add(
       {text:'按钮1'},
       {text:'按钮2'},
       '-',
       new Ext.form.TextField({
         width:50
       }),
       '你好'
       );
      newT.render(Ext.getBody());
      });
</script>

 显示为:

 

最后,我们来看一下ToolBar提供的一些主要方法和常用元素:

 常用元素有:

Ext.ToolBar.Button

Ext.ToolBar.Fill

Ext.ToolBar.Item

Ext.ToolBar.Separator

Ext.ToolBar.SplitButton

Ext.ToolBar.TextItem

 Ext.ToolBar 的主要使用方法就到这里了,若需对他更进一步的了解,多看看API多亲自操练一下才是王道。