ExtJS 4 Gridpanel of learning

The original English version of the Grid Component

1 simplest grid Panel

The grid panel is one of the core parts of the ExtJS, which enables you to display, sort, group, and edit data through the grid panel. Model and store are the core of grid panel processing data, and each grid panel must set model and store. To create a grid panel, you first define that Model,model includes all fields that need to be displayed by the grid panel, equivalent to a collection of table field in the database. The store can be thought of as a collection of one row of data or a collection of instances of model, each containing a single or multiple model instances, and the data displayed by the Grid panel is stored in the store. The Grid panel obtains the data from the store and shows that the store uses proxy to read and save the data.

The following creates a grid panel to display the user's basic information, including user name, mailbox, mobile number (name, email, phone), first create user model.

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

Next, create Store,store is a collection of user, including multiple user instances.

var userstore = ext.create (' Ext.data.Store ', {
    model: ' User ',///Just created user model
    data: [
        {name: ' Lisa ', email : ' lisa@simpsons.com ', Phone: ' 555-111-1224 '},
        {name: ' Bart ', email: ' Bart@simpsons.com ', Phone: ' 555-222-1234 '},< c4/>{name: ' Homer ', email: ' Home@simpsons.com ', Phone: ' 555-222-1244 '},
        {name: ' Marge ', email: ' Marge@simpsons.com ', Phone: ' 555-222-1254 '}
    ]
};

After the model and store are created, you can create a grid panel.

Ext.create (' Ext.grid.Panel ', {
    renderTo:Ext.getBody (),
    store:userstore,//Bind the store width:400 created above
    ,
    height:200,
    title: ' Application Users ',
    columns: [
        {
            text: ' Name ',
            width:100,
            Sortable:false,
            Hideable:false,
            dataindex: Fields displayed in the ' name '//grid panel must be consistent with the fields in user model
        },
        {
            text: ' Email address ',
            width:150,
            dataindex: ' email ',
            hidden:true
        },
        {
            text: ' Phone number ',
            flex:1,
            dataindex: ' Phone '
        }
    ]
};

The final user grid panel was created as shown in the figure.

2 Grid Panel data Grouping (Grouping)

As long as you set the GroupField property in the store, you can group the data displayed in the grid panel. Suppose the company has a lot of employees who need to group the company's employees in a grid panel, grouped by department. First set the GroupField property in the store to department.

Ext.create (' Ext.data.Store ', {
    model: ' Employee ',
    data: ...,
    groupfield: ' Department '// Set the data to be grouped by department
});

Then add the grouping Feature in the grid panel to achieve the grouping display effect.

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

The grouped display effect is shown in the following figure, click here to view the official group display code.

3 Grid Panel paging display

When the data is more than one page is not complete, you need to page the data display. The grid panel can be paging toolbar and paging scroller two ways to achieve pagination display, paging toolbar has the previous page/Next button, paging scroller is when grid When the panel scrolls through the bottom, it dynamically loads the data.

To implement a paging display, first set up store support paging, set pagesize,pagesize in the store defaults to 25. Set the total number of data totalproperty in reader, paging plug-ins are paginated according to PageSize and Totalproperty. The following code pagesize set to 4,totalproperty is obtained from the total property in the returned JSON data.

Ext.create (' Ext.data.Store ', {
    model: ' User ',
    autoload:true,
    pagesize:4,//Set the number of data displayed per page
    proxy: {
        Type: ' Ajax ',
        URL: ' Data/users.json ',
        reader: {
            type: ' json ',
            root: ' users ',//Specify which attribute from JSON to get the data, If not specified, the Totalproperty is obtained from the JSON's and attributes
            : ' Total '///Sum of Data}}}
;

Suppose the JSON data is formatted as follows

{
    "Success": True,
    "Total": "
    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 "}
    ]
}

The store's paging has been set up, below in the grid panel to implement paging toolbar paging function.

Ext.create (' Ext.grid.Panel ', {
    store:userstore,
    columns: ...,
    dockeditems: [{
        xtype: ' Pagingtoolbar ',//Add paging toolbar Store:userstore to Grid panel
        ,///Set paging toolbar store to the same store as grid panel
        dock: ' Bottom ',
        displayinfo:true
    }]
};

Paging Toolbar's paging effect is shown in the following illustration, click here to view the Official Paging toolbar paging feature code.

Paging Scroller's paging implementation is simpler, just set the following code in the Grid panel, and click here to view the official paging Scroller paging feature code.

Ext.create (' Ext.grid.Panel ', {
    //using paging scroller Paging plugin
    verticalscroller: ' Paginggridscroller ',
    //Do Not reset the scrollbar the view Refreshs
    invalidatescrolleronrefresh:false,
    //infinite scrolling does no T support selection
    disableselection:true,
    //...
});

4 Grid Panel add checkbox

As long as the Selmodel property of the grid panel is set to Ext.selection.CheckboxModel, click here to view the official code example.

Ext.create (' Ext.grid.Panel ', {
    selModel:Ext.create (' Ext.selection.CheckboxModel '),//Set grid Panel selection mode for CheckBox
    store:userstore,
    columns: ...
});