Solve the double border problem when Extjs 4 Panel is used as a subcomponent of Window component_extjs

Extjs components such as Panel and Window are bordered by default. Normally, it does not matter when used alone. However, when Panel is used as a subcomponent of the Window component, double borders will appear. If the Window component If it contains two or more Panels, the borders between Panel and Panel components will be accumulated repeatedly, which means it will become a double border. In fact, the double border does not affect the appearance very much, but it will look somewhat unsatisfactory, so we have to find a way to remove the double border and turn it into a single border. Below are two comparison pictures before and after. If you carefully observe the borders of the two windows, you can find that the former is thicker and the latter is thinner.

Picture 1

Picture 2

Now we are going to think of a solution.

The first thing that comes to mind is that we can set the border of the Window to 0, that is, set the properties of the Window component border:false. At this time, you can find that the borders around the Window are programmed as single borders, but inside the Window There will still be a double border between the GridPanel and the Panel below, which looks uncoordinated, and there is no border around the bottom toolbar (because the toolbar where the "Save" button is located belongs to Window, and after the Window's border is gone, of course Will affect the border of the bottom toolbar). So this solution is not feasible. Throw it away!

The second option is to retain the border of the Window component and find a way to remove the border of the Panel. By checking the help documentation of ExtJS, I found that the style of the Panel can be controlled by defining bodyStyle. So set the bodyStyle attribute for the above Panel respectively, GridPanel: bodyStyle: 'border-width:1px 0 1px 0;', and the lower Panel: bodyStyle: 'border-width:1px 0 0 0 ; background:transparent', After refreshing and re-looking at the effect, I found that the border was indeed programmed but the border was broken, but there were still some borders that were double, that is, the two sides of the GridPanel header above, and the Panel below. Both sides of the Header. This method is relatively reliable. We'll just revise it carefully. The next step is to define a cls attribute for each Panel, and then limit the header and header styles by writing your own styles, that is, overwriting the ExtJS default style (just modifying the border style). Through Chrome's "Inspect Element", I found that the default CSS style class for the table header is x-grid-header-ct, and the default style class for the Panel is x-panel-header. The next thing to do is to write your own style to overwrite the previous style. For example, the cls I set for the two Panels is addr-panel, and then add a new CSS style class .addr-panel .x-grid-header-ct {border-width: 1px 0 0 0 !important;}, .addr-panel .x-panel-header{border-width:0;}. After saving, refresh and check the effect. It is the effect in Figure 2. Complete!

If we encounter similar problems in the future, we can consider using CSS styles to solve them. (End)^_^