Grid component of ext JS 4

Summary: introduces grid ext JS 4 grid components of ext JS 4.
Author: Brian moeskau)
Published: 2011 may March 7
EXT version: 4.x


English version: http://www.sencha.com/blog/ext-js-4-grid-components

We are making unremitting efforts to ext JS4. So far, all we present to you is developer perview, But we plan to release the final version of extjs 4 in the next four to six weeks. The latest ext JS 4 grid component is included in the recently released programmer version. To truly leverage the underlying capabilities of ext JS 4, we completely rewrite the grid component. We can say that the 3.x version will be significantly improved. 4.0 is particularly improved in terms of performance and flexibility. The advantage of improving flexibility is that it is easier to add new grid functions. Next, let's take a look at the latest and most important functions of grid together with the text.

The old ext JS 3 grid works quite well. However, if we use the "least common denominator" methodology to determine its various functions, it is easy to bring about a deficiency that, along with each function of the grid, A large number of HTML markups are generated. We have to deal with this problem. Therefore, extjs 4 specifies that each function of the grid will render the corresponding function markup on the page only based on whether the developer sets it or not. By default, only a few markups are available when grid is started. In this way, the results of API design are greatly improved in rendering pages and the overall efficiency of the grid.

Standardized layout standardized Layout

The rendering pipeline has been improved, and other aspects of the grid are moving forward. Many grid components are planned to be separate and clear component components and integrated into the standard layout management system. It is not the way to directly process internal markup and CSS in the old version. This allows the API to combine other powerful features of the framework to unify the grid rendering process. These processes maintain the UI experience accurate to the pixel level (pixel-perfect.

Data View dataview

The new gridview inherits from the standard datview. This not only reduces internal redundant code, but also makes the new grid easier to customize. Inherited from dataview, The first advantage is that the selection model can be used directly as an arbitrary attempt, including those non-adjacent constituency selected by the keyboard.

Extended new feature support

New functions are added to grid in ext JS 3, which is generally considered as an API. But now, there is no clear way to guide the process, which seems messy. Sometimes by writing plug-ins, sometimes writing sub-classes. In short, it may be complicated to expand the grid.

To solve the above problems, the essence is to provide a thorough and flexible option operation. Extjs 4 will introduce a brand new grid base class called ext. Grid. feature. By inheriting this feature class, you can modify the template of any grid to control the markup results generated by the current grid view. The features class is similar to the earlier version of the gridview, but it is more powerful and useful. It is useful and powerful because it is more simple and suitable for continuing the grid function. Some functions in grid, such as rowwrap, rowbody, and grouping, are subclasses of fetures.

Virtual rolling virtual scrolling

EXT 4 grid can support the "load-on-demand" data view in the native mode. Although this is a virtual view, it can indeed buffer data. Whether there are hundreds or thousands of pieces of data, it can be easily displayed in the grid. Undoubtedly, this will greatly expand the grid data processing capability.

Edit the cell control editing improvements

We can still compare the old version. To edit the grid cell in ext 3, you must define the editorgrid class. The inheritance method may not be flexible. Therefore, ext 4 rejects the inheritance method, but adopts the "plug-in" method. The editing plug-in of ext JS4 can be freely bound to any grid instance, and can be used for all types of grids. As a result, this adds a splash of color to improve "flexibility. In addition, roweditor, a popular extension in ext 3, became a member of the standard class library in the ext 4 package that we officially added in this release.

Example

The following example demonstrates the grid grouping function of ext Js. It is difficult to show all functions one by one in the example. However, if you want to take a look at the new appearance of grid, you cannot miss this example! As you can see, the configuration items are not much different from ext 3. But what group function does it see? You don't need to write groupingview. You just need to declare the configuration item, which is simpler. This is a part of the flexibility of ext 4, as well as the new elements and advantages of ext 4. Just like, a general store can also support grouping and be incorporated into the standard store function, so there is no need to inherit any groupingstore.

Ext. onready (function () {<br/> Ext. regmodel ('temams ', {<br/> fields: ['name', 'Sport'] <br/> }); </P> <p> var teamstore = new Ext. data. store ({<br/> model: 'tops', <br/> sorters: ['Sport ', 'name'], <br/> groupfield: 'Sport ', <br/> data: [<br/> {Name: 'Aaron ', sport: 'table tennis'}, <br/> {Name: 'Aaron ', sport: 'football'}, <br/> {Name: 'abe ', sport: 'bucketball'}, <br/> {Name: 'Tommy ', sport: 'football'}, <br/> {Name: 'Tommy ', sport: 'bucketball'}, <br/> {Name: 'jamie ', sport: 'table tennis'}, <br/> {Name: 'Brian ', sport: 'bucketball'}, <br/> {Name: 'Brian ', sport: 'table tennis '} <br/>] <br/>}); </P> <p> var grid = new Ext. grid. gridpanel ({<br/> renderto: ext. getbody (), <br/> store: teamstore, <br/> width: 400, <br/> Height: 300, <br/> title: 'Sports tops ', <br/> items: [{<br/> features: [{<br/> FTYPE: 'grouping' <br/>}], <br/> headers: [{<br/> text: 'name', <br/> flex: 1, <br/> dataindex: 'name' <br/> }, {<br/> text: 'Sport ', <br/> dataindex: 'Sport' <br/>}] <br/> }); <br/> });