Shulou(Shulou.com)06/03 Report--

This article shares with you about the development methods that should be avoided in Ext.JS applications. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Excessive or unnecessary nesting of components

One of the most common mistakes for developers is to nest components for no reason. Doing so will affect performance and can also cause the application to be unattractive, such as unexpected layout behavior. In example 1A below, only one Grid is included in the panel. In this case, the panel is unnecessary. As shown in example 1B, additional panels can be cancelled. Keep in mind that the form panel, tree panel, tag panel, and Grid panel are all extended and hidden from the panel, and you should pay special attention to non-nesting when using these components.

Items: [{xtype: 'panel', title:' My Cool Grid', layout: 'fit', items: [{xtype:' grid', store: 'MyStore', columns: [{...}]}]]

Example 1A not good: panel (panel) is unnecessary

Layout: 'fit',items: [{xtype:' grid', title:'My Cool Grid', store: 'MyStore', columns: [{...}]}]

Example 1B good: Grid is already a panel, so you can use any panel properties directly in Grid

two。 Memory leak caused by failure to clean up unused components

Many developers don't know why their applications get slower and slower as they use them. Failure to clean up unused components while the user is browsing the entire application is one of the biggest reasons. In example 2A below, each time the user right-clicks the row of Grid, a new right-click menu is created. If the user keeps the application open and right-clicks the row hundreds of times, there will be hundreds of right-click menus that will never be destroyed. For developers and users, the application "looks" for display because only the last menu created can be displayed on the page, and it is hidden. Because the new menu is not created and the old one is not cleaned up, the memory utilization of the application continues to grow, which eventually leads to slower operations or browser crashes.

Example 2A is good because the right-click menu is created only once during Grid initialization and is reused each time the user right-clicks a row. However, if the Grid is destroyed, the right-click menu always exists, although it is no longer needed. The best way is example 2C, which destroys the right-click menu when Grid is destroyed.

Ext.define ('MyApp.view.MyGrid', {extend:' Ext.grid.Panel', columns: [{...}], store: 'MyStore', initComponent: function () {this.callParent (arguments); this.on ({scope: this, itemcontextmenu: this.onItemContextMenu})) }, onItemContextMenu: function (view,rec,item,index,event) {event.stopEvent () Ext.create ('Ext.menu.Menu', {items: [{text:' Do Something'}]}) .showAt (event.getXY ()) })

Example 2A is not good: each right click creates a menu and is never destroyed

Ext.define ('MyApp.view.MyGrid', {extend:' Ext.grid.Panel', store: 'MyStore', columns: [{...}], initComponent: function () {this.menu = this.buildMenu (); this.callParent (arguments); this.on ({scope: this, itemcontextmenu: this.onItemContextMenu})) }, buildMenu: function () {return Ext.create ('Ext.menu.Menu' {items: [{text:'Do Something'}]}) }, onItemContextMenu: function (view,rec,item,index,event) {event.stopEvent (); this.menu.showAt (event.getXY ());}}); Thank you for reading! This is the end of this article on "what are the development methods that should be avoided in Ext.JS applications?". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.