ExtJS4.2 Learning (20) Dynamic Data Table previous chapters summary 1

This section uses the technique: springmvc+jetty+extjs4.2+maven+mysql5.1 above +slf4j (the first few sections study everybody does not know to remember not, now to summarize the review, by the way add new technology)

Before you learn this section: Eclipse High, jetty plugin, maven plugin, JDK1.7

Rest for a long time did not start the tutorial, indeed recently too tired, we forgive! First look at the effect, this chapter is a continuous article, today is the sequel of the first talk, the front is static explanation, we do not think it is enjoyable ah? I learn Java, of course, and Java technology combined with the explanation, the front also said that the future will be explained with Dynamic data. First, get ready to work, create MySQL database Shuyangyang

/*navicat MySQL Data Transfer Source server:localhostsource Server Ver                                           Sion:50133source Host:localhost:3306source Database:shuyangyang                                           Target Server Type:mysqltarget Server Version:50133file encoding:65001 date:2014-02-18 23:04:49*/SET foreign_key_checks=0;----------- ---------------------table structure for ' t_users '------------------------------DROP table IF EXISTS ' t_users '; CREATE TABLE ' t_users ' (' ID ' int (255) NOT NULL auto_increment, ' Name ' varchar (255) DEFAULT NULL, ' age ' smallint (6) DEF  Ault null, ' Address ' varchar (255) default NULL, ' CardID ' varchar (255) default NULL, ' Role ' varchar (255) default NULL, ' DepartMent ' varchar (255) default NULL, ' Sex ' varchar (255) default NULL, PRIMARY KEY (' ID ')) Engine=myisam auto_incremen       t=19 DEFAULT Charset=utf8;                                     --------------------------------Records of t_users------------------------------in SERT into t_users values (' 1 ', ' Zhang San ', ' 20 ', ' Haidian District ', ' 342425199002131239 ', ' normal user ', ' user group ', ' Male '); INSERT into t_users values (' 2 ', ' John Doe ', ' 22 ', ' Shanghai Changning ', ' 342425199107203116 ', ' admin ', ' Management Group ', ' Female '); INSERT into T_users VALUES (' 3 ', ' Harry ', ' 24 ', ' Nanjing ', ' 3426198920314669 ', ' Customer service ', ' Customer service Group ', ' Female '); INSERT into T_users VALUES (' 4 ', ' Zhao da ', ' 23 ', ' Nantong ', ' 3424198805134567 ', ' normal user ', ' with INSERT INTO T_users VALUES (' 5 ', ' Guojin ', ' 21 ', ' Shandong ', ' 3526199001234569 ', ' normal user ', ' user group ', ' Male '); INSERT INTO t_users VALUES (' 6 ', ' Test ', ' 456489731312123 ', ' tests ', ' n ', ' Test ', ' test ', ' Male '), INSERT into T_users VALUES (' 7 ', ' 31 ', ' 20 ', ' Beijing City Haidian District ', ' 342425199002131239 ', ' Ordinary user ', ' user group ', ' Male '); INSERT into T_users VALUES (' 8 ', ' Li 41 ', ' 22 ', ' Changning District, Shanghai ', ' 3424251991072031 16 ', ' admin ', ' Management Group ', ' Female '); INSERT into T_users VALUES (' 9 ', ' King 51 ', ' 24 ', ' Nanjing ', ' 3426198920314669 ', ' Customer service ', ' Customer service ', ' female '); Inser T into T_users VALUES ('10 ', ' Zhao da tou 1 ', ' 23 ', ' Nantong ', ' 3424198805134567 ', ' Ordinary user ', ' user group ', ' Male '); INSERT into T_users VALUES (' 11 ', ' Guojin 1 ', ' 21 ', ' Shandong province ', ' 3 526199001234569 ', ' normal user ', ' user group ', ' Male '); INSERT into T_users VALUES (' 12 ', ' Test 1 ', ' '- Est ', ' male '); insert into T_users VALUES (' 13 ', ' 32 ', ' 20 ', ' Haidian district of Beijing ', ' 342425199002131239 ', ' normal user ', ' user group ', ' Male '); INSERT into T_users values (' 14 ', ' Li 42 ', ' 22 ', ' Shanghai Changning ', ' 342425199107203116 ', ' admin ', ' Management Group ', ' Female '); INSERT into T_users VALUES (' 15 ', ' King 52 ', ' 24 ', ' Nanjing ', ' 3426198920314669 ', ' Customer service ', ' Customer service Group ', ' Female '); INSERT into T_users VALUES (' 16 ', ' Zhao da tou 2 ', ' 23 ', ' Nantong ', ' 34241988 05134567 ', ' normal user ', ' user group ', ' Male '); INSERT into T_users VALUES (' 17 ', ' Guojin 2 ', ' 21 ', ' Shandong province ', ' 3526199001234569 ', ' normal user ', ' user group ', ' male INSERT into T_users VALUES (' 18 ', ' Test 2 ', ' + ', ' tests ', ' 456489731312123 ', ' Test ', ' Test ', ' man ');

Second, set up a good framework, I will provide the source code for everyone to download

650) this.width=650; "Src=" http://www.shuyangyang.com.cn/d/file/jishuliangongfang/qianduanjishu/20140218/ C12850c353b8935d590c6f6bc6bd9a68.jpg "alt=" Qq20140218230857.jpg "/>

