Discussion on the misunderstanding of adding subcomponents in Ext JS_extjs

People often ask me why my Grid cannot automatically adjust as the window changes. After understanding it, I found that many people are accustomed to rendering the Grid into a div within the container when rendering sub-components, and this is exactly where the problem lies.

In the layout system of Ext JS, what can be controlled is the sub-component of the container. However, for a Grid rendered to a DIV in the container, it does not know that a Grid has been added to the container. When adjusting When resizing, you cannot adjust the size of the Grid, and this is why the Grid will not change as the container changes.

Why do so many people like to use this method to add subcomponents? I think there are two main reasons:
1. I don’t know how to add sub-components in the container,
2. I am used to the development method of using other frameworks such as JQuery and cannot change it for a while

The first reason is that as long as the Grid is added dynamically, many beginners are at a loss. For example, my Grid needs to be returned from the remote before I know how to create it. How do I get this script and add it to the container? The author also made this mistake when learning Ext JS, which is understandable. Therefore, the purpose of this article is to clear up the confusion.

There are two methods: First, use Ajax to load the entire Grid (or other component configuration objects) locally, and then use the add method of the container to add the component to the container. ; One is to directly use the load function of the container to directly load the subcomponent and render it. The returned data is the configuration object of the subcomponent.

The second reason is a habit problem, which can only be corrected by yourself. You can easily change this habit by becoming familiar with the Ext JS development model as soon as possible.

If you use Ext JS 4's MVC for development, this embarrassing situation will basically not occur. Therefore, you can make the subcomponent into a view, and then add the view to the container in the controller. .