1

I want to remove panel border completely (border, background-image and all). I have a window which has 6 panel and every panel has title. I want only title name without any border.

Question may be duplicate but i didn't get answer.

I have tried border: false but doesn't work.

enter image description here

Tarabass
  • 3,132
  • 2
  • 17
  • 35
Puneet Chawla
  • 5,729
  • 4
  • 16
  • 33
  • I don't see a border on the nested panels, do you? – Tarabass Aug 18 '15 at 12:05
  • There is no nested panel. All are separate 6 panel in window. I want only "A" (title name) should be displayed on every panel border. – Puneet Chawla Aug 18 '15 at 12:07
  • I meant the panels nested in the window. They have no border, but only a gradient background. You can change them in SASS by using the `variables` or the `ui`: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.panel.Panel-css_mixin-extjs-panel-ui – Tarabass Aug 18 '15 at 13:36

1 Answers1

1

Add a cls option to the window so that you can scope your "no border" styles:

cls: 'noPanelBorder'

Then use this:

.noPanelBorder .x-panel-body-default,
.noPanelBorder .x-panel-header-default,
.noPanelBorder .x-panel-default {
    border: none;
    box-shadow: none;
    background: none;
}

See example: https://fiddle.sencha.com/#fiddle/sbs

Note that using SCSS with Sencha CMD is recommended so that the style declarations can look simpler.

Greendrake
  • 3,657
  • 2
  • 18
  • 24
  • If i use this, it changes in all panel of my project.. I know it can be done by using specific css class. But can you tell me how to use by giving specific class in panel. – Puneet Chawla Aug 18 '15 at 12:14
  • This is not how you should theme in ExtJs. Use the `ui` instead: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.panel.Panel-css_mixin-extjs-panel-ui or use the `variables`: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.panel.Panel-css_mixin-extjs-panel-ui. You should definitely don't use the prefix `x`, but the variable for it :) – Tarabass Aug 18 '15 at 13:33
  • @Tarabass The example was meant to be working in plain CSS just to demonstrate the approach. Of course if using SCSS (which indeed *should* be the case) then it would look different — with variables and stuff. – Greendrake Aug 18 '15 at 13:44
  • @DrakeEnterpriseSystems I know you know, but I wanted the questioner to know it as well :) – Tarabass Aug 18 '15 at 14:05