ExtJS Gridpanel Usage Explanation

ExtJS Gridpanel provides a very powerful data table function, where gridpanel can display a list of data that can be selected, edited, and so on. In the previous EXTJS MVC development model, we have used the Gridpanel, and today we introduce the detailed usage of Gridpanel in ExtJS.

The sample code for this article applies to ExtJS 4.x and ExtJS 5.x, and is available in ExtJS 4.2.1 and ExtJS 5.0.1!

This article by Fei Qi ( [email protected] ) original, and posted in Http://www.qeefee.com/article/extjs-grid-in-detail , reproduced please specify the source! Recommended more ExtJS tutorials ,Extjs5 Tutorials

Create Gridpanel

To use Gridpanel, you first define the store, and you must have model when you create the store, so we'll start by defining the model:

//1. Defining Model ext.define ("MyApp.model.User", {    "Ext.data.Model", Fields    : [         ' name '  },        'age '},        ' phone '   }    ]});

Then create the store:

2. Create the storestore = ext.create ("Ext.data.Store",    {" MyApp.model.User ",    true,    pagesize:5,    proxy: {        " Ajax "  ,        "Gridhandler.ashx",        reader: {            "Rows"         }    }});

Next is the code for Gridpanel:

//3. Creating a GridvarGrid = Ext.create ("Ext.grid.Panel", {xtype:"Grid", Store:store, width:500, height:200, margin:30, Columnlines:true, RenderTo:Ext.getBody (), Selmodel: {injectcheckbox:0, Mode:"Simple",     //' single '/ ' simple '/' MULTI 'checkonly:true//Can only be selected by CheckBox}, SelType:"Checkboxmodel", Columns: [{text:' name ', Dataindex:' name '}, {text:' age ', Dataindex:' age ', Xtype:' Numbercolumn ', Format:' 0 ', Editor: {xtype:"Numberfield", decimalprecision:0, Selectonfocus:true}}, {text:' phone ', Dataindex:' phone ', Editor:"TextField"}], plugins: [Ext.create (' Ext.grid.plugin.CellEditing ', {clickstoedit:1})], listeners: {itemdblclick:function(Me, record, item, index, E, eopts) {//Double-click the action of the event}}, Bbar: {xtype:"Pagingtoolbar", Store:store, DisplayInfo:true}});

The effect of this gridpanel is as follows:

In this gridpanel, we can check the data row by checking the box, you can edit the "age" and "Phone" column, and the data can be sorted by the client.

Columns of the ExtJS Gridpanel

There are several types of columns for ExtJS Gridpanel, such as: text columns, numeric columns, date columns, selection box columns, action columns, and so on. We can specify different column types through xtype.

The following are the common configuration items for a column:

• Xtype: Column type
• Text: column header display type
• Dataindex: The field name of the binding
• Width: Wide
• Flex: auto-fit width
• Sortable: Is it possible to sort, the default is
• Hideable: Whether it can be hidden, the default is
• Locked: Locks The column, locks the column at the beginning of the grid, and is useful when the grid appears with a scroll bar. Default is No
• Lockable: Whether it is lockable, default is no
• Format: A formatted string that is commonly used for formatting dates and numbers. Date: ' y-m-d '; DateTime: ' y-m-d h:i:s '; Number: ' 0,000.00 ' (with thousands separators, reserved two decimal places), ' 0.00 ' (two decimal places reserved), ' 0 ' (not reserved decimals)
• Renderer: A custom drawing method, either a defined method name in Ext.util.Format, or a custom no function that receives the following parameters: value, metadata, record, RowIndex, Colindex, store, view, and need a return value to display.
• Editor: Editors, it only works when you use the edit plugin.

ExtJS Gridpanel Row Selection model (Selectionmodel)

The two configuration items that control the ExtJS Gridpanel row selection model are SelType and Selmodel. By default, SelType is Rowmodel, corresponding to the Ext.selection.Model. This selection model does not add a check box to the grid, it is selected by clicking the row, and the default is multi-select "MULTI".

If we want to use checkboxes to select rows , we need to use the following configuration:

"Checkboxmodel" ,

We can then configure the SelType with Selmodel:

