extjs两行tbar的问题
来源:互联网 发布:淘宝达人在哪里找 编辑:程序博客网 时间:2024/05/17 22:50
知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏)下面为大家介绍下extjs的两个tbar问题,感兴趣的朋友可以参考下
接触过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);
}
});
//表格var grid = new Ext.grid.GridPanel({ id:'grid.info', renderTo : "grid", // 渲染到哪里 stripeRows : true, // 斑马线效果 columnLines : true, // 控制中间是否有线相隔 store : ds, height : 400, width : 1000, cm : cm, // 表头 selModel : sm, // 为Grid提供选区模型 viewConfig : { forceFit : true }, bbar : new Ext.PagingToolbar({ pageSize : 15, store : ds, displayInfo : true, displayMsg : '显示第{0}条到{1}条记录,一共{2}条', emptyMsg : "没有记录" , beforePageText:"当前页", afterPageText:"共{0}页" }), tbar:tbar, listeners:{ render: function(){ tbar2.render(this.tbar); } }});
0 0
- extjs两行tbar的问题
- 给ExtJS的Grid增加两行tbar
- 给ExtJS的Grid增加两行tbar
- 给ExtJS的Grid增加两行tbar
- extjs中,tbar显示为两行
- extjs两个tbar问题
- ExtJS grid 的 tbar 显示不出来
- ExtJs 解决在GridPanel中使用bbar或者tbar的分页条的宽度自适应问题
- extjs tbar 换行 多行
- Extjs动态设置tbar
- tbar换行显示问题
- 关于想引用gridPanel 中tbar 中按钮的问题
- 引用gridPanel 中 tbar 中按钮的问题
- extjs的panel中tbar的按钮居右显示的解决方案
- extjs 根据不同的操作动态替换panel上的tbar
- Bbar和Tbar的使用
- Extjs学习 bbar、tbar靠右,居中显示
- Ext gridpanel tbar 左右位置问题
- HTML <a> 标签
- linux下环境变量PATH设置错误的补救
- 第三章 改进神经网络的学习方式(中下)
- 3.4趣味整数之黑洞数
- 【POJ】[1466]Girls and Boys
- extjs两行tbar的问题
- 直接插入排序
- mysql table
- Android Intent
- 一个tornado websocket 客户端例子
- 多个单选框的值传到后台
- MySQL备份之mysqlpump工具之--hex-blob参数
- Android 屏幕透明度控制
- C++几个常用类介绍第一篇