extjs中Toolbar工具栏
类别:Web前端 浏览量:12580
时间:2013-10-13 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();
}
}
]
});
效果图:
您可能感兴趣
- extjs xtype的使用
- extjs tabPanel的用法
- Extjs msgTarget 提示位置
- Extjs updateProgress进度条的应用
- ExtJs中getCmp、getDom、Get的区别
- extjs实现树形下拉框
- ExtJs常用代码片段
- extjs Border边框布局
- extjs XTemplate的实例
- ExtJs中怎么上传文件
- Extjs中FieldSet的收缩和展开
- Extjs menu菜单的简单用法
- extjs中treepanel例子
- extjs checkboxGroup 复选框的用法
- extjs中treepanel属性和方法
- extjs多选下拉框
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
- 《刘老根3》热播,去世15年的她却再次被 伤害(去世15年的她却再次被)
- 十二星座爱情支配欲指数(十二星座爱情支配欲指数)
热门推荐
- 阿里云ecs集群怎么设置(阿里云ECS服务器如何监控资源使用情况)
- mysql中命令大全(MySQL中ESCAPE关键字的用法详解)
- sqlserver存储过程参数默认值(sql server使用临时存储过程实现使用参数添加文件组脚本复用)
- 服务器宝塔面板怎么安装(VPS安装宝塔面板+云锁过程记录)
- System.Action委托
- docker停止删除所有容器方法(Docker stop停止/remove删除所有容器)
- docker shell教学(docker安装rockerChat设置聊天室的详细步骤)
- h5前端入门(前端H5 Video常见使用场景简介)
- python出现modify怎么办(解决Python找不到ssl模块问题 No module named _ssl的方法)
- CSS3 border-radius实现边框圆角