Extjs learning notes (3) the most basic grid_extjs

One highlight of extjs is its rich UI, which allows programmers without art cells to make beautiful interfaces. Bringing all the UIS together has both advantages and disadvantages. The advantage is that they have a unified style and interface. The disadvantage is that js files are too large, the minimal set using extjs also exceeds 500 k, so it is not applicable in some projects. Jquery is the opposite in this regard. Its UI is provided in the form of a plug-in and can be referenced as needed, so it is very small and flexible, however, because the plug-ins are often provided by different people or teams, the interfaces and interfaces are often different. However, they have their own merits.
Today, I learned about grid in extjs. It can be said that it is powerful and has nothing to do with its right. It is just something you can't think of and cannot do without it. It seems a little exaggerated. Well, let's start with the simplest grid and take a step-by-step look at what functions extjs provides to us.
A grid contains rows and columns. In extjs, columns are managed by Ext. grid. ColumnModel. Let's see how to create a ColumnModel object:

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: 'pctchang '},
{Header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastchange '}
]);

Five columns are defined here. columns can be configured using parameters: id is used to identify columns. In css, this id can be used to set styles for all cells in the entire column, columns that can be automatically expanded are also identified by this id; header is the column name; width is the column width; sortable is used to specify whether the column is sortable, dataIndex, regardless of it. The commonly used parameters include editable, which indicates whether the column can be edited; renderer, which indicates how the column is displayed, which will be detailed later.
With columns, we also need some data to fill the rows and construct an array:

The Code is as follows:

Var myData = [
['3 M co', 71.72, 0.02, 0.03, '2017 am '],
['Alcoa inc', 29.01, 0.42, 1.47, '2017 am '],
['Altria Group inc', 83.81, 0.28, 0.34, '2017 am '],
['American Express Company ', 52.55, 0.01, 0.02, '2017 am'],
['American International Group, Inc. ', 64.13, 0.31, 0.49, '2017 am'],
['At & T Inc. ', 31.61,-0.48,-1.54, '2017 am'],
['Boeing Co. ', 75.43, 0.53, 0.71, '2017 am'],
['Caterpillar Inc. ', 67.27, 0.92, 1.39, '2017 am'],
['Citigroup, Inc. ', 49.37, 0.02, 0.04, '2017 am'],
['E. I. du Pont de Nemours and company', 40.48, 0.51, 1.28, '2017 am '],
['Exxon Mobil Corp ', 68.1,-0.43,-0.64, '2017 am'],
['General Electric Company ', 34.14,-0.08,-0.23, '2017 am'],
['General Motors Corporation ', 30.27, 1.09, 3.74, '2017 am'],
['Hewlett-Packard Co. ', 36.53,-0.03,-0.08, '2017 am'],
['Honeywell Intl inc', 38.77, 0.05, 0.13, '2017 am '],
['Intel Corporation ', 19.88, 0.31, 1.58, '2017 am'],
['International Business Machines ', 81.41, 0.44, 0.54, '2017 am'],
['Johnson & Johnson ', 64.72, 0.06, 0.09, '2017 am'],
['Jp Morgan & Chase & co', 45.73, 0.07, 0.15, '2017 am '],
['Mcdonald \'s Corporation ', 36.76, 0.86, 2.40, '2017 am'],
['Merck & Co., Inc. ', 40.96, 0.41, 1.01, '2017 am'],
['Microsoft origin', 25.84, 0.14, 0.54, '2017 am '],
['Pfizer inc', 27.96, 0.4, 1.45, '2017 am '],
['The Coca-Cola Company ', 45.07, 0.26, 0.58, '2017 am'],
['The Home Depot, Inc. ', 34.64, 0.35, 1.02, '2017 am'],
['The Procter & Gamble Company ', 61.91, 0.01, 0.02, '2017 am'],
['United Technologies Corporation ', 63.26, 0.55, 0.88, '2017 am'],
['Verizon Communications ', 35.57, 0.39, 1.11, '2017 am'],
['Wal-Mart Stores, Inc. ', 45.45, 0.73, 1.63, '2017 am']
];

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

The Code is as follows:

