[Ext JS 4] grid Components

Basic grid panel

Model and store

The grid panel is only used to display data. The data is obtained and saved to the store using the proxy for processing.

First, define a "user" model.

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

Next, create a store containing several user instances.

var userStore = Ext.create('Ext.data.Store', {    model: 'User',    data: [        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },        { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }    ]});

To facilitate the use of embedded methods to load store data. In actual development, use the stroe proxy to load data.

Grid panel

The data is ready, and the data is displayed on the grid 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'        }    ]});

Renderer

You can configure the render attribute for the column to configure the data display style. The Renderer function is to change the original value to a new value. The most common shared Renderer is Ext. util. format. You can also define your own Renderer.

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);        }    }]

Group

You can specify the groupfield attribute in the store to group the grid panel.

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

You can also specify the feature mode in grid. Panel:

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

Select model

The grid panel has two main selection modes: Row selection mode and cell selection mode.

By default, the grid panel uses the row selection mode. You can switch to the cell selection mode using the following methods:

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

After switching the cell mode, the following changes: 1. Click a cell to select a cell (in row selection mode, the entire row is selected ); in addition, you can use the keyboard to switch from a cell to a cell, rather than one row to one row. Cell mode is generally used in editing.

Edit

There are two main types: Row editing and cell editing.

Cell editing

The configuration method is to configure the editor in columns on the grid panel. The simplest way is to configure the xtype of the editor. For example:

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

Editor also has more configurations, such as mandatory value check;

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

For editing the date field, you can configure it:

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

Ext. Grid. Column. Columns of any grid panel cannot be edited without the editor configuration.

You can configure it as follows.

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

Edit row

You can edit all columns in a row at a time.

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

Example:

Paging

The grid panel supports two types of pages. The pageing toolbar uses the forward/backward button to implement paging. The page scroller uses the scroll bar to load new pages.

First, create a stroe

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'        }    }});

The format of the returned JSON data is similar to the following:

{    "success": true,    "total": 12,    "users": [        { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }    ]}

Pageing Toolbar

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

You can use layout to place the paging toolbar anywhere on the page. However, the common method is as follows:

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

Pageing scroller

As an alternative to the paging toolbar, you can also use the wireless scrolling method.

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,    // ...});