Selmodel: {    injectcheckbox:0,    'simple ',     //' single '/' Simple '/' MULTI '      true     //Only through CheckBox selection },

ExtJS Gridpanel Line Selection

In addition to the interface operation to select rows, we can also choose the line by code:

Select the row and keep the other row's selection state  true); //Select all Grid.getselectionmodel (). SelectAll (); //Select based on row index  true)

ExtJS Gridpanel Get selected row

To get the selected row, you still need to do it through Selectionmodel:

Records = Grid.getselectionmodel (). GetSelection ();

ExtJS Gridpanel Display line number

By default ExtJS Gridpanel does not display line numbers, we need to add the row number column manually.

Columns: [    

"Rownumberer" , Text: "Serial number"

 , width:40}, {text:' name ', Dataindex:' name '}, {text:' age ', Dataindex:' age ', Xtype:' Numbercolumn ', Format:' 0 ', Editor: {xtype:"Numberfield", decimalprecision:0, Selectonfocus:true}}, {text:' phone ', Dataindex:' phone ', Editor:"TextField"}],

We can set the column header and width of the line number.

ExtJS Gridpanel Loading Data asynchronously

ExtJS Gridpanel's asynchronous load data is implemented through the store. We have previously introduced the various agent methods of ExtJS store, can refer to my previous article:

• ExtJS Client Agent (proxy)
• ExtJS Server Agent (proxy)

Asynchronous loading usually takes the Ajax proxy, for example in our code:

2. Create the storestore = ext.create ("Ext.data.Store",    {" MyApp.model.User ",    true,    pagesize:5,    proxy: {        " Ajax "  ,        "Gridhandler.ashx",        reader: {            "Rows"         }    }});

The data format returned by the server side is as follows:

{    "Rows": [      {          "Name": "Tom",          "Age":."Phone": "1233455"},      {          "Name": "Jerry",          "Age":."Phone": "1233455"},      {          "Name": "Sinbo",          "Age":."Phone": "1233455"},      {          "Name": "Jack",          "Age":."Phone": "1233455"},      {          "Name": "Johnson",          "Age":."Phone": "1233455"}    ],    "Total": 5}

ExtJS Gridpanel Pagination

When the amount of data in Gridpanel is large, we need to use paging.

The implementation of paging is done in two parts, first by adding pagesize configuration items to the store to determine how many rows of data are displayed per page, and then adding Pagingtoolbar to Gridpanel.

1. Store Add pagesize configuration item

store = ext.create ("Ext.data.Store", {    "MyApp.model.User",     true ,    pagesize:5,    proxy: {        "Ajax",        "Gridhandler.ashx" ,        reader: {            "Rows"        }}    );

After the paging parameter is added, ExtJS will add three parameters when executing the AJAX request:

• page: Current page
• start: The line number of the starting line
• Limit: The number of rows per page, the default is 25, this parameter value is the pagesize we set

2. Gridpanel Add Pagingtoolbar

"Pagingtoolbar"}

After these two configurations are complete, Gridpanel can use paging.

ExtJS Gridpanel Column Editor

ExtJS Gridpanel can be conveniently implemented for column editing. Two steps are required to implement this feature:

1. Add the Gridpanel Edit plugin

plugins: [    ext.create (' Ext.grid.plugin.CellEditing ', {        clickstoedit:1    })], 

2. Specify the editor for the column you want to edit

columns: [{xtype:"Rownumberer", Text:"Serial number", width:40}, {text:' name ', Dataindex:' name '}, {text:' age ', Dataindex:' age ', Xtype:' Numbercolumn ', Format:' 0 ', Editor: {xtype: "Numberfield", decimalprecision:0, Selectonfocus:true } }, {text:' phone ', Dataindex:' phone ', Editor:  "TextField" }

The editor can be a field configuration, or it can be a xtype.

For the edited cell, a red flag appears in the upper-left corner indicating that the data was edited, and to remove the red arrow, you need to call the record's commit () method.

Grid.on (' edit '(editor, E) {    //Commit the changes right after Editing finished    e.record.commit ();});

In addition to cell editing, ExtJS also supports line editing, with the ability to replace plug-ins with rowediting, which is no longer demonstrated here.

ExtJS Gridpanel Select cell contents

By default, ExtJS Gridpanel does not allow the contents of a selected cell, and because it cannot be selected, it is impossible for us to copy the contents of the cell. If we want to implement this function, we need to implement it through Viewconfig.

The code is as follows:

viewconfig:{    striperows:true,//Show Zebra    enabletextselection in the table : // can copy cell text } 

Suppress column header right menu

ExtJS gridpanel Column, when we click on the column header, a menu will appear:

If we want to disable this menu, you can specify each column definition property menudisabled as True, and the code is as follows:

' Idno' idno ', width:150,menudisabled:true}

This article by Fei Qi ( [email protected] ) original, and posted in Http://www.qeefee.com/article/extjs-grid-in-detail , reproduced please specify the source! Recommended more ExtJS tutorials ,Extjs5 Tutorials

ExtJS Gridpanel Usage Explanation