extjs中Toolbar工具栏
extjs中Toolbar工具栏extjs中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，工具栏控件可以被附加在面板、窗口等容器类控件中，可以在四个方位添加多个工具栏控件。下面分别介绍几个实例，来对extjs中的工具栏有一定的认识。
简单工具栏:
<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 panel = new Ext.Panel({
renderTo: "li1",
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具栏',
items: listView,
tbar: tbar,
bbar: bbar,
rbar: [{
iconCls: 'add16',
tooltip: '按钮1'
},
'-',
{
iconCls: 'add16',
tooltip: {
text: '按钮2',
anchor: 'left'
}
}, {
iconCls: 'add16'
}, {
iconCls: 'add16'
},
'-',
{
iconCls: 'add16'
}
]
});
效果图
动态工具栏添加项:
//创建母工具栏
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();
}
}
]
});
效果图：