ExtJs4.2应用:使用ExtJs扩展组件searchfield实现数据搜索功能
ExtJs4.2应用:使用ExtJs扩展组件searchfield
实现数据搜索功能
1.引入searchfield组件
在Ext目录下放入ux目录将searchfield组件放入ux目录下的form文件下,如图所示:2.在对应Js文件中引入searchfield组件
dockedItems: [{ dock: 'top', /**在顶部显示*/ xtype: 'toolbar', /**以工具栏形式展示*/ items: { width: "25%", fieldLabel: 'Login Name:', labelWidth:100, xtype: 'searchfield',/**searchfield 是ExtJs的扩展组件 引用路径为Ext.Loader.setPath('Ext.ux', rootPath+'/ux/') 其中rootPath就是Ext类跟路径:比如http://localhost:8080/demo/Ext */ store: store /**对应的数据集*/ } },{ xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }]
3.完整的JS代码
Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', rootPath+'/ux/'); Ext.require([ 'Ext.ux.form.SearchField' ]); var itemsPerPage = 15; var params; var store = Ext.create('Ext.data.Store',{ fields:["id","firstName","lastName","loginName","telephone","brithday","sexId","depId"], proxy:{ type:'ajax', url:'/demo/JobData.action', reader:{ type:'json', root:'rootData', totalProperty: 'totalCount' } }, pageSize: itemsPerPage, autoLoad:true }); Ext.onReady(function(){ Ext.Loader.setConfig({ enabled:true }); Ext.create('Ext.grid.Panel',{ title:'Job Enquiry', width:'100%', layout:"auto", style:"margin-left:auto;margin-right:auto;", renderTo:Ext.getBody(), columns:[{ header:'Id', flex: 1,align:"center", dataIndex:'id', sortable:true },{ header : "First Name", flex: 1, align:"center", dataIndex : 'firstName', sortable : true }, { header : "Last Name", flex: 1, align:"center", dataIndex : 'lastName', sortable : true }, { header : "Login Name", flex: 1, align:"center", dataIndex : 'loginName', sortable : true }, { header : "Telephone", flex: 1,align:"center", hideable: false, dataIndex : 'telephone', sortable : true }, { header : "brithday", flex: 1, align:"center", dataIndex : 'brithday', sortable : true }, { header : "Sex Id", flex: 1, align:"center", dataIndex : 'sexId', sortable : true }, { header : "Dep Id", flex: 1, align:"center", dataIndex : 'depId', sortable : true }], store:store, //style:"margin-left:auto;margin-right:auto;align:center", pageSize: itemsPerPage, dockedItems: [{ dock: 'top', /**在顶部显示*/ xtype: 'toolbar', /**以工具栏形式展示*/ items: { width: "25%", fieldLabel: 'Login Name:', labelWidth:100, xtype: 'searchfield',/**searchfield 是ExtJs的扩展组件 引用路径为Ext.Loader.setPath('Ext.ux', rootPath+'/ux/') 其中rootPath就是Ext类跟路径:比如http://localhost:8080/demo/Ext */ store: store /**对应的数据集*/ } },{ xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }] }); store.load({params:{start:0,limit:itemsPerPage}}); var startTime; var endTime; function checkDate(){ startTime = Ext.getCmp("startTime"); endTime = Ext.getCmp("endTime"); if(startTime != null && endTime != null && startTime.getValue() > endTime.getValue()){ alert("Start time must be smaller than the end time!"); return false; } return true; } function query(){ //check date if(!checkDate()){ return ; } params = { 'conEnquiryTicketVo.startTime':startTime.getValue(), 'conEnquiryTicketVo.endTime':endTime.getValue(), start:0, limit:itemsPerPage }; // store.on('beforeload',function(){ // var startTime = Ext.getCmp("startTime"); // var endTime = Ext.getCmp("endTime"); // //alert("click!!"+startTime.getValue()); // params = { // 'conEnquiryTicketVo.startTime':startTime.getValue(), // 'conEnquiryTicketVo.endTime':endTime.getValue(), // start:0, // limit:itemsPerPage // }; // }); store.load({params:params}); } });
4.效果图
对应的Java代码在上一篇:
ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询
基础上将GetJobDataAction.java内容修改为:package com.qiuzhping.report.action; import java.math.BigDecimal; import java.util.List; import org.apache.log4j.Logger; import com.opensymphony.xwork2.ActionSupport; import com.qiuzhping.report.dao.impl.DepartmentDaoImpl; import com.qiuzhping.report.domian.Job; /** * <Description functions in a word> * <Detail description> * * @author Qiuzhenping * @version [Version NO, 2014-12-5] * @see [Related classes/methods] * @since [product/module version] */ public class GetJobDataAction extends ActionSupport{ /** *serialVersionUID */ private static final long serialVersionUID = 3288957476157165689L; private Logger log = Logger.getLogger(this.getClass()); private BigDecimal totalCount; private List rootData; private int start; private int limit; private String query;<span><span class="comment">/**query字段对应的是扩展组件searchfield的名字,详细的可以查看searchfield的源码*/</span><span></span></span> public String getQuery() { return query; } public void setQuery(String query) { this.query = query; } public BigDecimal getTotalCount() { return totalCount; } public void setTotalCount(BigDecimal totalCount) { this.totalCount = totalCount; } public List getRootData() { return rootData; } public void setRootData(List rootData) { this.rootData = rootData; } public int getStart() { return start; } public void setStart(int start) { this.start = start; } public int getLimit() { return limit; } public void setLimit(int limit) { this.limit = limit; } @Override public String execute(){ try { DepartmentDaoImpl ddi = new DepartmentDaoImpl(); log.info("start = "+start); log.info("limit = "+limit); int end = start+limit; log.info("end = "+end); totalCount = ddi.getTotalCount(Job.class,query); rootData = ddi.getData(start, limit,Job.class,query); } catch (Exception e) { log.error(e); } return SUCCESS; } }
DepartmentDaoImpl.java内容修改为:
package com.qiuzhping.report.dao.impl; import java.lang.reflect.Field; import java.math.BigDecimal; import java.sql.SQLException; import java.sql.Timestamp; import java.util.List; import org.hibernate.HibernateException; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transaction; import com.qiuzhping.report.domian.Job; import com.qiuzhping.report.util.HibernateSessionFactory; /** * <Description functions in a word> * <Detail description> * * @author Qiuzhenping * @version [Version NO, 2014-12-5] * @see [Related classes/methods] * @since [product/module version] */ public class DepartmentDaoImpl{ private HibernateSessionFactory hsf = HibernateSessionFactory.getInstance(); public BigDecimal getTotalCount(Class clazz,String name){ Session session = hsf.getSessionFactory().openSession(); StringBuffer sql = new StringBuffer("SELECT * FROM job "); if(name != null){ sql.append(" WHERE loginName like '%"+name+"%' "); } SQLQuery query =session.createSQLQuery(sql.toString()); query.addEntity(clazz); return new BigDecimal(query.list().size()); } public List<Job> getData(int start,int end,Class clazz,String name){ Session session = hsf.getSessionFactory().openSession(); StringBuffer sql = new StringBuffer("SELECT * FROM job"); if(name != null){ sql.append(" WHERE loginName like '%"+name+"%' "); } sql.append(" LIMIT "+start+","+end); SQLQuery query =session.createSQLQuery(sql.toString()); query.addEntity(clazz); return query.list(); } public void save() throws HibernateException, SQLException{ Session session = hsf.getSessionFactory().openSession(); Transaction tx = session.beginTransaction(); for (int i = 0; i < 1000; i++) { Job job = new Job(); job.setId(i + 10); job.setBrithday(new Timestamp(System.currentTimeMillis())); job.setSexId(0); job.setLoginName("qiuzhping"+i); job.setLastName("qiuzhping"+i); job.setFirstName("qiu"+i); job.setDepId(1); session.saveOrUpdate(job); if (i % 20 == 0) { // 单次批量操作的数目为20 session.flush(); // 清理缓存,执行批量插入20条记录的SQL insert语句 session.clear(); // 清空缓存中的Customer对象 } } tx.commit(); session.close(); } /** <Description functions in a word> * * <Detail description> * @author Qiuzhenping * @param args [Parameters description] * @return void [Return type description] * @throws SQLException * @throws HibernateException * @exception throws [Exception] [Exception description] * @see [Related classes#Related methods#Related properties] */ public static void main(String[] args) throws HibernateException, SQLException { //DepartmentDaoImpl ddi = new DepartmentDaoImpl(); //ddi.save(); //System.out.println(ddi.getData(0, 25,Job.class).size()); Field[] fields = Job.class.getDeclaredFields(); for(Field f :fields){ System.out.print("\""+f.getName()+"\","); } } }
转摘请注明:http://blog.csdn.net/qiuzhping/article/details/41811655
ExtJs4.2序列笔记
ExtJs4.2应用:ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询
ExtJs4.2应用:使用ExtJs扩展组件searchfield实现数据搜索功能
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。