ExtJS 4 Grids Detailed

Grid Panelis one of the most commonly used components of ExtJS, it is very versatile and provides a very convenient way to perform sorting, grouping, and editing data. Basic Grid Panel base table pane

Let's create a simple table that has all the knowledge to create and run a table. Model and Store models and storage

Grid PanelStorethe data in the presentation can be considered a collection of Store records, or a collection of model ( Model ) instances. For more information on Store and, Model please see the ExtJS 4 data (package) in detail, which is to clarify the concept Grid Panel itself, focusing only on how to present the data, Store responsible for Proxy acquiring and saving the data. First we need to define Model a Model set of data fields, first defining a user Model

Ext.define(‘User‘, {    extend: ‘Ext.data.Model‘,    fields: [ ‘name‘, ‘email‘, ‘phone‘ ]});

Then create Store to accommodate User a number of instances

var userStore = Ext.create(‘Ext.data.Store‘, {    model: ‘User‘,    data: [        { name: ‘Lisa‘, email: ‘[email protected]‘, phone: ‘555-111-1224‘ },        { name: ‘Bart‘, email: ‘[email protected]‘, phone: ‘555-222-1234‘ },        { name: ‘Homer‘, email: ‘[email protected]‘, phone: ‘555-222-1244‘ },        { name: ‘Marge‘, email: ‘[email protected]‘, phone: ‘555-222-1254‘ }    ]});

For simplicity, inline data is used here, and in real-world applications, the server-side data is usually loaded using proxies, and the agent can view the ExtJS 4 data (package) in detail Grid panel table

Now that we have the model definition data structure and several model instances loaded, we are Store ready to show the data for the table panel.

Ext.create(‘Ext.grid.Panel‘, {    renderTo: Ext.getBody(),    store: userStore,    width: 400,    height: 200,    title: ‘Application Users‘,    columns: [        {            text: ‘Name‘,            width: 100,            sortable: false,            hideable: false,            dataIndex: ‘name‘        },        {            text: ‘Email Address‘,            width: 150,            dataIndex: ‘email‘,            hidden: true        },        {            text: ‘Phone Number‘,            flex: 1,            dataIndex: ‘phone‘        }    ]});

That's all you have to do. We created a table panel to render to the body, and told it to get the data from the previous creation userStore , and finally we defined what columns the table panel has, using the dataIndex properties to configure the columns in the table and the corresponding relationship between the fields in the user model, the Name column width is 100, cannot be sorted or hidden, Email Address columns are hidden by default (can be displayed by menu control of other columns), Phone Number column Adaptive table remaining width renderers renderer

You can use the renderer property to change the way the data is displayed, renderer it is a function, it receives the raw data and needs to return a processed data, the returned data will be displayed on the table, some of the most commonly used renderers Ext.util.Format can be found in the, can also be customized:

