Misunderstandings about how to add child components in ext JS

Some people often ask me why my grid cannot be automatically adjusted as the age window changes. After learning about this, I found that many people are used to rendering gird into a DIV in the container when rendering child components, which is exactly the problem.

In the Layout System of ext JS, the sub-components of the container can be controlled. For the grid rendered to a DIV in the container, it does not know that a grid is added to the container. When the size is adjusted, the grid size cannot be adjusted, this is why the grid will not change as the container changes.

Why do so many people like to use this method to add child components?I think there are two main reasons:
1. I do not know how to add sub-components to the container,
2. I am used to developing methods using other frameworks such as jquery, which cannot be changed at the moment.

The first reason is that as long as the grid is dynamically added, many beginners are helpless. For example, my grid needs to be remotely returned before knowing how to create it, how can I add the script to the container? I have also made such a mistake in ext Js. Therefore, the role of this article is to solve the problem.

There are two methods:First, use ajax to load the entire grid (or other component configuration objects) to the local device, and then use the add method of the container to add the component to the container; first, directly use the container load function to directly load and render sub-components. The returned data is the configuration object of the sub-component.

The second reason is getting used to the problem. You can only correct it by yourself. You can get familiar with the ext JS development mode as soon as possible and can easily get rid of this habit.

If you use the MVC of ext JS 4 for development, there will be no such embarrassing situation. Therefore, you can make sub-components into a view, add the view to the container in the controller.