extjs中Toolbar工具栏的用法

 

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

 

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

 

 

效果图

 

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(); 
          } 
         } 
       ] 
 });

 

效果图：