extjs study notes (3) The most basic grid_extjs

jquery is just the opposite in this regard. Its UI is provided in the form of plug-ins. You can reference whatever you need, so it is very small and flexible. However, since plug-ins are often provided by different people or teams, the interfaces and interfaces are often not so consistent. Anyway, each has its own merits.
Today I’m learning grid in extjs. It can be said to be powerful and unparalleled. There are only things you can’t think of and there’s nothing it can’t do. Haha, it seems to be a bit exaggerated. Okay, without further ado, let’s start with the simplest grid and see step by step what functions the grid provided by extjs provides us.
A grid includes some rows and columns. In extjs, columns are managed by Ext.grid.ColumnModel. Let’s take a look at how to create a ColumnModel object:

Copy the code The code is 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'}
]);

Five columns are defined here, and the columns can be configured through parameters: id is used to identify the column , use this id in css to set styles for all cells in the entire column. Automatically expandable columns are also identified according to this id; header is the column name; width is the width of the column; sortable is used to indicate whether the column can be sorted, dataIndex , ignore it for now. The more commonly used parameters include: editable, indicating whether the column is editable; renderer, indicating how the column is presented, which will be introduced in detail later.
With the columns, we still need some data to fill the rows, let’s construct an array:

Copy the code The code is 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'],
['Citigroup, Inc.',49.37,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'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

Now everything is ready. The columns are defined and the data is available. The next step is to assemble them into a grid. Take a look at the complete code:

Copy the code The code is as follows:

///
/**//*
*Author: Daben
*Date: 2009-10-13
*Version: 1.0
*/
Ext.onReady(function() {
//构造列
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' }
]);
//构造数据
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'],
['Citigroup, Inc.', 49.37, 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'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
//构造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, which requires a json object as a parameter for configuration. Let’s take a look at the configuration used:
renderTo: indicates where the grid will be rendered after it is constructed. It can be the id of an element, a Dom node or an Element object. If there is no such parameter, the render method of Ext.grid.GridPanel must be called to render the grid.
stroe: It can be abbreviated as ds, providing data to the grid with a unified interface. We know that the data may have many formats. In addition to the arrays we use, it can also be json, xml, etc. If the grid is responsible It is obviously not a good design idea to identify each data format, so there is a special class Ext.data.Store in extjs to be responsible for data format conversion. Here we use its subclass ArrayStore, which, as the name suggests, is a specialized For conversion to arrays. We will have a dedicated series to discuss some classes under the Ext.data namespace, and then we will have an in-depth understanding of the Store class. Now we only look at the fields we use, which is a collection of the Ext.data.Field class. This class has a name attribute. The dataIndex we ignored in the ColumnModel previously quoted the value of this attribute to correspond to the column and Field. The relationship between, type is used to indicate the type, the default is string type, and dateFormat indicates the format of the date.
cm: The abbreviation of colModel, just put the ColumnModel object we constructed earlier here.
stripeRows: Whether to display stripes.
autoExpandColumn: an automatically expanded column that automatically fills the empty space of the grid.
height and width: the height and width of the grid.
title: The title of the grid.
Now let’s run it and see the effect. It should be said that this grid is quite beautiful. Clicking on the column name can also be sorted. The width of the column can be freely dragged and the position can also be changed. By pressing the ctrl key, we can select multiple rows. When we move the mouse over the column name, we can also see a small inverted triangle appearing. Click to display a menu, and you can see that the columns can be sorted and the columns can be hidden. However, we have also seen that the date display is not satisfactory, and the percentage is still a floating point number, and we usually use deficit to represent loss or the more popular term negative growth. If it is in our grid, negative growth can also be represented by deficit. Come out, the effect should be better. extjs provides us with a very convenient thing to realize our ideas: renderer. In the ColumnModel, we can add renderer to the required columns to achieve the effect we want. The following is the modified ColumnModel:

Copy code The code is as follows:

//Construct column
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") }
]);
// Change column renderer function
function change(val) {
if (val > 0) {
return '' val '';
} else if (val < 0) {
return '' val '';
}
return val;
}
// % Change column renderer Function
function pctChange(val) {
if (val > 0) {
return '' val '%';
} else if (val < 0) {
return '' val '%';
}
return val;
}

renderer can be understood as an "interpreter" method, which is used to transform data before displaying it. There are three ways to implement a renderer:
Use a renderer function that returns HTML markup
An attribute of the Ext.util.Format class that provides a renderer function
An object that includes the renderer function and scope
Our example uses the first two methods. The renderer function passes 6 parameters and saves all the information of the cell. Only the first parameter is used here, which saves the value of the cell. We can refer to the help document for the meaning of other parameters.
Now run the program and you can see the effect we want: negative growth is represented by deficit, as a comparison, positive growth is represented by green color, and the time is also displayed in the format we want.
Sometimes, we also want to number each row. This is easy to implement. We only need to add new Ext.grid.RowNumberer() to the constructor of ColumnModel:

Copy code The code is as follows:

var cm = new Ext.grid.ColumnModel([
new Ext.grid .RowNumberer(), //Implement automatic numbering
{ 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") }
]);

There are two commonly used parameters in the configuration of Ext.grid.GridPanel:
viewConfig: We can use this parameter to make some settings for the grid interface. For details, please view the help document.
selModel: Can be abbreviated as sm, select the model, such as selecting cells or selecting the entire row. The default is to select the row.