1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    147
    Vote Rating
    0
    Yossi is on a distinguished road

      0  

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

    [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
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      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
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    147
    Vote Rating
    0
    Yossi is on a distinguished road

      0  

    Thumbs up [Solved] checked out the generated HTML:

    [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 - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      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.

Thread Participants: 2