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.

Related downloads:EXTJS class library 4.0

　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　

Now we have to find a solution.

First, we can set the border of the Window to 0, that is, set the attribute border: false of the Window component. At this time, we can find that the border around the Window is a single border, however, there will still be a dual border between the GridPanel in the Window and the Panel below, which 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 keep the border of the Window component, and find a way to remove the border of the Panel. By checking the help document of ExtJS, we can find that the style of the Panel can be controlled by defining the bodyStyle. Set the bodyStyle attribute for the Panel above, GridPanel: bodyStyle: 'border-width: 1px 0 1px 0; ', and the Panel below: bodyStyle: 'border-width: 1px 0 0 0; background: transparent, then refresh and review the effect. It is found that the border is indeed programmed but the border is up, but some borders are dual, in real time, the two sides of the GridPanel Header and the following are the two sides of the Header of the Panel. 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 to write the style to overwrite the previous style. For example, I set cls for the two panels as 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 and refreshing, check the effect. The effect is complete!

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