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

 

效果图：