jquery In this respect is the opposite, its UI is provided in the form of plug-ins, what can be used to refer to what, so very small and flexible, but because plug-ins are often provided by different people or teams, the interface and interface are often less consistent. It's all the same.
Today, learn the grid in ExtJS, it can be said to be powerful, unmatched, only you do not think, no it does not, hehe, seems to be a little exaggerated. OK, let's not talk nonsense, we start with the simplest grid, step by step to see what the grid ExtJS provides us with what function.
A grid consists of rows and columns, in ExtJS, columns are managed by Ext.grid.ColumnModel, let's see how to create a Columnmodel object:
Copy Code code as follows:
var cm = new Ext.grid.ColumnModel ([
{ID: ' Company ', header: [Company], width:160, Sortable:true, Dataindex: ' Company '},
{header: "Price", width:75, Sortable:true, dataindex: ' Price '},
{header: "Change", width:75, Sortable:true, dataindex: ' Change '},
{Header:% change, width:75, Sortable:true, dataindex: ' Pctchange '},
{header: "Last Updated", width:85, Sortable:true, dataindex: ' Lastchange '}
]);
This defines five columns, which can be configured by parameters: IDs are used to identify columns, which can be used in CSS to set styles for all cells in an entire column, and columns that can be automatically expanded are identified by this ID; the header is the column name; the width is the widths of the columns; Sortable is used to indicate whether the column can be sorted, dataindex, and ignore it first. The more commonly used parameters are: editable, indicating whether the column is editable, renderer, indicating how the column is rendered, and then describing it in detail later.
With columns, we also need some data to populate the rows and construct an array:
Copy Code code as follows:
var myData = [
[' 3m Co ', 71.72,0.02,0.03, ' 9/1 12:00am '],
[' Alcoa Inc ', 29.01,0.42,1.47, ' 9/1 12:00am '],
[' Altria Group Inc ', 83.81,0.28,0.34, ' 9/1 12:00am '],
[' American Express Company ', 52.55,0.01,0.02, ' 9/1 12:00am '],
[' American International Group, Inc. ', 64.13,0.31,0.49, ' 9/1 12:00am '],
[' At&t Inc. ', 31.61,-0.48,-1.54, ' 9/1 12:00am '],
[' Boeing Co. ', 75.43,0.53,0.71, ' 9/1 12:00am '],
[' Caterpillar Inc. ', 67.27,0.92,1.39, ' 9/1 12:00am '],
[' 49.37,0.02,0.04, Inc. ', ' 9/1 12:00am '],
[' e.i du Pont de Nemours and Company ', 40.48,0.51,1.28, ' 9/1 12:00am '],
[' Exxon Mobil Corp ', 68.1,-0.43,-0.64, ' 9/1 12:00am '],
[' General Electric Company ', 34.14,-0.08,-0.23, ' 9/1 12:00am '],
[' General Motors Corporation ', 30.27,1.09,3.74, ' 9/1 12:00am '],
[' Hewlett-Packard Co. ', 36.53,-0.03,-0.08, ' 9/1 12:00am '],
[' Honeywell Intl Inc ', 38.77,0.05,0.13, ' 9/1 12:00am '],
[Intel Corporation ', 19.88,0.31,1.58, ' 9/1 12:00am '],
[' International Business machines ', 81.41,0.44,0.54, ' 9/1 12:00am '],
[' Johnson & Johnson ', 64.72,0.06,0.09, ' 9/1 12:00am '],
[' JP Morgan & Chase & Co ', 45.73,0.07,0.15, ' 9/1 12:00am '],
[mcdonald\ ' s Corporation ', 36.76,0.86,2.40, ' 9/1 12:00am '],
[' Merck & Co., Inc. ', 40.96,0.41,1.01, ' 9/1 12:00am '],
[' Microsoft Corporation ', 25.84,0.14,0.54, ' 9/1 12:00am '],
[' Pfizer Inc ', 27.96,0.4,1.45, ' 9/1 12:00am '],
[' The Coca-Cola Company ', 45.07,0.26,0.58, ' 9/1 12:00am '],
[' The Home Depot, Inc. ', 34.64,0.35,1.02, ' 9/1 12:00am '],
[' The Procter & Gamble company ', 61.91,0.01,0.02, ' 9/1 12:00am '],
[' United Technologies Corporation ', 63.26,0.55,0.88, ' 9/1 12:00am '],
[Verizon Communications ', 35.57,0.39,1.11, ' 9/1 12:00am '],
[' Stores, Inc. ', 45.45,0.73,1.63, ' 9/1 12:00am ']
];
Now everything is in the wind, the columns are defined, the data is there, and the next step is to assemble them into a grid. Take a look at the complete code:
Copy Code code as follows:
<reference path= "Vswd-ext_2.0.2.js"/>
/**//*
* Author: Big stupid
* Date: 2009-10-13
* Version: 1.0
*/
Ext.onready (function () {
Constructing columns
var cm = new Ext.grid.ColumnModel ([
{ID: ' Company ', header: [Company], width:160, Sortable:true, Dataindex: ' Company '},
{header: "Price", width:75, Sortable:true, dataindex: ' Price '},
{header: "Change", width:75, Sortable:true, dataindex: ' Change '},
{Header:% change, width:75, Sortable:true, dataindex: ' Pctchange '},
{header: "Last Updated", width:85, Sortable:true, dataindex: ' Lastchange '}
]);
Constructing data
var myData = [
[' 3m Co ', 71.72, 0.02, 0.03, ' 9/1 12:00am '],
[' Alcoa Inc ', 29.01, 0.42, 1.47, ' 9/1 12:00am '],
[Altria Group Inc, 83.81, 0.28, 0.34, ' 9/1 12:00am '],
[' American Express Company ', 52.55, 0.01, 0.02, ' 9/1 12:00am '],
[' American International Group, Inc. ', 64.13, 0.31, 0.49, ' 9/1 12:00am '],
[' At&t Inc. ', 31.61, -0.48, -1.54, ' 9/1 12:00am '],
[Boeing Co., 75.43, 0.53, 0.71, ' 9/1 12:00am '],
[' Caterpillar Inc. ', 67.27, 0.92, 1.39, ' 9/1 12:00am '],
[' 49.37, Inc. ', 0.02, 0.04, ' 9/1 12:00am '],
[' e.i du Pont de Nemours and Company ', 40.48, 0.51, 1.28, ' 9/1 12:00am '],
[' Exxon Mobil Corp ', 68.1, -0.43, -0.64, ' 9/1 12:00am '],
[' General Electric Company ', 34.14, -0.08, -0.23, ' 9/1 12:00am '],
[' General Motors Corporation ', 30.27, 1.09, 3.74, ' 9/1 12:00am '],
[' Hewlett-Packard Co. ', 36.53, -0.03, -0.08, ' 9/1 12:00am '],
[' Honeywell Intl Inc ', 38.77, 0.05, 0.13, ' 9/1 12:00am '],
[Intel Corporation, 19.88, 0.31, 1.58, ' 9/1 12:00am '],
[' International Business machines ', 81.41, 0.44, 0.54, ' 9/1 12:00am '],
[' Johnson & Johnson ', 64.72, 0.06, 0.09, ' 9/1 12:00am '],
[' JP Morgan & Chase & Co ', 45.73, 0.07, 0.15, ' 9/1 12:00am '],
[mcdonald\ ' s Corporation ', 36.76, 0.86, 2.40, ' 9/1 12:00am '],
[' Merck & Co., Inc. ', 40.96, 0.41, 1.01, ' 9/1 12:00am '],
[' Microsoft Corporation ', 25.84, 0.14, 0.54, ' 9/1 12:00am '],
[' Pfizer Inc ', 27.96, 0.4, 1.45, ' 9/1 12:00am '],
[' The Coca-Cola Company ', 45.07, 0.26, 0.58, ' 9/1 12:00am '],
[' The Home Depot, Inc. ', 34.64, 0.35, 1.02, ' 9/1 12:00am '],
[' The Procter & Gamble company ', 61.91, 0.01, 0.02, ' 9/1 12:00am '],
[' United Technologies Corporation ', 63.26, 0.55, 0.88, ' 9/1 12:00am '],
[Verizon Communications ', 35.57, 0.39, 1.11, ' 9/1 12:00am '],
[' Stores, Inc. ', 45.45, 0.73, 1.63, ' 9/1 12:00am ']
];
Construct grid
var Grid = new Ext.grid.GridPanel ({
Renderto: "Grid",
Store:new Ext.data.ArrayStore ({
Fields: [
{name: ' Company '},
{name: ' Price ', type: ' Float '},
{name: ' Change ', type: ' Float '},
{name: ' Pctchange ', type: ' Float '},
{name: ' Lastchange ', type: ' Date ', DateFormat: ' N/j H:ia '}
],
Data:mydata
}),
CM:CM,
Striperows:true,
Autoexpandcolumn: ' Company ',
HEIGHT:350,
width:600,
Title: ' Array Grid '
});
})
In ExtJS, Ext.grid.GridPanel represents a grid that requires a JSON object to be configured as a parameter, and we look at the configuration used:
Renderto: Indicates where to render the grid after it is constructed, it can be the ID of an element, a DOM node, or an element object, and without this parameter, the Ext.grid.GridPanel render method must be invoked to render the grid.
Stroe: Can be abbreviated to DS, a unified interface to provide data to the grid, we know that the data may have many formats, in addition to the array we use, but also can be json,xml and so on, if the grid is responsible for identifying each data format is obviously not a good design idea, So in ExtJS there is a special class Ext.data.Store to be responsible for the format conversion of the data, where we use its subclass Arraystore, as the name suggests, is specifically for the array to convert. We will specifically have a series to discuss some of the classes below the Ext.data namespace, and then have a deep understanding of the store class. Now let's just look at the fields field we used, It is a collection of Ext.data.Field classes that have a Name property, and the dataindex that we columnmodel in front of it is a reference to the value of the attribute to the relationship between the column and field, type is used to indicate types, default is String type, Dateforma T indicates the format of the date.
Cm:colmodel, here are the Columnmodel objects that we have constructed in front of us.
Striperows: Stripes are displayed.
Autoexpandcolumn: An automatically expanded column that automatically fills the blank space of the grid.
Height and width of width:grid.
The title of the Title:grid.
Now we run a look at the effect, it should be said that the grid is pretty, click on the name of the column can be sorted, the width of the column can be freely dragged, position can also be changed. By pressing the CTRL key, we can select multiple rows. When we move the mouse to the column name, we can also see a small inverted triangle, click on the menu, you can see the column can be sorted, you can also hide the column. But we also see that the date display is not satisfactory, the percentage is still floating point, and we usually use the deficit to indicate a loss or a more popular version of negative, if in our grid, negative growth can also be expressed in the deficit, the effect should be better. ExtJS provides us with a very convenient thing to achieve our ideas: renderer. Inside the Columnmodel, we can add renderer to the desired column side to achieve the desired effect. Below is the modified Columnmodel:
Copy Code code as follows:
Constructing columns
var cm = new Ext.grid.ColumnModel ([
{ID: ' Company ', header: [Company], width:160, Sortable:true, Dataindex: ' Company '},
{header: "Price", width:75, Sortable:true, dataindex: ' Price '},
{header: "Change", width:75, Sortable:true, dataindex: ' Change ', renderer:change},
{Header:% change, width:75, Sortable:true, dataindex: ' Pctchange ', Renderer:pctchange},
{header: "Last Updated", width:120, Sortable:true, dataindex: ' Lastchange ', Renderer:Ext.util.Format.dateRenderer (" Y-m-d h:i ")}
]);
Renderer function for Change column
function Change (val) {
if (val > 0) {
Return ' <span style= ' color:green; > ' + val + ' </span> ';
else if (Val < 0) {
Return ' <span style= ' color:red; > ' + val + ' </span> ';
}
return Val;
}
Renderer function for% change column
Function Pctchange (val) {
if (val > 0) {
Return ' <span style= ' color:green; > ' + val + '%</span> ';
else if (Val < 0) {
Return ' <span style= ' color:red; > ' + val + '%</span> ';
}
return Val;
}
Renderer can be interpreted as an "interpreter" method, which is used to transform data before the data is displayed. There are three different ways to implement renderer:
Use a renderer function that returns HTML tags
Ext.util.Format a property of the class that provides a renderer function
An object that includes renderer functions and scopes
Our examples are used in the first two ways. The renderer function passes 6 arguments, saves all the information about the cell, uses only the first parameter, it holds the value of the cell, and the other arguments we can refer to the Help document.
Now run the program, you can see the effect we want: negative growth with the deficit to say, as a contrast, positive increase in the green color, time also in the format we want to show out.
Sometimes, we also want to give each line number, this implementation is also very easy, we simply add the Columnmodel constructor inside the new Ext.grid.RowNumberer () on it:
Copy Code code as follows:
var cm = new Ext.grid.ColumnModel ([
New Ext.grid.RowNumberer (),//implementation AutoNumber
{ID: ' Company ', header: [Company], width:160, Sortable:true, Dataindex: ' Company '},
{header: "Price", width:75, Sortable:true, dataindex: ' Price '},
{header: "Change", width:75, Sortable:true, dataindex: ' Change ', renderer:change},
{Header:% change, width:75, Sortable:true, dataindex: ' Pctchange ', Renderer:pctchange},
{header: "Last Updated", width:120, Sortable:true, dataindex: ' Lastchange ', Renderer:Ext.util.Format.dateRenderer (" Y-m-d h:i ")}
]);
The Ext.grid.GridPanel configuration also contains two commonly used parameters:
Viewconfig: We can use this parameter to make some settings for the interface of the grid, and the details can be viewed in the Help document.
Selmodel: Can be abbreviated to SM, select the model, such as select a cell or select the entire row, default is to select the row.
