这学期一直在做一个管理系统,前台用到了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上,这个可以根据个人需要设定。
本文转自xwdreamer博客园博客,原文链接:http://www.cnblogs.com/xwdreamer/archive/2010/12/29/2297055.html,如需转载请自行联系原作者