Extjs 4 custom panel border to solve the problem of double border

By default, panel, window, and other components of extjs contain borders. Normally, it is irrelevant to use them independently, however, when panel is used as a child component of the window component, a double border occurs. If the window component contains two or more panels, then, the border between the Panel and the Panel component will be accumulated, that is, it will become a double border. In fact, the double border does not affect the appearance, but it may seem somewhat unsatisfactory. Therefore, we have to find a way to remove the double border and change it to a single border. The following is a comparison between the two pictures. You can carefully observe the border of the two windows and find that the former is thick and the latter is fine.

Figure 1

Figure 2

Now we have to find a solution.

First, we can set the border of the window to 0, that is, to set the properties of the window component.Border: falseAt this time, we can find that the border around the window is a single border, but there will still be a dual border between the gridpanel on the window and the panel below, it seems uncoordinated, in addition, there is no border around the toolbar at the bottom (because the toolbar where the "save" button is located belongs to the window, and the border of the window is lost, of course, it will affect the border of the toolbar at the bottom ). Therefore, this solution is not feasible. Abandon!

the second solution is to retain the border of the window component, find a way to remove the border of the panel, check the extjs help document, and find that you can control the style of the Panel by defining the bodystyle. Therefore, we set the bodystyle attribute for the panel above. gridpanel: bodystyle: 'border-width: 1px 0 1px 0; ', bottom panel: bodystyle: 'border-width: 1px 0 0 0; Background: transparent ', refresh and review the effect, it is found that the border is indeed programmed but the border is gone, but some borders are dual. The two sides of the header of the gridpanel on the top and the two sides of the headers of the following panel are instantly displayed. This method is more reliable. We just need to modify it carefully. The next step is to define a CLS attribute for each panel, and then restrict the header and header styles by writing styles by yourself, that is, override the default extjs style (only modify the border style ). Through Chrome's "review element", we found that the default CSS style class of the header is X-grid-header-CT, and the default style class of the Panel is X-panel-header. The following is how to write a style to overwrite the previous style. For example, the cls I set for the two panels is ADDR-panel, add the 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 it, refresh it and check the effect. That is, Figure 2 is finished!

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