Jun 18, 2014, 12:23 PM
[CLOSED] panel of TabPanel customization
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
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.
Last edited by Daniil; Jun 18, 2014 at 4:03 PM.
Reason: [CLOSED]