1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

    Default How to make the rounded corners for panel

    How to make the rounded corners for panel


    I want to make the rounded corners for my simple panel.

    I have tried with using frame : true.

    But I want the bigger rounded corners
    Code:
    Ext.onReady(function() {
     var myPanel = new Ext.Panel({ 
      title : 'List',
      id : 'mypanel', 
      frame : true,
      width : 300,
      style: 'margin:10px 50px',
      html : 'This is my Panel'
      
     });
     myPanel.render(document.body);
     
    });
    Please help me

  2. #2
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

    Default


    can anyone help me please

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    If you want them more rounded than that, then you will have to provide the images.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You can use:
    Code:
    baseCls: 'x-box'
    or
    Code:
    baseCls: 'x-box-blue'
    but x-box doesn't support a header!

  5. #5
    Sencha User
    Join Date
    Sep 2008
    Posts
    66
    Vote Rating
    0
    barbara1712 is on a distinguished road

      0  

    Default


    Thanks,
    baseCls: 'x-box'
    worked but you are right it doesn't support header.
    is there any other solution as animal suggested...

    I don't know how to implement it.
    please help me

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Have a look at the stylesheet for x-panel, x-box, x-box-blue and x-window related rules.

    If you create your own images and css rules you can style a panel anyway you want to.

  7. #7
    Sencha User aityahia's Avatar
    Join Date
    Feb 2009
    Posts
    82
    Vote Rating
    0
    aityahia is on a distinguished road

      0  

    Default


    hello
    it's dont work for me with x-box, the panel is rendred with no border.

    Code:
    Ext.onReady(function(){
        var p = new Ext.Panel({ 
     
      id : 'mypanel', 
      frame : true,
      width : 300,
      height:300,
      style: 'margin:10px 50px',
      html : 'This is my Panel',
      baseCls: 'x-box'
      
     });
    
    });
    i want to have a similaire panel thay one in right side of API Documentation home page.

  8. #8
    Sencha User aityahia's Avatar
    Join Date
    Feb 2009
    Posts
    82
    Vote Rating
    0
    aityahia is on a distinguished road

      0  

    Default


    it's work now i have removed the title proprety

  9. #9
    Sencha User
    Join Date
    Oct 2008
    Posts
    39
    Vote Rating
    0
    rahesh is on a distinguished road

      0  

    Default


    Hi

    When i gave panel baseCls:'x-box' it worked for me.But the buttons that are added to th panel is not displaying now.

    Anybody please help...

    Thanks in advance..


    Regards
    Rahesh

  10. #10
    Sencha User
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    ajmas is on a distinguished road

      0  

    Default


    I realise this is an old post, but since it comes up in searches, I thought I would share another approach using CSS3:

    Define a style for 'x-panel-header' and use the border-radius attribute. You will of course need to provide the variations needed for each known rendering engine (along with the standard version), otherwise it will be ignored. For example for Firefox:

    -moz-border-radius: 10px 10px 0 0;

    Note the variations are simply prefixed with "-o-", "-webkit-", etc. though worth checking in each of your targeted browsers. BTW this won't work in older browsers, such as IE6.