ExtJS4.2Grid Preview

With the release of the new ExtJS4.2Beta version, a series of changes have taken place. You can learn the complete details through the instructions published in the Forum. This article highlights the performance improvement of the Grid component. Previously published "ExtJS4.1 performance" and "Optimization Based on Ext... SyntaxHighlighter. all (); with the release of the new Ext JS 4.2 Beta version, a series of changes have taken place. You can learn the complete details through the instructions published in the Forum. This article highlights the performance improvement of the Grid component. In the previous article Ext JS 4.1 performance and Ext JS 4.1-based application optimization, we emphasized the improvement of the buffer capacity of the Grid component. Ext JS 4.2 further improves the buffer rendering performance and allows you to use this function with fewer configurations in more cases. Thanks to these optimizations, the response speed of large data applications should be significantly improved. The Comparison Between Ext JS 4.1 and Grid in Ext JS 4.2 is in Ext JS 4.1. The Grid component physically renders rows in the Table whenever you scroll to the buffer area. For example, suppose that the Grid renders 50 rows of data each time. If the Grid currently displays 100 to 150 rows, and the user scrolls down to 105 rows of records, grid will re-render the rows of the table to display records from 105 rows to 155 rows. In Ext JS 4.1, When you scroll to the buffer area, the Grid will throw all rows and recreate them. In Ext JS 4.2, when scrolling, the lines of the Grid will be added or deleted, but the lines between them will not be affected. In Ext JS 4.2, the Grid component changed the management mode of displaying the row in the table. For example, in the previous example, in 4.2, the Grid will delete rows 100 to 104 (no longer displayed) and Add rows 151 to 155 as new elements. This optimization result significantly reduces rendering latency and improves performance. Put 2000 rows of data together and let it automatically scroll down for performance testing. In IE8 (Windows XP, using 1.8 GHz codecomo, 1 gb ram Thinkpad, the total time it takes to scroll from the top to the bottom. The improvement of Ext JS 4.2 reduces the Latency by two times (or more), that is, the scrolling will be smoother and smoother. Ext. grid. plugin. bufferedRenderer implements buffer rendering in the Grid of Ext JS 4.1. You need to manually define the buffered configuration item of Store to implement interaction with paging scrolling. This means that Store must be defined in the following form: [javascript] // Ext JS 4.1 style buffering on the store var store = Ext. create ('ext. data. store', {// allow the grid to interact with the paging scroller by buffering buffered: true, pageSize: 50, data: dataJson, model: 'employe', proxy: {type: 'memory '}); var grid = Ext. create ('ex T. grid. panel ', {store: store, loadMask: true, // etc ...}); although the buffered configuration item is a convenient way to optimize performance, it also means that the Store will organize data based on the display. For some components that want to share the Store data, at the Store level, the buffer function may be faulty. In addition, in Ext JS 4.1, when a user edits a record in the Grid, the buffer Store may be faulty. Since Store's primary record set only has rendered rows (unrendered records will be hidden on a private page), it is challenging to edit records and synchronize data. Ext JS 4.2 solves this problem through the Ext. grid. plugin. BufferedRenderer plug-in. This plug-in allows the Store to maintain data that is not displayed, and the Grid component is only responsible for responding to the display buffer data. [Javascript] // new Ext JS 4.2 Ext. grid. plugin. bufferedRenderer Ext. require (['ext. grid. plugin. bufferedRenderer ']); var store = Ext. create ('ext. data. store', {pageSize: 50, data: dataJson, model: 'Employee', proxy: {type: 'memory '}); var grid = Ext. create ('ext. grid. panel ', {store: store, loadMask: true, plugins: 'bufferedrenderer', // etc ...}); grid only renders some tables in the same way as Ext JS 4.1.x. However, it removes Added configuration items. This also means that all Grid/Store functions (such as grouping and editing) can use the plug-in seamlessly. Because the definition of the buffer function is no longer in the Store, common Store functions (edit, save, and synchronize) can be enabled on a buffered Grid at the same time. Even so, in Ext JS 4.2, the buffered Store still exists. In many currently used applications, buffering data sets is still important. The new buffer Grid plug-in is only an alternative method to enhance the performance of Grid components. The configuration item BufferedRenderer plug-in can be easily configured to control the number of rows rendered outside the visible row and the number of data pages to be buffered from the data source (remote or local. TrailingBufferZone and leadingBufferZone are configured in the same way as Ext JS 4.1.x. However, these configuration items are now configured in the plug-in rather than the Store. (As mentioned above, the buffer Store still exists. Therefore, for a non-buffer Store, make sure these values are configured in the plug-in ). You can create a large table for providing more scrolling before refreshing, or keep more paging records in the memory for refreshing. The BufferedRenderer plug-in can also configure the variableRowHeight attribute to cope with unpredictable sizes (which may involve custom cell rendering or Text wrap ). To optimize Grid performance, the default value of this configuration item is false. (Note: Some features, such as grouping or Row Expander, need to be set ). Download Ext JS 4.2 Beta: http://cdn.sencha.io/ext-4.2.0-beta.zip Mining Ext JS 4.2 examples to view the BufferedRenderer example, download the new Ext JS 4.2.0 SDK, open the example, and browse to the Grid example (in the/examples/grid/directory ). Infinite Scrolling Grid (infinite-scroll.js) Infinite Scrolling Tuner (infinite-scroll-grid-tuner.js) Buffered Scrolling (buffer-grid.js) Variable Height Rows (var-height-rows.js) expect Grid performance improvements to be a useful supplement to your applications.