Extjs 4 Official Guide Translation: Grid components (I)

Document directory

• Model object model and store storage object model and store
• Grid panel

Original: http://docs.sencha.com/ext-js/4-0! /GUIDE/Grid

Translation: Frank/sp42 reprinted. Please keep the information on this page.

Grids

The grid panel is one of the core parts of ext Js. It is a versatile component that provides a simple way to display, sort, group, and edit data.

The
Grid panel is one of the centerpieces of ext Js. It's an incredibly versatile component that provides an easy way to display, sort, group, and edit data.

Basic grid panel basic grid panel

Let's start creating a basic grid panel. In this example, you can learn the basic method for creating a grid and run it smoothly.

Let's get started by creating a basic
Grid panel. Here's all you need to know to get a simple grid up and running:

Model object model and store storage object model and store

A grid panel can be said to be just a component that displays the data in the store. Store can be considered as a set of records or an instance of a model. For more information about store and model, see this document. The benefit of this design is that "their respective duties of concerns" are very clear. The grid panel only focuses on how data is displayed, while the store uses its proxy to obtain and save data.

A
Grid panel is simply a component that displays data contained in
Store.
Store can be thought of as a collection of records, or
Model instances. For more information on
Stores and
Models see the data guide. The benefit of this setup is clear separation of concerns. thegrid
Panel is only concerned with displaying the data, while
Store takes care of fetching and saving the data using its
Proxy.

First, we need to define a model. The model is just a set that represents a data type field. Let's define a model that represents "User user ":

First we need to define
Model.
Model is just a collection of fields that represents a type of data. Let's define a model that represents a "user ":

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

Next, we create a store object that contains multiple user users. Next let's create
Store that contains severalUserInstances.

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

For the sake of simplicity, we can directly write the specific data of the store. In real applications, you usually configure the proxy object proxy to load data back from the server through the proxy. For more information, see data instructions on Using proxy.

For sake of signature we configured
Store to load its data inline. In a real world application you'll usually configure thestore to use aproxy
To load data from the server. See
Data guide for more on using
Proxies.

Grid panel

Currently, we have a model that defines our data structure and adds these model instances to the store. Then we can use the grid panel to display data:

Now that we have
Model which defines our data structure, and we 've loaded several
Model instances into
Store, we're ready to display the data using
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'        }    ]});

It's quite simple, right! We just created a grid panel, using the body element as the container, and then told it to retrieve its data from the userstore we created earlier. Finally, we define the columns that the grid panel will have, and use the dataindex attribute to configure the data obtained from the user domain model for each column. The column "name" specifies a fixed width of PX to disable sorting and hidden columns. The column "email" is hidden by default (you can open the column by clicking the menu on other columns ); if Flex is set to 1 for the column "phone number", the width of the adaptive grid panel is displayed, that is, the remaining width after the total width is exceeded. To view the instance, visit "simple grid example ".

And that's all there is to it. We just created
Grid panel that renders itself to the body element, and we told it to get its data fromuserStoreStore that we created earlier.
Finally we defined what columns
Grid panel will have, and we useddataIndexProperty to configure which field inUserModel each column will get
Its data from.NameColumn has a fixed width of 100px and has sorting and hiding disabled,Email AddressColumn is hidden by default (it can be shown again by using the menu on any other column), andPhone Number
Column flexes to fit the remainder of
Grid panel's total width. To view this example live, see
Simple grid example.

Renderer renderers

You can use the Renderer configuration item in the column to change the actual data mode. The Renderer itself is a function that is modified based on the input original value. The returned value is the actual value. Some of the most common Renderer are included in Ext. util. format. Of course, you can customize the Renderer:

You can userendererProperty of the column config to change the way data is displayed. arenderer is a function that modifies the underlying value and returns anew value to be displayed. some of the most common renderers areincluded inext. util. format,
But you can write your own as well:

Columns: [{text: 'birth date', dataindex: 'birthdate', // use Ext. util. format function Renderer format the date using a Renderer from the ext. util. format class Renderer: ext. util. format. daterenderer ('m/D/Y')}, {text: 'email address', dataindex: 'address ', // The email address uses the custom Renderer format the email address using a custom Renderer: function (value) {return Ext. string. format ('<a href = "mailto: {0}" >{1} </a>', value, value) ;}}]

A live demonstration of custom Renderer rendering.

See
Renderers example for a live demo that uses custom renderers.

Group grouping

It is easy to group rows in the grid. First, you must specify the groupfield attribute on the store:

Organizing the rows in
Grid panel into groups is easy, first we specify
Groupfield property on our store:

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

For more information about store groups, see data guide. Next, we will configure the feature configuration item of the grid for row grouping:

For more on gouping in
Stores please refer to
Data guide. Next we configure a grid with a grouping
Feature that will handle displaying the rows in groups:

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

Refer to the online grouping grid panel example.

See
Grouping grid panel for a live example.