版本: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问题的更多相关文章

  1. 22.Extjs Panel中显示多行工具栏(tbar)

    转自:http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中,我们经常性的会用到工具栏,在Extjs中Panel中提供了tbar和 ...

  2. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  3. 转载:.NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  4. .NET Web开发技术简单整理 转

    .NET Web开发技术简单整理 原文:http://www.cnblogs.com/SanMaoSpace/p/3157293.html 在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何 ...

  5. 巩固复习(Hany驿站原创)_python的礼物

    Python编程语言简介 https://www.cnblogs.com/hany-postq473111315/p/12256134.html Python环境搭建及中文编码 https://www ...

  6. ExtJS 等待两个/多个store加载完再执行操作的方法

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. Extjs加载Store是异步加载的,这有很多好处.但是当我们要在两个或多个不同的store加载完再执行一些操作 ...

  7. ExtJs计算两个DateField所间隔的月份(天数) new Date(str) IE游览器提示NaN 处理

    需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...

  8. 【ExtJs】在Ext.grid.Panel中,两列的值相乘作为第三列的值的实现

    如: 商品总价=商品单价*商品数量 方法: 商品总价列,使用其renderer属性,为期定义一个方法,该方法将当前record中的另外两列中2个数据相乘后渲染到该商品总价列.

  9. extjs计算两个DateField所间隔的月份(天数)

    需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...

随机推荐

  1. phpcms:六、频道页(category.html)

    1.当前栏目的ID:{$catid}标题样式:{title_style($v[style])}(在添加内容或编辑内容的时候,标题右边 有一个选择颜色的块).{str_cut(strip_tags($v ...

  2. WPF - Build Error总结

    1. are you missing an assembly reference 给项目添加新控件的时候,经常发现这种错误 Error 21 The type or namespace name 'C ...

  3. poj 2376 Cleaning Shifts(贪心)

    Description Farmer John <= N <= ,) cows to <= T <= ,,), the first being shift and the la ...

  4. (转)Iphone数组一些基础操作 NSArray/NSMutableArray

    /******************************************************************************************* NSArray ...

  5. UVA 825 Walking on the Safe Side(记忆化搜索)

      Walking on the Safe Side  Square City is a very easy place for people to walk around. The two-way ...

  6. 6、Cocos2dx 3.0游戏开发找小三之游戏的基本概念

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27689713 郝萌主友情提示: 人是习惯的产物,当你 ...

  7. 使用C++11实现无锁stack(lock-free stack)

    前几篇文章,我们讨论了如何使用mutex保护数据及使用使用condition variable在多线程中进行同步.然而,使用mutex将会导致一下问题: 等待互斥锁会消耗宝贵的时间 — 有时候是很多时 ...

  8. windows下删除服务的方法

    删除的办法有两个: 办法一: 用sc.exe这个Windows命令 开始——运行——cmd.exe,然后输入sc就可以看到了.使用办法很简单: sc delete "服务名" (如 ...

  9. ios浅谈关于nil和 NIL区别及相关问题(转)

    转自:http://blog.csdn.net/guozh/article/details/8469131 个就是将引用技术减1,所谓的引用计数就是看看有多个指针指向一块内存实体,当release一次 ...

  10. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...