ExtJS grids with Editors

Of all the grids till now, we never allowed user input. The editor grid allows the user to add/modify row elements.

Creating an editor grid is very simple. Redeclare the GridPanel to EditorGridPanel. Then assign an editor to those fields which can allow edits.

Here’s what we will build in this post,

The modified grid,

var grid = new Ext.grid.EditorGridPanel({

store: empStore,

columns: [

{header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer: showEmpDetails},

{header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name',

editor: new Ext.form.TextField({ allowBlank: false }) },

{header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name',

 editor: new Ext.form.TextField({ allowBlank: false }) },

{header: 'Age', width: 75, sortable: true, dataIndex: 'age',

editor: new Ext.form.NumberField({

                                allowBlank: false,

                                allowNegative: false,

                                maxValue: 100

}) },

{header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj',

editor: new Ext.form.DateField({

                                                format: 'm/d/Y',

                                                minValue: '01/01/2009'

                                }) },

{header: 'Address', width: 150, dataIndex: 'address',

editor: new Ext.form.TextField({ allowBlank: true }) }

],

            stripeRows: true,

height: 350,

width: 650,

title: 'Employee Details',

            renderTo: Ext.getBody()

});

Double clicking on any cell will reveal the editor.

NOTE:

1.  No editor has been defined for the first column, assuming it to be a primary key

2. Setting the config option (for EditorGridPanel) “clicksToEdit” to ‘1’ will make each cell editable on the very first click. By default it is set to 2

Here’s the JSFiddle ->  Editor Grid JSFiddle

ExtJS grids with Grouping GridView

Grid data can also be grouped based on data present for a column. Consider the employee grid, there may be many employees who are in the same age group. It is possible to list down employee details grouped by “Age”.

Here’s what we will build in this post,

NOTE: Grouping GridView is achieved straight out of the box. There is no extra js/css to include here.

The modified grid,

var grid = new Ext.grid.GridPanel({

        store: empStore,

        columns: [

                        {header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer: showEmpDetails},

                        {header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name'},

                        {header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name'},

                        {header: 'Age', width: 75, sortable: true, dataIndex: 'age'},

                        {header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj'},

                        {header: 'Address', width: 250, dataIndex: 'address'}

        ],

        view: new Ext.grid.GroupingView({

                        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

        }),

        stripeRows: true,

        height: 350,

        width: 650,

        title: 'Employee Details',

        renderTo: Ext.getBody()

       });

The field mapping is provided in the reader defined below,

               

var empReader = new Ext.data.JsonReader({}, [

                                   {name: 'last_name'},

                                   {name: 'first_name'},

                                   {name: 'emp_no'},

                                   {name: 'age', type: 'int'},

                                   {name: 'doj', type: 'date', dateFormat: 'm/d/Y'},

                                   {name: 'address'}

                ]);

The store needs to be redefined as,

var empStore = new Ext.data.GroupingStore({

reader: empReader,

data: empData,

sortInfo:{field: 'emp_no', direction: "ASC"},

groupField:'age'

       });

That’s it we are done with our grid with the ability to group rows based on a decided column.

Here’s the JSFiddle -> ExtJS Grouping GridView

NOTE:

1. It is also possible to sort data (by clicking on the column header) after they are grouped.
2. You can also group data based on another column other than "age". Invoke the header menu on any column and notice the option "Group by this field".