extjs中Toolbar工具栏的用法

 

文章转载于：extjs中Toolbar工具栏  http://www.studyofnet.com/news/159.html

 

extjs中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，工具栏控件可以被附加在面板、窗口等容器类控件中，可以在四个方位添加多个工具栏控件。

 

<script type="text/javascript">    
Ext.onReady(function() {      
    var toolbar = new Ext.toolbar.Toolbar({    
        renderTo:Ext.getBody(),    
        width:500    
    });    
    toolbar.add(    
        {text:'新建'},{text:'打开'},    
        {text:'编辑'},{text:'保存'},//加入按钮    
        '-',    
        {//加入表单元素    
            xtype:'textfield',    
            hideLabel:true,    
            width:150    
        },    
        '->',    
        '<a href=#>超链接</a>',    
        {xtype:'tbspacer',width:50},    
        '静态文本'    
    );    
});      
</script>   

 

效果图

 

Ext.toolbar.Toolbar的overflowHandler属性实例：

如果工具栏上的item项目过多，而面板的长度不够那会怎么样？我们需要设置 overflowHandler: 'Menu'

 

效果图

 

 

动态工具栏添加项:

//创建母工具栏 
var toolbar = Ext.create('Ext.toolbar.Toolbar', { 
           renderTo: document.body, 
           width: 700, 
           items: 
           [ 
            { 
             text: 'Example Button' 
            } 
           ] 
});

var addedItems = [];  //添加项数组

Ext.create('Ext.toolbar.Toolbar', { 
          renderTo: document.body, 
          width: 700, 
          margin: '5 0 0 0', 
          items: 
          [ 
           { 
             text: 'Add a button', 
             scope: this, 
             handler: function () { 
              var text = prompt('Please enter the text for your button:'); 
              addedItems.push(toolbar.add({   //装入 
                  text: text 
              })); 
             } 
          }, 
          { 
          text: 'Add a text item', 
          scope: this, 
          handler: function () { 
              var text = prompt('Please enter the text for your item:'); 
              addedItems.push(toolbar.add(text)); 
          } 
          }, 
          { 
          text: 'Add a toolbar seperator', 
          scope: this, 
          handler: function () { 
              addedItems.push(toolbar.add('-')); 
          } 
          }, 
          { 
          text: 'Add a toolbar spacer', 
          scope: this, 
          handler: function () { 
              addedItems.push(toolbar.add('->')); 
          } 
          }, 
          '->', 
          { 
          text: 'Remove last inserted item', 
          scope: this, 
          handler: function () { 
              if (addedItems.length) { 
                  toolbar.remove(addedItems.pop()); 
              } else if (toolbar.items.length) { 
                  toolbar.remove(toolbar.items.last()); 
              } else { 
                  alert('No items in the toolbar'); 
              } 
             } 
         }, 
         { 
          text: 'Remove all items', 
          scope: this, 
          handler: function () { 
              toolbar.removeAll(); 
          } 
         } 
       ] 
 });

 

效果图：