[CLOSED] panel of TabPanel customization

  1. #1

    [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
    @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.
    Attached Thumbnails Click image for larger version. 

Name:	sample1.PNG 
Views:	11 
Size:	2.0 KB 
ID:	12761   Click image for larger version. 

Name:	Sample2.PNG 
Views:	14 
Size:	2.0 KB 
ID:	12771  
    Last edited by Daniil; Jun 18, 2014 at 4:03 PM. Reason: [CLOSED]
  2. #2
    And I'm also wondering if it's possible to increase the height, see attached file Sample3.png.
    Attached Thumbnails Click image for larger version. 

Name:	Sample3.PNG 
Views:	20 
Size:	3.5 KB 
ID:	12781  
  3. #3
    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.
  4. #4
    Hi Daniil it works great. As the height issue i'm going to search on the forums, please notify me if you find anyway.
  5. #5
    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 ?
  6. #6
    Please add Cls="my-tabpanel" for the TabPanel and use:
    .my-tabpanel .x-tab-inner {
    
        height: 50px;
    }
  7. #7
    problem solved.
        .test .x-tab-inner {
            height: 50px;
        }
    and after I apply the css class 'test' to my TabPanel.
    You can close the thread.

Similar Threads

  1. [CLOSED] ToolbarSeparator customization
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 17, 2012, 9:25 PM
  2. EventEditForm customization
    By Dimitris in forum 1.x Help
    Replies: 1
    Last Post: May 10, 2012, 7:18 AM
  3. Calendar - customization
    By kbugala in forum 1.x Help
    Replies: 0
    Last Post: Oct 20, 2011, 3:38 PM
  4. GridPanel Header Customization
    By sachin.munot in forum 1.x Help
    Replies: 1
    Last Post: May 28, 2009, 5:35 AM
  5. DatePicker customization
    By methode in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 29, 2008, 6:28 PM

Posting Permissions