Results 1 to 9 of 9

Thread: vbox doesn't show components; fit does

  1. #1

    Default vbox doesn't show components; fit does

    Here is my task: I need to have a main center panel containing a grid. Above it, I need a special status panel. The status panel is composed of an actual panel with the status message, and a progress bar. Allow me to draw:

    ___________
    | Reading.... <---status
    |------|50% <---Progress
    | Col a| Col b| <-- Grid
    | 25% | -12%

    The entire status panel, as well as its individual components (status and progress) can be added and removed dynamically

    My problem, is that it doesn't render the status text when needed. The border for the main status panel shows up, but nothing inside is rendered. However it works when I use fit layout instead of vbox. Here is my code for declaration:

    Code:
    //  Setup up inline message
     this.msgTpl = new Ext.Template([
       '<div id="waitDiv">',
        '<span id="waitPic" class="waitPic {iconCls}" > </span>',
        '<span id="waitStatus" cls="waitStatus" >{status}</span>',
       '</div>'
      ]
     );
     this.stsMsg = new Ext.Panel({
      cls: 'inlineMsgBox',
      tpl: this.msgTpl,
      height:25
     });
     Ext.apply(this.stsMsg,{
      applyToTpl: function(config){ //shortcut method to re-render panel
       this.initialConfig.tpl.overwrite(this.body,config);
      },
      reset: function(){
       this.applyToTpl({});
      }
     });
     
     this.progress = new Ext.ProgressBar({
      animate: true,
     });
     
     Trailbender.StatusPanel.superclass.constructor.call(this, {
      cls: 'statPnl',
      id: config.id,
      hidden: true,
      layout:'vbox',
      layoutConfig: {align:"stretch"},
      region: 'north',
    //  border: false,
    //  hideBorders: true,
      hideLabel: true,
            items:[this.stsMsg,this.progress]
       });
    here is my code for showing it
    Code:
    displayMessage: function(text, iconCls, timeout){
      this.show();
      this.showInlineMsg();
      this.stsMsg.applyToTpl({status: text,iconCls: iconCls});
      if(timeout && timeout > 0){
       this.hideInlineMsg.defer(timeout,this);
      }
     },
     
    show: function(){
      Trailbender.StatusPanel.superclass.show.apply(this);
      this.ownerCt.doLayout();
     },
     
    
    // displays inline message showInlineMsg : function(){ this.showComp(this.stsMsg); },
    /** * Displays the component * @param {ProgressBar/Panel} component to show */ showComp: function(component){ component.reset(); //both have this method this.show(); component.show(); this.doLayout(); this.syncShadow(); },

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    are you seting a flex value on stsMsg or progress ??

  3. #3

    Default

    neither. I don't want them stretched. I want them at natural height, one after another.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    What do you mean by 'natural height'?

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    That's not a vbox layout then.

    It's either simple ContainerLayout (no layout config), or, if you want managed widths, then anchor layout.

  6. #6

    Default

    Condor and Animal: I want the container's size to be determined by the children's heights.

    The problem with no layout, is that when I set both components heights to auto, and the parent's height to auto, then the height of the parent is not the sum of its childrens heights, but the highest of its children. It is then too short.

    It works if I set one of the components heights manually, but I don't want to do that since it can change.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Quote Originally Posted by doom777 View Post
    the height of the parent is not the sum of its childrens heights, but the highest of its children.
    Not if it's managed by a size-managing layout itself. (eg part of a border layout).

    If it has its height set, then you will need to allow scrolling of its content.

  8. #8

    Default

    So what layout do you suggest? Border is overkill especially since there is no center component. vbox would be perfect, since it's literally -- one component under the second one. Unfortunately, it doesn't show the components.

    I am now realizing that my problem is that at time of render, the text is not yet there, so there is no height. I wonder how I could fix that.

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You can't use a height-sizing layout if you don't want the child items sized.

    Use an anchor layout and anchor the widths of the Components.

Posting Permissions

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