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 相关文章推荐
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
Vuex 入门教程
Jan 10 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
fastadmin中调用js的方法
May 14 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
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多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
DOM操作一些常用的属性汇总
2015/03/13 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
浅谈js闭包理解
2019/03/28 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
Django接受前端数据的几种方法总结
2016/11/04 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python文件编写好后如何实践
2020/07/07 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
遗嘱公证书标准样本
2014/04/08 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
体育馆的标语
2014/06/24 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python