columns: [    {        text: ‘Birth Date‘,        dataIndex: ‘birthDate‘,        // format the date using a renderer from the Ext.util.Format class        renderer: Ext.util.Format.dateRenderer(‘m/d/Y‘)    },    {        text: ‘Email Address‘,        dataIndex: ‘email‘,        // format the email address using a custom renderer        renderer: function(value) {            return Ext.String.format(‘<a href="mailto:{0}">{1}</a>‘, value, value);        }    }]

Grouping Grouping

It's easy to group rows in a table, first to Store specify a property in groupField

Ext.create(‘Ext.data.Store‘, {    model: ‘Employee‘,    data: ...,    groupField: ‘department‘});

For more information on grouping, see the ExtJS 4 data (package) in detail, and the next configuration table has grouping properties:

Ext.create(‘Ext.grid.Panel‘, {    ...    features: [{ ftype: ‘grouping‘ }]});

Selection Models Check Mode

Sometimes, tables are used to display data on the screen, but often need to update the data or interact with the data in the table, all the tables have a check mode to control how the data in the table is selected, the main two check modes are row mode ( Row Selection Model ) and cell mode ( Cell Selection Model )
The table uses row mode by default, but switching to cell mode is also easy:

Ext.create(‘Ext.grid.Panel‘, {    selType: ‘cellmodel‘,    store: ...});

Using cell mode changes a few things, first, clicking a cell in a table will only select the current cell, while in row mode the entire row is selected, and second, navigating with the keyboard will move from cell to cell instead of from row to row, and cell mode is typically used with editable tables. Editing Editing a table

The table has built-in editing capabilities, let's see, row editing and cell editing cell Editing cells editing

Cell editing allows you to edit one cell content at a time, implementing cell editing, first to configure the edit control for each column, as long as the property is set editor , the simplest way is to editor set the property to the control you want to usextype

Ext.create(‘Ext.grid.Panel‘, {    ...    columns: [        {            text: ‘Email Address‘,            dataIndex: ‘email‘,            editor: ‘textfield‘       }    ]});

If you need to control the behavior of the edit control, you can editor set the property to the configuration object that the edit control can receive, for example, we set an input box that cannot be empty:

columns: [    {        text: ‘Name‘,        dataIndex: ‘name‘,        editor: {            xtype: ‘textfield‘,            allowBlank: false        }    }]

You can use Ext.form.field the controls in any package as an edit control, assuming that a column is a date type and you need to use Date Field edit:

columns: [    {        text: ‘Birth Date‘,        dataIndex: ‘birthDate‘,        editor: ‘datefield‘    }]

A column that has no configuration editor properties is not editable.
Now that we have configured which columns can be edited and what controls to edit, the next step is to make the check mode, we first use the cell mode:

Ext.create(‘Ext.grid.Panel‘, {    ...    selType: ‘cellmodel‘});

Finally we need to install a cell edit plugin:

Ext.create(‘Ext.grid.Panel‘, {    ...    selType: ‘cellmodel‘,    plugins: [        Ext.create(‘Ext.grid.plugin.CellEditing‘, {            clicksToEdit: 1        })    ]});

The above is the content of all tables that implement an editable cell. The effect is as follows:

Row Editing Line Edit

Line editing allows you to edit a whole line at once, and the implementation of cell editing is basically the same, not the same, the check mode to be set to line mode, install a line edit plug-in

Ext.create(‘Ext.grid.Panel‘, {    ...    selType: ‘rowmodel‘,    plugins: [        Ext.create(‘Ext.grid.plugin.RowEditing‘, {            clicksToEdit: 1        })    ]});

Paging Sub-page

Sometimes a lot of data can not be shown in the table all at once. The table supports two paging modes, one is the Pagination toolbar, the previous page/next page button, and the one is the infinite ScrollBar store setup memory settings

Before you start, let the store support paging, the following example adds properties to the store pageSize , and configures reader to totalProperty tell reader how many rows

Ext.create(‘Ext.data.Store‘, {    model: ‘User‘,    autoLoad: true,    pageSize: 4,    proxy: {        type: ‘ajax‘,        url : ‘data/users.json‘,        reader: {            type: ‘json‘,            root: ‘users‘,            totalProperty: ‘total‘        }    }});

totalPropertyTell reader where to get the total number of datasets, and the JSON data that the store needs should look like this:

{    "success": true,    "total": 12, //这告知一共多少行    "users": [ //当前页只需要4行，因为pageSize是4        { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" },        { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" },        { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" },        { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" }    ]}

Paging Toolbar Page Bar

Now that we have the store support paging, the rest is to configure the paging toolbar, you can put the pagination toolbar anywhere, but usually placed at the bottom of the table

Ext.create(‘Ext.grid.Panel‘, {    store: userStore,    columns: ...,    dockedItems: [{        xtype: ‘pagingtoolbar‘,        store: userStore,   // same store GridPanel is using        dock: ‘bottom‘,        displayInfo: true    }]});

Paging Scroller page Scroll bar

The table supports the way the infinite scroll bar is paged, there are thousands of data when you can always scroll the scrollbar can be loaded (like the infinite scroll bar of Weibo), not one time to render thousands of performance problems, need to do the following configuration

Ext.create(‘Ext.grid.Panel‘, {    // Use a PagingGridScroller (this is interchangeable with a PagingToolbar)    verticalScrollerType: ‘paginggridscroller‘,    // do not reset the scrollbar when the view refreshs    invalidateScrollerOnRefresh: false,    // infinite scrolling does not support selection    disableSelection: true,    // ...});

ExtJS 4 Grids Detailed