PDA

View Full Version : Border around panel



simon
12 Feb 2015, 4:35 AM
I have Viewport with center region and classic theme style:



{
region: 'center',
bodyBorder: false,
border:false,
xtype: 'mainpanel',
reference: 'mainPanel'
}


and mainPanel:



Ext.define('myApp.view.main.MainPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.mainpanel',
border: false,
bodyBorder: false,
...


But there is border around main panel. Why?
If I change theme to Neptune than the border is gone. But I would like to have classic theme.

Any idea how to remove the border?

Also, I would like to remove this white border around tab button:
51730

joel.watson
15 Feb 2015, 8:08 PM
Hi simon--

Can you post a test case demonstrating this? https://fiddle.sencha.com

Thanks!
Joel

simon
17 Feb 2015, 3:04 AM
Here is the example(I have managed to remove the border):
https://fiddle.sencha.com/#fiddle/ic8

If you zoom(or even not) you can see white space around tab button.
I would like to remove it.

In fact I would like that tab buttons looks the same as if you change theme(framework) on my example to Neptun.
As you see, non active tabs are then darken blue with no white borders and active tab is lighten blue.
And tab line color is even more darken blue than tabs.

So, how can i change that my example with classic theme would have tab line the same(or similar) as example with neptune theme? (my ext js 5.0 application must have classic theme since it includes also older pages with extjs 3.0 wich have classic theme)

joel.watson
19 Feb 2015, 3:57 PM
Here is the example(I have managed to remove the border):
https://fiddle.sencha.com/#fiddle/ic8

If you zoom(or even not) you can see white space around tab button.
I would like to remove it.

In fact I would like that tab buttons looks the same as if you change theme(framework) on my example to Neptun.
As you see, non active tabs are then darken blue with no white borders and active tab is lighten blue.
And tab line color is even more darken blue than tabs.

So, how can i change that my example with classic theme would have tab line the same(or similar) as example with neptune theme? (my ext js 5.0 application must have classic theme since it includes also older pages with extjs 3.0 wich have classic theme)

You could create a custom UI for the tab:

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.tab.Tab-css_mixin-extjs-tab-ui

simon
24 Feb 2015, 1:26 AM
Thank you Joel.
In all examples I have found about custom UI, you must create custom theme.
But I would like to change only one ui, by using default theme, neptune for example.
How can i do that? Do you have some example(url)?

I have created file in this folder:
/myproject/sass/src/tab/Tab.scss

and inside file:



@include extjs-tab-ui(
$ui: 'my-button',
$ui-border-radius: 4px 0px 0px 4px,
$ui-border-width: 0px,
$ui-margin: 0px,
$ui-line-height: 35px,
$ui-color: #555,
$ui-color-over: #ffffff
);


Then in my view, i have changed tabConfig


xtype: 'panel',
tabConfig: {
title: 'My tab',
ui: 'my-button'
}


and build the app from cmd.

But it doesn't work. What should i change?

br, Simon