Ext.ux.form.SearchField使用方法
2010-12-29 10:15
411 查看
这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才解决这个问题。
首先我们先附上Ext.ux.form.SearchField的源代码:
从源代码中我们看到我注视了一行:
这个参数是用于分页的,我实际的项目中,分页用到了2个参数,分别是start和limit,但是这里只有start,因此如果reload只传start会报错,而且我通过测试发现,reload方法不需要传递参数,他它自动会使用原来的分页参数start和limit。
看到这个搜索框,我们一般可能会想,这个搜索控件是如何给后台传递参数的呢?从源代码中我们看到有一行
当我们在搜索控件中输入查询条件,这个查询条件会赋值给query,查询条件就是通过这个参数名为query来传递的。我们在后台可以通过以下方式获取搜索条件中的文本:
得到搜索条件以后我们就可以使用这个搜索条件查询数据库了。
下面我附上前台的ExtJs中使用SearchField的代码。
首先定义工具栏,定义如下:
然后在grid中使用该工具栏:
搜索控件不一定非要放在toolbar上,这个可以根据个人需要设定。
首先我们先附上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.form.SearchField使用方法
- Ext.ux.form.SearchField使用方法
- EXtjs 使用Ext.ux.form.SearchField 加入搜索框前后台实例
- Ext.ux.form.SearchField 应用,非简单的应用
- Ext.ux.form.SearchField 添加placeholder属性 2016年9月19日
- ux.form.field.SearchField 列表、树形菜单查询扩展
- Ext.form.NumberField使用
- 关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
- Extjs 解决MVC中 Ext.ux.SearchField 的问题
- 关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
- 关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
- Ext.form.ComboBox使用方法介绍和级联使用
- [4.x]Ext.ux.form.field.Month
- Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
- Ext.ux.form.Validation 验证插件的使用
- Ext使用form布局时 使用hide()方法或者setVisible()隐藏textfile 等组件 filedLable不隐藏问题
- Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
- Ext.form.ComboBox 属性详解(见注释)及使用方法
- Ext.form.ComboBox 属性详解及使用方法介绍和级联使用
- ExtJs文件上传(Ext.ux.form.FileUploadField)