Third, the final effect, mainly in the middle of the framework of data display

650) this.width=650; "Src=" http://www.shuyangyang.com.cn/d/file/jishuliangongfang/qianduanjishu/20140218/ 21460f68d22aaaf27b2fb347b4f7d21f.jpg "alt=" qq20140218230857.jpg "/> Front Interface code (here is the data presentation layer code, all the code can be downloaded at the end of the article):

Table configuration start var columns = [{header: ' number ', Dataindex: ' ID '}, {header: ' name ', ' dataindex: ' names '}, {header: ' Age ', Dataindex: ' AG E '}, {header: ' Gender ', dataindex: ' Sex ', renderer:function (value) {if (value== ' m ') {return ' <span styl          E= ' color:green;font-weight:bold ';> male </span> ";          } else {return "<span style= ' color:red;font-weight:bold ';> women </span>"; }, {header: ' Addresses ', Dataindex: ' Address '}, {header: ' ID number ', dataindex: ' CardId ', width:150}, {header: ' Roles ', Dataindex: ' Role                          '}, {header: ' Department ', Dataindex: ' DepartMent '}];          Convert raw data to EXT can display data var store = new Ext.data.Store ({pagesize:13,//per page shows several data proxy:{type: ' Ajax ', URL: '/user/showuser ', reader:{type: ' JSON ', Totalproperty: ' Total ', RO OT: ' Data ', Idproperty: ' ID '}}, fields:[{name: ' ID '},//mapping:0 This allows you to specify the position of the column display, 0 for the 1th column, optionally set the position of the column display {NamE: ' name '}, {name: ' age '}, {name: ' Sex '}, {name: ' Address '}, {name: ' CardId '}, {name: ' Role '},  {name: ' DepartMent '}]                            }); var Grid = new Ext.grid.GridPanel ({store:store, columns:columns, title: ' Data ', Region: ' Center ',//frame display position, single          Running alone can remove this segment of loadmask:true,//show matte and hint function, i.e. load loading ...//forcefit:true//Auto Fill table Bbar:new Ext.pagingtoolbar ({ Store:store, Displayinfo:true,//whether to display data information displaymsg: ' Show the {0} to {1} records, altogether {2} ',//As long as Displayinf O is true when the message is displayed with data, {0},{1},{2} is automatically replaced with the corresponding data emptymsg: "No Record"///No data is displayed)});/Load Data store.load ({params : {start:0,limit:13}}); End of Table configuration

The URL request address here is/user/showuser, here is the SPRINGMVC address, see the following controller code:

Package com.shyy.web.controller.anntation;                     Import java.util.List;                     Import Javax.servlet.http.httpservletrequest;import javax.servlet.http.HttpServletResponse; Import Org.slf4j.logger;import Org.slf4j.loggerfactory;import Org.springframework.stereotype.controller;import Org.springframework.web.bind.annotation.requestmapping;import                     Org.springframework.web.bind.annotation.ResponseBody; Import Com.shyy.web.controller.response.emptyresponse;import com.shyy.web.controller.response.NormalResponse; Import Com.shyy.web.controller.response.response;import Com.shyy.web.entity.user;import                     Com.shyy.web.service.userservice;import Com.shyy.web.service.impl.UserServiceImpl; @Controller @requestmapping ("/user/") public class Usercontroller {Logger Logger = loggerfactory.ge                               Tlogger (Usercontroller.class);    UserService userservice = new Userserviceimpl ();                         /** * SPRINGMVC returns the JSON data * @return */@RequestMapping ("Showuser") @ResponseBody Public Response resp (httpservletrequest req, HttpServletResponse resp) {String start = Req.getparameter ("Start")          ;//Start page String limit = Req.getparameter ("limit");//number per page int index = integer.parseint (start);        int pageSize = Integer.parseint (limit); list<user> list = Userservice.query (index,pagesize);        Get all user data long total = List.size (); if (total>0) {Logger.debug ("now {}", "Return user data ...            ");        return new Normalresponse (List,userservice.total ()); }else{Logger.debug ("Now {}", "User data is empty!")            ");        return new Emptyresponse (); }                                 }}

The last Normalresponse returned is a return object in my package, as shown in the following code:

Package com.shyy.web.controller.response;                            public class Normalresponse extends Response {public                  normalresponse (Object data) {        This.setcode ( Responsecode.ok);        This.setmessage ("");        This.setdata (data);        This.setsuccess (True);    }                      Public Normalresponse (Object data, Long total) {        this.setcode (Responsecode.ok);        This.setmessage ("");        This.setdata (data);        This.setsuccess (true);        This.settotal (total);    }                  Public Normalresponse () {        this.setcode (Responsecode.ok);        This.setmessage ("");        This.setdata (null);        This.setsuccess (True);}    }

SOURCE download: "Point I Download" (which contains a section of my previous chapters on the source code, run this section address is: http://localhost:8090/demo/index.jsp) Note: The front opening knowledge of students please consciously charge.

In the serial, please continue to pay attention! This article is from my personal website thinker Diary Network

This article is from the "on My" blog, so be sure to keep this source http://shuyangyang.blog.51cto.com/1685768/1408303