A double border problem occurred while resolving the ExtJS 4 panel as a subassembly of the window component _extjs

Components such as ExtJS's panel and window are bordered by default, and are typically not used alone, but a double border occurs when you use a panel as a subassembly of a window component. If the window component contains two or more than two panel, the border between the Panel and panel components repeats, which means that it becomes a double border. Actually, the double border doesn't really affect the appearance, but it looks a little less satisfying, so we have to figure out how to remove the two borders and turn them into one-sided boxes. The following is a two-piece contrast chart, you can look at the border of the two window, you will find that the former is thicker, the latter is thin.

Figure I

Figure II

Here's how we're going to solve it.

The first thought is that we can have window border 0, that is, set the window component Properties Border:false, at this point, you can find the window around the border programming one-sided box, But there will still be a double border between the upper Gridpanel and the panel below, and there is no border around the toolbar at the bottom (because the toolbar that contains the Save button is a Window,window border, Of course it affects the border of the bottom toolbar). So the scheme is not feasible. Abandon it!

The second option is to preserve the border of the window component, find a way to remove the panel's border, and, by looking at the ExtJS's help document, you can control the Panel's style by defining the bodystyle. Then set the Bodystyle property to the panel above, Gridpanel:bodystyle: ' border-width:1px 0 1px 0; ', lower Panel:bodystyle: ' border-width:1px 0 0 0; Background:transparent ', after the refresh to see the effect, found that the border is really programming but the border, but also a part of the border is double, immediately above the gridpanel on both sides of the table head, as well as the following on the sides of a panel header. This approach is still more reliable. We'll just have to revise it carefully. The next step is to define a CLS attribute for each panel, and then to limit the style of the header and header by writing styles of your own, overriding the ExtJS default style (just modifying the border style). By Chrome's "review element" discovery: The default one CSS style class for a table header is the X-grid-header-ct,panel default one style class is X-panel-header. The next thing to do is to write your own style to overwrite the previous style, for example, I set the CLS to Addr-panel for two panels, 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 after refreshing to see the effect, is the effect of Figure II, complete!

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