Results 1 to 4 of 4

Thread: [Solved] [2.0a1] Ext.Panel doesn't show the style.

  1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    147
    Vote Rating
    0
      0  

    Question [Solved] [2.0a1] Ext.Panel doesn't show the style.

    My style doesn't work with the panel, when updating it through CSS.

    Code:
    #north, .status{
        font:normal 8pt arial, helvetica;
    }
    .status {
        padding:4px; background-color: #C3DAF9;
    }
    Code:
                    new Ext.Panel({ // raw
                        region:'south',
                        el: 'status',
                        id: 'statusPanel',
                        split:false,
                        border: false,
                        //cls :'status', //This doesn't work!
                        html: '<div class="status">Welcome to the CMS panel!</div>', //Works
                        height:24,
                        margins:'0 0 0 0'
                    }),
    If I code with the html tag like this, with <div class="status"></div>, it works.
    When I declare the 'status', it doesn't work.

    This is the updating line I use for the panel:
    MainPanel.statusPanel.body.update('Updating....'); //No style
    MainPanel.statusPanel.body.update('<div class="status">Updating....</div>'); //Yes style

    Any ideas?
    That's a bug I should report? Normal Ext-JS 2 behavior?
    Last edited by Yossi; 5 Oct 2007 at 1:18 AM. Reason: Marked thread solved.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    I don't know how this could be a bug in Ext considering Ext doesn't control CSS specificity. You will need to apply rules that match the target. e.g.

    #north .x-panel-body {
    // your font
    }
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    147
    Vote Rating
    0
      0  

    Thumbs up [Solved] checked out the generated HTML:

    <div style="left: 0px; top: 452px; width: 1068px;" class="x-panel status x-border-panel x-panel-noborder" id="status"><div id="ext-gen66" class="x-panel-bwrap"><div style="height: 30px; width: 1060px;" id="ext-gen67" class="x-panel-body x-panel-body-noheader x-panel-body-noborder"><div class="status">Welcome to the CMS panel!</div></div></div></div>

    Changed the CSS as suggested.

    Code:
        .status .x-panel-body {
    	    padding:4px; background-color: #C3DAF9;
        }
    Didn't know that's the way to use the CSS in Ext 2.0a1,
    thank you.

  4. #4
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    Quote Originally Posted by Yossi View Post
    Didn't know that's the way to use the CSS in Ext 2.0a1,
    thank you.
    just to clarify, that's the way CSS works, independent of any js library.
    i.e. an equivalent / higher specificity rule occurring later will always take precedence over an earlier occurring rule of equivalent or lower specificity.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •