extjs两个tbar问题探讨

版本：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);
}
});

效果如下：

赞 (0)

相关推荐

  • extjs两个tbar问题探讨

    extjs两个tbar问题探讨

    版本:extjs3.4 接触过extjs的同志们都知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏) 大家做查询页面,一般都是啥样子的? 最基本的是一个table,来显示数据. 再进一步: 添加对数据的操作,比如添加按钮 再进一步: 一般查询都会有查询条件,查询条件可以快速定位. 那对于extjs来说,extjs中封装了很多组件,其中组件的概念很类似于java swing,比如panel,button,component,contai

  • 深入理解JavaScript系列(2) 揭秘命名函数表达式

    前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你就会发现其实是不切实际的.当然,如果你不关注调试,那就没什么可担心的了,否则,如果你想了解兼容性方面的东西的话,你还是应该继续往下看看. 我们先开始看看,什么叫函数表达式,然后再说一

  • 最流行的Node.js精简型和全栈型开发框架介绍

    最流行的Node.js精简型和全栈型开发框架介绍

    快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非常划不来的耗时的事情.这个问题的解决方案非常简单且已经经受起时间的考验:使用一个已经提前打造好的开发框架.因此才会有如此多的如Express.js,Koa,Sails.js等框架的概念提出来并加以实现. 这些开发框架的角色非常简单.就是要去为应用开发人员节省时间,让我们不用话费太多精力在一些不必要的

  • 深入解读VUE中的异步渲染的实现

    接下来在本文里一起看看当数据变化时,从源码层面逐步分析一下触发页面的响应动作之后,如何做渲染到页面上,展示到用户层面的. 同时也会了解在Vue中的异步方法NextTick的源码实现,看一看NextTick方法与浏览器的异步API有何联系. 注意,本文涉及的Vue源码版本为2.6.11. 什么是异步渲染? 这个问题应该先要做一个前提补充,当数据在同步变化的时候,页面订阅的响应操作为什么不会与数据变化完全对应,而是在所有的数据变化操作做完之后,页面才会得到响应,完成页面渲染. 从一个例子体验一下异步

  • SQLServer批量插入数据的三种方式及性能对比

    SQLServer批量插入数据的三种方式及性能对比

    昨天下午快下班的时候,无意中听到公司两位同事在探讨批量向数据库插入数据的性能优化问题,顿时来了兴趣,把自己的想法向两位同事说了一下,于是有了本文. 公司技术背景:数据库访问类(xxx.DataBase.Dll)调用存储过程实现数据库的访问. 技术方案一: 压缩时间下程序员写出的第一个版本,仅仅为了完成任务,没有从程序上做任何优化,实现方式是利用数据库访问类调用存储过程,利用循环逐条插入.很明显,这种方式效率并不高,于是有了前面的两位同事讨论效率低的问题. 技术方案二: 由于是考虑到大数据量的批量

  • Extjs的FileUploadField文件上传出现了两个上传按钮

    使用Extjs的FileUploadField插件上传文件,因为FileUploadField是ext的拓展插件所以在其api中是找不到其方法的,这个文件在extjs的examples文件夹下的ux中,所以在使用FileUploadField的时候必须将其引入过来才可以使用,在使用的过程中会出现一个问题就是,在页面中出现了两个上传按钮,这个是和ext的本身css的样式有关系,所以要将样式修改下: 复制代码 代码如下: <style type=text/css> .upload-icon { b

  • Extjs实现进度条的两种便捷方式

    做Extjs开发中,往往后台程序可能要执行一段时间才能得到返回结果,加入进度条可以提高客户体验度,以下为两种便捷的方式: 1.提交数据前用Ext.Msg.wait('提示','正在处理数据,请稍候');弹出等待条,数据处理成功后用Ext.Msg.hide();将等待去掉,例如: Ext.Msg.wait('提示','正在处理数据,请稍候'); 复制代码 代码如下: Ext.Ajax.request({ url:'DataAction.ashx?method=update', params:{It

  • ExtJs grid行 右键菜单的两种方法

    在这下边: 方法一 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • extjs关于treePanel+chekBox全部选中以及清空选中问题探讨

    复制代码 代码如下: //树 var treePanel = new Ext.tree.TreePanel({ id:'ptree', region:'west', layout:'anchor', border:false, rootVisible: false, root:{}, listeners:{ render: function() { authorityTree(treePanel); /*渲染树*/ }, checkchange: function(node, state) {

  • 探讨:用两个栈实现一个队列(我作为面试官的小结)

    探讨:用两个栈实现一个队列(我作为面试官的小结)

    两年前从网上看到一道面试题:用两个栈(Stack)实现一个队列(Queue).觉得不错,就经常拿来面试,几年下来,做此题的应该有几十人了.通过对面试者的表现和反应,有一些统计和感受,在此做个小结. 用C++描述,题目大致是这样的: 已知下面Stack类及其3个方法Push.Pop和 Count,请用2个Stack实现Queue类的入队(Enqueue)出队(Dequeue)方法. 复制代码 代码如下: class Stack{-public:         void Push(int x);

随机推荐