extjs两个tbar问题探讨


Posted in Javascript onAugust 08, 2013

版本:extjs3.4

接触过extjs的同志们都知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏)

大家做查询页面,一般都是啥样子的?
最基本的是一个table,来显示数据。
再进一步:
添加对数据的操作,比如添加按钮
再进一步:
一般查询都会有查询条件,查询条件可以快速定位。

那对于extjs来说,extjs中封装了很多组件,其中组件的概念很类似于java swing,比如panel,button,component,container等这种东西。
对于上述的查询页面,做java开发,相比一点问题都没有,三个table,或三个div即可。
那对于extjs呢?
其实extjs也灰常简单,显示数据的,使用gird组件,查询按钮,使用button组件,查询条件,文本格式啊,但是若把添加按钮和查询搜索条件放在一个tbar上,这样也可以,至少功能实现了。
但是一切都是为客户着想,着想最明显的行为:把用户想成傻瓜,一切傻瓜式操作。比如傻瓜式相机,傻瓜式装系统,不是挺火的啊。

那为了信达雅,到底如何把执行按钮和查询搜索条件分别放在两个tbar上呢?
网上有一种在grid中添加两个tbar的代码,对于项目着急的新手来说,本人有个简单的做法,一样实现信达雅:
最简单的做法是:使用listeners监听器方式。

第一:把执行按钮,比如添加按钮,放在panel自带的tbar上。
第二:自定义工具栏,在其上放查询搜索条件。
第三:自定义工具栏监听panel自带的tbar【即第二监听第一】

代码如下:

tbar:new Ext.Toolbar({items:['-']}), 
//把查询工具栏写在按钮工具栏下面 
listeners: { 
render: function(){ 
queryBar.render(this.tbar); 
} 
} //我们项目部分主要代码如下: 
mnguser.panel = new Ext.Panel({ 
id :'mngmenuDiv', 
title : '用户管理', 
region : 'center', 
layout : 'fit', 
style : 'padding:3px;', 
bodyBorder : true, 
border : true, 
items : _grid, 
tbar:new Ext.Toolbar({items:['-']}), 
//把查询工具栏写在按钮工具栏下面 
listeners: { 
render: function(){ 
queryBar.render(this.tbar); 
} 
} 
}); 
mnguser.body = Ext.extend(Ext.Viewport, { 
layout : 'border', 
initComponent : function() { 
this.content = mnguser.panel; 
menuOpt(this.content); //在自带tbar上添加执行按钮 
Ext.apply(this, { 
items : [this.content] 
}); 
mnguser.body.superclass.initComponent.call(this); 
} 
});

效果如下:
extjs两个tbar问题探讨
Javascript 相关文章推荐
jquery 查找新建元素代码
Jul 06 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
JS实现随机数生成算法示例代码
Aug 08 #Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 #Javascript
js 为label标签和div标签赋值的方法
Aug 08 #Javascript
JS模拟自动点击的简单实例
Aug 08 #Javascript
动态改变div的z-index属性的简单实例
Aug 08 #Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 #Javascript
JS+css 图片自动缩放自适应大小
Aug 08 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
fgetcvs在linux的问题
2012/01/15 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python基础教程之对象和类的实际运用
2014/08/29 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
python实现批量修改文件名
2020/03/23 Python
python退出循环的方法
2020/06/18 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
电气专业推荐信范文
2013/11/18 职场文书
同学聚会主持词
2014/03/18 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
写给父母的感谢信
2015/01/22 职场文书
优秀教师个人总结
2015/02/11 职场文书
飞屋环游记观后感
2015/06/08 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL