ExtJs4.2 application: Using ExtJS Extension Components Searchfield to implement data search capabilities

ExtJs4.2 applications: Using ExtJS extension Components Searchfieldimplementing data search capabilities

1. Introduce the Searchfield component into the UX directory in the EXT directory and place the Searchfield component under the form file in the UX directory:

2. Introducing the Searchfield component in the corresponding JS file

Dockeditems: [{          dock: ' Top ',   /** on top *        /xtype: ' Toolbar ',/** as toolbar */          items: {               width: ' 25% ',            Fieldlabel: ' Login Name: ',            labelwidth:100,            xtype: ' Searchfield ',/**searchfield is ExtJS's extension component                                 The reference path is Ext.Loader.setPath (' Ext.ux ', rootpath+ '/ux/')                                where RootPath is the Ext class with the path: like Http://localhost:8080/demo/Ext */            store:store/** corresponding Data set *         /}      },{        xtype: ' Pagingtoolbar ',        Store:store,        dock: ' Bottom ',        displayinfo:true    }]

3. Complete JS Code

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 ', sortabl E:true}, {header: "Last Name", Flex:1, align: "center", dataindex : ' LastName ', sortable:true              }, {header: "Login Name", Flex:1, align: "center", DataIn                  Dex: ' LoginName ', sortable:true}, {header: "Telephone", Flex:1,align: "Center", Hideable:false, Dataindex: ' Telephone ', sorta                 Ble: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 ',/** at the top */xtype: ' toolbar ',/** in toolbar */items: {width: ' 25% ", Fieldlabel: ' Login Name: ', labelwidth:100, xtype: ' Searchfield ',/**searchfield is ExtJS Extension Component Reference Path is Ext.Loader.setPath (' Ext.ux ', rootpath+ '/ux/') where r Ootpath is the Ext class with the path: such as Http://localhost:8080/demo/Ext */store:store/** corresponding data set */}},{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.

The corresponding Java code in the previous article:

ExtJs4.2 application: Extjs4.2+mysql+struts2+hibernate3 for paging query        

On the base, modify the Getjobdataaction.java content to:

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{/** *s Erialversionuid */private static final long serialversionuid = 3288957476157165689l;private Logger log = Logger.getlogger (This.getclass ());p rivate BigDecimal totalcount;private List rootdata;private int start;private int limit;private String query;<span><span class= "comment" >/**query field corresponds to the name of the extension Searchfield, detailed can see the source of 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;} @Overridepublic 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 Content modified to:

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 Hibernatesessionfa Ctory HSF = hibernatesessionfactory.getinstance ();p ublic 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 <; i++) {Job job = new Job (); Job.setid (i +); JOB.S Etbrithday (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) {//The number of single-batch operations is 20session.flush ();//clean cache, execute a SQL INSERT statement that inserts 20 records in bulk session.cleAR (); Empties the customer object in the cache}}tx.commit (); Session.close ();} /** <description Functions in a word> * * <detail description> * @author qiuzhenping * @param args [paramete RS description] * @return void [return type description] * @throws SQLException * @throws hibernateexception * @exceptio n throws [Exception] [Exception description] * @see [related classes#related methods#related properties] */public Static V OID 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 () +" \ ",");}}}

Please specify: http://blog.csdn.net/qiuzhping/article/details/41811655

ExtJs4.2 Sequence NotesExtJs4.2 Application: Extjs4.2+mysql+struts2+hibernate3 for paging queryExtJs4.2 application: Using ExtJS Extension Components Searchfield to implement data search capabilities

ExtJs4.2 application: Using ExtJS Extension Components Searchfield to implement data search capabilities