1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    26
    Vote Rating
    0
    shay is on a distinguished road

      0  

    Default panel content overlap

    panel content overlap


    Hi,

    in the below example the image doesn't show , looking in FF shows a style that is "forcing" the height to 0.

    i have tried a number of options and either the image doesn't show , or it overlaps the topbar or the center panel overlaps the topbar
    here is the code:

    Code:
    /** * @author Shay */ Ext.onReady(function() { var hB = new Ext.Toolbar.Button({ text : "Home", handler : function() { window : location = "http://google.com" } }); var banner = new Ext.BoxComponent({ autoEl : { html : '<h2 style="color:#000000">MyDomain.com</h2>', style : 'background-image:url(../img/banner.gif)' }, height : 120 }); var topbar = new Ext.Toolbar([hB]); var vp = new Ext.Viewport({ title : "Border Layout", layout : "border", items : [{ region : "north", margins : "0 0 0 0", split : false, border : false, layout : 'fit', items : banner, bbar : topbar }, { region : "south", margins : "0 5 5 5", split : false, border : false, height : 60 }, { region : "center", margins : "0 0 0 0", split : false, border : false, layout : 'border', items : [{ region : "center", split : false, border : false, xtype : 'form', onSubmit : Ext.emptyFn, submit : function() { this.getForm().getEl().dom.submit(); }, items : {}, title : 'Register a new account' }] }] }); });


    Thanks,
    Shay

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    how is:
    Code:
     handler : function() {
         window : location = "http://google.com"
        }
    syntactically correct?

  3. #3
    Ext User
    Join Date
    Jan 2009
    Posts
    26
    Vote Rating
    0
    shay is on a distinguished road

      0  

    Default missing ;

    missing ;


    thanks for noticing that one(i did too many rush edits today), fixed the syntax , but problem still persists

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    It's overnested.

    If you want a div as the north, just use the BoxComponent. Why wrap it in a redundant layout:'fit' Panel???

  5. #5
    Ext User
    Join Date
    Jan 2009
    Posts
    26
    Vote Rating
    0
    shay is on a distinguished road

      0  

    Default becuse of the toolbar in that panel

    becuse of the toolbar in that panel


    thanks animal,
    the reason i have the panel there is because of the tool bar which i want to display also in the north region.

    also form the doc i understood that even if i don't specify fit , that would be the default.

    how would you include both the banner and toolbar without overnesting?

    if i put the toolbar in the form it appears under the title.

    thanks,
    shay

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Just make banner a Panel instead of a BoxComponent, configure it with region:'north' and a toolbar, and use it!

  7. #7
    Ext User
    Join Date
    Jan 2009
    Posts
    26
    Vote Rating
    0
    shay is on a distinguished road

      0  

    Default here is what i ended up with

    here is what i ended up with


    Code:
    var banner = new Ext.Panel({ html : '<img src=./img/banner.gif />', bodyStyle : ' background-color:#EFEFEF;', bbar : topbar
    });
    i changed the box to panel and used its body as the img

  8. #8
    Ext User
    Join Date
    Jan 2009
    Posts
    26
    Vote Rating
    0
    shay is on a distinguished road

      0  

    Default no luck

    no luck


    now the image overlaps under the bottom panel.

    here is my viewport section

    Code:
     
    var vp = new Ext.Viewport({
    title : "Border Layout",
    layout : "border",
    items : [{
    // title : "North Panel",
    region : "north",
    margins : "0 0 0 0",
    split : false,
    border : true,
    items : banner
    },
    
    {
    // title : "South Panel",
    region : "south",
    margins : "0 5 5 5",
    split : false,
    border : false,
    height : 60
    }, {
    region : "center",
    margins : "0 0 0 0",
    split : false,
    border : false,
    items : Ext.voip.form
    }]
    Code:
    });

  9. #9
    Ext User
    Join Date
    Jan 2009
    Posts
    26
    Vote Rating
    0
    shay is on a distinguished road

      0  

    Default same issue with a simple panel

    same issue with a simple panel


    Hi,

    i removed all extra code and left only the following:
    Code:
     
    var banner = new Ext.Panel({
    html : ' <a title="" href="/"><img alt="" src="./img/banner.gif" /></a>',
    //layout: 'fit',
    //bbar : topbar,
    applyTo: document.body
    Code:
    });

    the image still doesnt show , this is what it looks like in FF

    HTML Code:
    <div class="x-panel-body x-panel-body-noheader" id="ext-gen18" style="height: 0px;"> <a href="/" title=""><img src="./img/banner.gif" alt=""/></a></div>
    as you can see the height is forced to 0 by the layout manager.

    any suggestions?

    since i tried panels , viewports , and box and all exhibit the same issue , which goes away when i specifiy the image height. i am thinking maybe this is a bug and the layout manager does not take into account img height.

    any advice?

    Thanks,
    Shay

  10. #10
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    If you're not going to use the toolbar, then you could just use Ext.Container instead of Ext.Panel (then you do no need to worry about getting rid of borders, etc).

    Code:
    Ext.onReady(function() {
     var topbar = new Ext.Toolbar([hB]);
    
     var banner = new Ext.Panel({
           region : "north",
           margins : "0 0 0 0",
           split : false,
           border : false,
           html : ' <a title="" href="/"><img alt="" src="./img/banner.gif" /></a>',
           bbar : topbar
       });
    
     var vp = new Ext.Viewport({
        title : "Border Layout",
        layout : "border",
        items : [
    
         banner
    
        , {
           region : "south",
           margins : "0 5 5 5",
           split : false,
           border : false,
           height : 60
          }, {
           region : "center",
           margins : "0 0 0 0",
           split : false,
           border : false,
           layout : 'border',
           items : [{
              region : "center",
              split : false,
              border : false,
              xtype : 'form',
              onSubmit : Ext.emptyFn,
              submit : function() {
               this.getForm().getEl().dom.submit();
              },
              items : {},
              title : 'Register a new account'
             }]
          }]
       });
    });