I using ExtJs 4.1 had the same issue. My solution over ridings the default panel ui. The steps to implement are:
- Create a custom theme - Instructions here: http://www.sencha.com/learn/theming/
- Copy the panel mixing invocation starting line 152 of the <myApp>/EXT's/resources/themes/stylesheets/ext4/default/widgets/_panel.scss partial to your custom theme's sass file in <myApp>/resources/sass/my-custom-theme.sass. The position is the file should be after the standard declarations. Change the hard coded 1px border to 0px or specify a standard variable. Code below.
- Recompile and test
Questions for the Sencha Theme developers:
// Unless you want to include all components, you must set $include-default to false
// IF you set this to true, you can also remove lines 10 to 38 of this file
// Insert your custom variables here.
// $base-color: #aa0000;
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
// The value can either be true, in which case the image path will be "../images/"
// or a string, of where the path is
$relative-image-path-for-uis: true; // defaults to "../images/" when true
- Why isn't there a $ui-body-border variable?
- Is there a better technique to have a panel with no visible borders?