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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
vue多次循环操作示例
Feb 08 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
Vue如何实现验证码输入交互
Dec 07 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生成的一个树叶图片画图例子
2014/04/16 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
JS中的==运算: [''] == false —>true
2016/07/24 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python绘制热力图示例
2019/09/27 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
旅游管理专业个人求职信范文
2013/12/24 职场文书
自荐书4要点
2014/01/25 职场文书
个人自我评价范文
2014/02/05 职场文书
真诚的求职信
2014/07/04 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
vue中div禁止点击事件的实现
2022/04/02 Vue.js
vue使用element-ui按需引入
2022/05/20 Vue.js