ExtJS Table Control (i)

The ExtJS table is defined by the class Ext.grid.GridPanel and its xtype is a grid. The column information in the table is defined by columns, and the data memory of the table is defined by Ext.data.Store.

The definition of a column is a JSON array, the JSON number is the entire table column model must first define, this JSON array of each element is to describe a column of properties, including: Display text (header), column corresponding Recordset field (Dataindex), The Render function (renderer), width, and formatting information (format) for the column.

Let's look at a specific example:

First in the JSP page to introduce the EXT related resources, and introduce their own JS file, and in the page to define a div, the definition of the ID grid. Used to display the table written.

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
Then look at Table.js, which defines the columns and the store and the grid in this JS file.
Ext.onready (function () {///render var Datarender = function (value) {return "<span style= ' color:green;font-weight:bold; ' > "+value+" </span> ";};  var columns = [{header: ' first column ', Dataindex: ' Primary ', Renderer:datarender}, {header: ' second column ', Dataindex: ' Second '}, {header: ' third column ', Dataindex: ' Third '}, {header: ' fourth column ', Dataindex: ' Four ', format: ' y-m-d h:i:s ', width:120}];var store = new Ext.data . Store ({proxy: {///Get data in type: ' Ajax ', url: ' grid_storemsg ', reader: {///Parse Data mode type: ' JSON ', Root: ' model '//Specify return JSON key} },fields: [{name: ' first '}, {name: ' second '}, {name: ' third '}, {name: ' Four '}]}); Store.load (); var Grid = new ext.gr Id. Gridpanel ({renderto: ' Grid ', columns:columns,store:store});
Here we use STRUTS2 to intercept the request and see Struts,xml
<?xml version= "1.0" encoding= "UTF-8"? ><! DOCTYPE struts Public "-//apache software foundation//dtd struts Configuration 2.1//en" "http://struts.apache.org/dtds/ Struts-2.1.dtd "><struts><package name=" Gridpackage "extends=" Json-default "><action name=" grid_* "Class=" action. Gridaction "method=" {1} "><result type=" JSON "name=" Success "></result><result type=" JSON "name=" Error "></result></action></package></struts>    
This requires that the return value type be defined as JSON, and all the package is integrated from Json-default. Here's a look at the specific class.
To facilitate data transfer, consider each row in the table as an object. Encapsulate his message as a JavaBean.
Package Model;public class Model {private string First;private string Second;private string Third;private string Four;publ IC 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;}}
This defines a method that directly returns the object of the model class, which is processed to get the object in the actual production.
Package Service;import model. Model;public class Service {public Model modelmsg () {Model model = new Model (); Model.setfirst ("First line"); Model.setsecond (" The second line "); Model.setthird (" Third row "); Model.setfour (" 20150205 14:32:46 "); return model;}}
Let's look at 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 ();p ublic model Getmodel () {return model;} public void Setmodel (model model) {This.model = model;} Public String storemsg () {model = Service.modelmsg (); return SUCCESS;}}
The type that should be defined for struts is JSON, and there are no restrictions on the returned fields in the configuration file, and all of the properties will be encapsulated as a JSON object after the action is processed. Therefore, you need to specify the root attribute in the store reader for easy parsing. Here's a look at the display of the Firebug, and how it works.

If the returned data is multiple, you can define an ArrayList object in the action that is stored in the object that is the information for the column that needs to be returned. Also change the root value in reader to the ArrayList object name.





ExtJS Table Control (i)