ExtJs4.2 application: Use ExtJs extension component searchfield to implement data search. extjssearchfield

ExtJs4.2 application: Use ExtJs extension component searchfield to implement data search. extjssearchfield
ExtJs4.2 application: Use ExtJs extension component searchfield to implement data search

1. Introduce the searchfield component and put it in the ux directory under the Ext directory. Put the searchfield component under the form file under the ux directory ,:

2. Introduce the searchfield component into the corresponding Js File

DockedItems: [{dock: 'top',/** display at the top */xtype: 'toolbar',/** display in toolbar form */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 rootPath is the Ext class and path, for example, http: // localhost: 8080/demo/Ext */store: store/** corresponding dataset */}, {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'}, pa GeSize: itemsPerPage, autoLoad: true}); Ext. onReady (function () {Ext. loader. setConfig ({enabled: true}); Ext. create ('ext. grid. panel ', {title: 'job enquiry', width: '000000', 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: 'telphone', sortable: true}, {header: "brithday", flex: 1, align: "center", dataIndex: 'brithday', sortable: true}, {hea Der: "Sex Id", flex: 1, align: "center", dataIndex: 'sexid', sortable: true}, {header: "Dep Id", flex: 1, align: "center", dataIndex: 'Demo', sortable: true}], store: store, // style: "margin-left: auto; margin-right: auto; align: center ", pageSize: itemsPerPage, dockedItems: [{dock: 'top',/** display at the top */xtype: 'toolbar ', /** display in toolbar */items: {width: "25%", fieldLabel: 'login Name: ', labelWidth: 100, x Type: 'searchfield',/** searchfield is the extension component Reference Path of ExtJs. loader. setPath ('ext. ux ', rootPath +'/ux/') Where rootPath is the Ext class and path, for example, http: // localhost: 8080/demo/Ext */store: store/** corresponding dataset */}, {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"); endTi Me = 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 is shown in the previous article:

ExtJs4.2 application: ExtJs4.2 + Mysql + Struts2 + Hibernate3 implement paging Query

Modify the GetJobDataAction. java content:

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">/** the query field corresponds to the name of the extended component searchfield, for details, see the searchfield source code */</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 ;}}

Modify DepartmentDaoImpl. java content:

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 (). op EnSession (); 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) {// The number of Single Batch operations is 20 sessions. flush (); // clears the cache and executes the SQL insert statement session to insert 20 records in batches. clear (); // clear the Customer object in the cache} 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 () + "\",");}}}

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

ExtJs4.2 serial notes ExtJs4.2 application: ExtJs4.2 + Mysql + Struts2 + Hibernate3 implement paging query ExtJs4.2 application: Use ExtJs extension component searchfield to implement data search function