ext中引用ux_Ext.ux.form.SearchField使用方法
这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才解决这个问题。
首先我们先附上Ext.ux.form.SearchField的源代码:
/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.form');
Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.ux.form.SearchField.superclass.initComponent.call(this);
this.on('specialkey', function(f, e){
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
}
}, this);
},
validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramName : 'query',
onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
var o = {start: 0};
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = '';
// this.store.reload({params:o});
this.store.reload();
this.triggers[0].hide();
this.hasSearch = false;
}
},
onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
var o = {start: 0};
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramName] = v;
// this.store.reload({params:o});
this.store.reload();
this.hasSearch = true;
this.triggers[0].show();
}
});
从源代码中我们看到我注视了一行:
// this.store.reload({params:o});
这个参数是用于分页的,我实际的项目中,分页用到了2个参数,分别是start和limit,但是这里只有start,因此如果reload只传start会报错,而且我通过测试发现,reload方法不需要传递参数,他它自动会使用原来的分页参数start和limit。
看到这个搜索框,我们一般可能会想,这个搜索控件是如何给后台传递参数的呢?从源代码中我们看到有一行
paramName : 'query',
当我们在搜索控件中输入查询条件,这个查询条件会赋值给query,查询条件就是通过这个参数名为query来传递的。我们在后台可以通过以下方式获取搜索条件中的文本:
String query=request.getParameter("query");
得到搜索条件以后我们就可以使用这个搜索条件查询数据库了。
下面我附上前台的ExtJs中使用SearchField的代码。
首先定义工具栏,定义如下:
var toolbar = new Ext.Toolbar( [ {// 创建GridPanel的工具栏组件
text : '新增员工信息',
iconCls : 'add',
handler : addUser
}, {
text : '删除员工信息',
iconCls : 'remove',
handler : deleteUser
}, {
text : '修改员工信息',
iconCls : 'plugin',
handler : updateUser
}
, '-','查询:',' ', new Ext.ux.form.SearchField( {
store : userStore,
width : 110
})
]);
然后在grid中使用该工具栏:
var userGrid = new Ext.grid.GridPanel( {// 创建Grid表格组件
applyTo : 'user-grid-div',// 设置表格现实位置
frame : true,// 渲染表格面板
tbar : toolbar,// 设置顶端工具栏
stripeRows : true,// 显示斑马线
autoScroll : true,// 当数据查过表格宽度时,显示滚动条
store : userStore,// 设置表格对应的数据集
viewConfig : {// 自动充满表格
autoFill : true
},
sm : sm,// 设置表格复选框
cm : cm,// 设置表格的列
bbar : new Ext.PagingToolbar( {
pageSize : 25,
store : userStore,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',
emptyMsg : '没有记录'
//,items:['-',new Ext.app.SearchField({store:userStore})]
})
});
搜索控件不一定非要放在toolbar上,这个可以根据个人需要设定。
ext中引用ux_Ext.ux.form.SearchField使用方法相关推荐
- Ext.ux.form.SearchField使用方法
这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才 ...
- python中的main函数可以被其他文件调用么_Python中在脚本中引用其他文件函数的实现方法...
在导入文件的时候,Python只搜索当前脚本所在的目录,加载(entry-point)入口脚本运行目录和sys.path中包含的路径例如包的安装地址.所以如果要在当前脚本引用其他文件,除了将文件放在和 ...
- vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法 通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
- IOS 编程中引用第三方的方类库的方法及常见问题
方法一:直接复制全部源文件到项目中 这样的方法就是把第三方类库的全部源文件复制到项目中.直接把全部.h和.m文件拖到XCode项目中就可以. 注意: 1. 假设第三方类库引用了一些系统自带类库.那么在 ...
- 软件项目中引用头文件的几种方法及要点
关注+星标公众号,不错过精彩内容 作者 | strongerHuang 微信公众号 | 嵌入式专栏 好的编程习惯,会直接影响代码的质量,在嵌入式C/C++中,头文件的引用方式和方法有多种,同时一些细节 ...
- python中字符串怎么引用_Python:字符串中引用外部变量的3种方法
方法一: username=input('username:') age=input('age:') job=input('job:') salary=input('salary') info1='' ...
- VS报错LNK2019 无法解析的外部符号 _main,函数 “int __cdecl invoke_main(void)“ (?invoke_main@@YAHXZ) 中引用了该符号的解决方法
很多C初学者或者新人在使用VS编译器编写C代码运行时提示:严重性 代码 说明 项目 文件 行 禁止显示状态错误 LNK2019 无法解析的外部符号 _main,函数 "int __cdecl ...
- Ext.ux.form.SearchField 添加placeholder属性 2016年9月19日
效果如图: 思路: 设置两个变量,存放input的Id和placeholder值, 根据id更新input的placeholder值. inputId: '', placeholder : '', i ...
- antd 函数组件_react函数组件中引用antd<Form/>组件demo
```xml import React, { forwardRef, useEffect } from 'react'; import { Input, Select, Row, Col, Butto ...
最新文章
- “口碑营销”产品模型推测与分析
- 小心as陷阱(c#)
- 网络库urillib3
- VTK:IO之ReadPLY
- Xml xpath samples
- 感知算法论文(三):Feature Selective Anchor-Free Module for Single-Shot Object Detection
- whatlies包 | 简单玩转词向量可视化
- php接口开发 安全_PHP开发api接口安全验证的实例讲解
- 【万里征程——Windows App开发】应用栏
- 如何截取滚动的页面,窗口
- RDS PG如何安装DTS需要的增量迁移插件?
- 条码软件如何自定义设置条形码尺寸
- Word2003中Visio2003图打印错误的解决方法
- 【java学习】多线程之高并发编程
- html游戏网站设计报告,web前端课程设计以及报告,jquery+js+css+html
- C/C++实现刮刮乐-刮奖区,刮出一套房
- Hive实战之视频网站数据分析
- html图片做成菱形,CSS秘密花园:菱形图片
- openstack云计算平台 2(计算服务、Networking 服务、命令行方式启动实例)
- 深度学习之LSTM案例分析(三)
热门文章
- JQuery闭包,插件的写法
- oracle的parameters怎么用,oracle普通用户使用show parameter方法
- faster-rcnn系列assert (boxes[:, 2] = boxes[:, 0]).all()和loss偶尔为nan的问题
- webstorm中自动插入的代码和ts冲突的解决办法
- Golang入门教程(十五)指针
- 算法学习之路|打印排名
- 六大技巧提升员工信息安全意识
- MySQL 到PostgreSQL 的数据迁移工具
- windows自带的压缩,解压缩命令
- 马哥-51CTO-Linux培训-0910-程序包管理