ExtJs Table Control (1)

ExtJs Table Control (1)

The ExtJs table is defined by Ext. grid. GridPanel. Its xtype is grid. The column information in the table is defined by columns, and the data storage of the table is defined by Ext. data. Store.

The column definition is a JSON array. This JSON number is the model of the entire table column. Each element in this JSON array describes the attributes of a column, including: display text (header), the record set field (dataIndex) corresponding to the column, the column rendering function (renderer), width (width), and format information (format ).

The following is an example:

First, introduce EXT-related resources in the JSP page, introduce JS Files written by yourself, and define a DIV in the page and define the ID as grid. Displays written tables.

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>My JSP 'index.jsp' starting page
 <script type="text/javascript" src="./extjs/ext-all.js"></script><script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script><script type="text/javascript" src="./script/table.js"></script>

Then, let's look at table. js. In this JS file, columns, Store, and grid are defined.

Ext. onReady (function () {// rendering function var datarender = function (value) {return "" + value + "" ;}; var columns = [{header: 'column 1 ', dataIndex: 'first', renderer: datarender}, {header: 'column 2', dataIndex: 'second'}, {header: 'column 3 ', dataIndex: 'third'}, {header: 'column 4', dataIndex: 'four ', format: 'Y-m-d H: I: s', width: 120}]; var store = new Ext. data. store ({proxy: {// type: 'ajax ', url: 'grid _ StoreMsg', reader: {// data parsing method type: 'json ', root: 'model' // specify the key}, fields: [{name: 'first'}, {name: 'second'}, {name: 'third'}, {name: 'four'}]}); store. load (); var grid = new Ext. grid. gridPanel ({renderTo: 'grid', columns: columns, store: store });});

Use Struts2 to intercept requests. For details, refer to Struts and xml.

Here, the return value type must be defined as JSON, and all packages must be integrated from json-default. The following describes the specific classes.

To facilitate data transmission, each row in the table is considered as an object. Encapsulate the information into a javabean.

package model;public class Model {private String first;private String second;private String third;private String four;public Model(){}public Model(String first,String second,String third,String four){this.first = first;this.second = second;this.third = third;this.four = four;}public String getFirst() {return first;}public void setFirst(String first) {this.first = first;}public String getSecond() {return second;}public void setSecond(String second) {this.second = second;}public String getThird() {return third;}public void setThird(String third) {this.third = third;}public String getFour() {return four;}public void setFour(String four) {this.four = four;}}

Here we define a method to directly return the object of this Model class. In actual production, we need to get the object after processing.

Package service; import model. model; public class Service {public Model modelMsg () {Model model = new Model (); model. setFirst ("first line"); model. setSecond ("second line"); model. setThird ("Row 3"); model. setFour ("20150205 14:32:46"); return model ;}}

The following is an Action class.

package action;import service.Service;import model.Model;import com.opensymphony.xwork2.ActionSupport;public class GridAction extends ActionSupport {private Model model;private Service service = new Service();public Model getModel() {return model;}public void setModel(Model model) {this.model = model;}public String StoreMsg(){model = service.modelMsg();return SUCCESS;}}

The type defined by Struts should be JSON, and there is no restriction on returned fields in the configuration file. After all the fields are processed by Action, all attributes will be encapsulated into a JSON object and returned. Therefore, you need to specify the root attribute in the Store reader to facilitate parsing. Next, let's take a look at the firebug display and running effect.

If multiple data entries are returned, you can define an ArrayList object in Action. The objects stored in this object are the information of the columns to be returned. Change the root value in reader to the name of the ArrayList object.