///
/**//*
* Author: Dummies
* Date: 2009-10-13
* Release: 1.0
*/
Ext. onReady (function (){
// Create a 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 '},
{Header: "% Change", width: 75, sortable: true, dataIndex: 'pctchang '},
{Header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastchange '}
]);
// Construct data
Var myData = [
['3 M co', 71.72, 0.02, 0.03, '2017 am '],
['Alcoa inc', 29.01, 0.42, 1.47, '2017 am '],
['Altria Group inc', 83.81, 0.28, 0.34, '2017 am '],
['American Express Company ', 52.55, 0.01, 0.02, '2017 am'],
['American International Group, Inc. ', 64.13, 0.31, 0.49, '2017 am'],
['At & T Inc. ', 31.61,-0.48,-1.54, '2017 am'],
['Boeing Co. ', 75.43, 0.53, 0.71, '2017 am'],
['Caterpillar Inc. ', 67.27, 0.92, 1.39, '2017 am'],
['Citigroup, Inc. ', 49.37, 0.02, 0.04, '2017 am'],
['E. I. du Pont de Nemours and company', 40.48, 0.51, 1.28, '2017 am '],
['Exxon Mobil Corp ', 68.1,-0.43,-0.64, '2017 am'],
['General Electric Company ', 34.14,-0.08,-0.23, '2017 am'],
['General Motors Corporation ', 30.27, 1.09, 3.74, '2017 am'],
['Hewlett-Packard Co. ', 36.53,-0.03,-0.08, '2017 am'],
['Honeywell Intl inc', 38.77, 0.05, 0.13, '2017 am '],
['Intel Corporation ', 19.88, 0.31, 1.58, '2017 am'],
['International Business Machines ', 81.41, 0.44, 0.54, '2017 am'],
['Johnson & Johnson ', 64.72, 0.06, 0.09, '2017 am'],
['Jp Morgan & Chase & co', 45.73, 0.07, 0.15, '2017 am '],
['Mcdonald \'s Corporation ', 36.76, 0.86, 2.40, '2017 am'],
['Merck & Co., Inc. ', 40.96, 0.41, 1.01, '2017 am'],
['Microsoft origin', 25.84, 0.14, 0.54, '2017 am '],
['Pfizer inc', 27.96, 0.4, 1.45, '2017 am '],
['The Coca-Cola Company ', 45.07, 0.26, 0.58, '2017 am'],
['The Home Depot, Inc. ', 34.64, 0.35, 1.02, '2017 am'],
['The Procter & Gamble Company ', 61.91, 0.01, 0.02, '2017 am'],
['United Technologies Corporation ', 63.26, 0.55, 0.88, '2017 am'],
['Verizon Communications ', 35.57, 0.39, 1.11, '2017 am'],
['Wal-Mart Stores, Inc. ', 45.45, 0.73, 1.63, '2017 am']
];
// Construct a 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: 'pctchang', type: 'float '},
{Name: 'lastchang', type: 'date', dateFormat: 'n'/j h: '}
],
Data: myData
}),
Cm: cm,
StripeRows: true,
AutoExpandColumn: 'company ',
Height: 350,
Width: 600,
Title: 'array grid'
});
})

In extjs, Ext. grid. GridPanel represents a grid. It requires a json object as a parameter for configuration. Let's take a look at the configuration used:
RenderTo: specifies where to render the grid after it is constructed. It can be an Element id, a Dom node, or an Element object. Without this parameter, you must call Ext. grid. the render method of GridPanel to present the grid.
Stroe: Can be abbreviated to ds and provides data to the grid using a unified interface. We know that data may have many formats, except for the array we use, json, xml and so on. If grid is responsible for identifying each data format, it is obviously not a good design idea. Therefore, extjs has a specialized Ext class. data. store is responsible for data format conversion. Here we use its sub-class ArrayStore. As the name suggests, it is specially used for Array conversion. We will have a series dedicated to discuss some classes under the Ext. data namespace. At that time, we will have a deep understanding of the Store class. Now let's only look at the fields field we use. It is Ext. data. A set of Field classes. The class has a name attribute. dataIndex, which is ignored in ColumnModel on the front side, references the value of this attribute to correspond to the relationship between columns and fields. type indicates the type, the default type is string, and dateFormat indicates the date format.
Cm: Short for colModel. Put the ColumnModel object constructed by the front side here.
StripeRows: whether to display stripes.
AutoExpandColumn: automatically expanded column, which automatically fills in the blank 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 to see the effect. It should be said that the grid is pretty, and the column name can be clicked for sorting. The width of the column can be freely dragged, and the position can be changed. Press ctrl to select multiple rows. When we move the mouse over the column name, we can also see a inverted triangle. Click a menu to show that we can sort the columns and hide the columns. However, we can also see that the display of the date is not satisfactory, and the percentage is still a floating point number, and we usually use the deficit to indicate a loss or a more popular saying that the negative growth, if in our grid, negative growth can also be reflected by the deficit, and the effect should be better. Extjs provides us with a very convenient way to implement our idea: renderer. In ColumnModel, we can add renderer to the required columns to achieve the desired effect. Below is the modified ColumnModel:

The Code is as follows:

// Create a 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: 'pctchang', renderer: pctChange },
{Header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastchange', renderer: Ext. util. format. dateRenderer ("Y-m-d h: I ")}
]);
// Renderer function of the Change column
Function change (val ){
If (val> 0 ){
Return ''+ val + '';
} Else if (val <0 ){
Return ''+ val + '';
}
Return val;
}
// The renderer function in the % Change column
Function pctChange (val ){
If (val> 0 ){
Return ''+ val + '% ';
} Else if (val <0 ){
Return ''+ val + '% ';
}
Return val;
}

Renderer can be understood as an interpreter used to convert data before displaying data. There are three ways to implement renderer:
Use a renderer function that returns HTML tags
An attribute of the Ext. util. Format class, which provides a renderer Function
An object that includes renderer functions and scopes
The first two methods are used in our example. The renderer function passes six parameters, saving all the information about the cell. Here we only use the first parameter, which saves the value of the cell. For the meanings of other parameters, see the help document.
Now we run the program and we can see the desired effect: negative growth is represented by a deficit. As a comparison, positive growth uses a green color and the time is displayed in the desired format.
Sometimes we want to add numbers to each row, which is easy to implement. We only need to add new Ext. grid. RowNumberer () to the ColumnModel constructor:

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: 'pctchang', renderer: pctChange },
{Header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastchange', renderer: Ext. util. format. dateRenderer ("Y-m-d h: I ")}
]);

There are two common parameters in the configuration of Ext. grid. GridPanel:
ViewConfig: You can use this parameter to set the grid interface. For more information, see the help documentation.
SelModel: It can be abbreviated as sm. Select a model. For example, select a cell or the entire row. The row is selected by default.