PDA

View Full Version : [CLOSED] panel of TabPanel customization



Tactem
Jun 18, 2014, 12:23 PM
Hi guys,
I want to customize panel of my TabPanel. For example change the background color of my panel on demand. Here is my code


@using Ext.Net;
@using Ext.Net.MVC;

<style type="text/css">
.myClass *, .myClass div.x-tab-default-top, .myClass div.x-tab-default-left, .myClass div.x-tab-default-right {
background-color: red !important;
}

</style>
<script type="text/javascript">
var ButtonClick1 = function () {
var panel = App.TabPanel.items.items[0];
panel.tab.addClass('myClass');
}

var ButtonClick2 = function () {
var panel = App.TabPanel.items.items[0];
panel.tab.removeCls('myClass');
}

</script>

@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)

@{
ViewBag.Title = "Index";
var X = Html.X();
}

<h2>Index</h2>

@(
X.Viewport()
.Layout(LayoutType.Fit)
.Items(
X.TabPanel()
.ID("TabPanel")
.Items(
X.Panel()
.Title("panel 1")
.Items(
X.Button()
.Text("set css class")
.Listeners(ls =>
ls.Click.Fn = "ButtonClick1"
)
),
X.Panel()
.Title("panel 2")
.Items(
X.Button()
.Text("remove css class")
.Listeners(ls =>
ls.Click.Fn = "ButtonClick2"
)
)
)
)
)

I have css problem and need some help. See attached file sample2.png after applying css class.

Tactem
Jun 18, 2014, 12:36 PM
And I'm also wondering if it's possible to increase the height, see attached file Sample3.png.

Daniil
Jun 18, 2014, 2:09 PM
Hi @Tactem,

Please use:

.myClass {
background-image: none;
background-color: red !important;
}

As for height, it might be more complicated, but it should be achievable as well. Please try to search on the forums. Seems there was a similar request.

Tactem
Jun 18, 2014, 2:25 PM
Hi Daniil it works great. As the height issue i'm going to search on the forums, please notify me if you find anyway.

Tactem
Jun 18, 2014, 2:55 PM
Daniil I found something for the height issue.


.x-tab-inner {
height: 50px;
}

But this method changes the height of all Tabpanels in my project. How can I do to change only for one TabPanel ?

Daniil
Jun 18, 2014, 3:55 PM
Please add Cls="my-tabpanel" for the TabPanel and use:

.my-tabpanel .x-tab-inner {

height: 50px;
}

Tactem
Jun 18, 2014, 3:57 PM
problem solved.


.test .x-tab-inner {
height: 50px;
}

and after I apply the css class 'test' to my TabPanel.
You can close the thread.