Hybrid View

  1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    kx is on a distinguished road

      0  

    Default Ext.ux.layout.RowFitLayout

    Ext.ux.layout.RowFitLayout


    I wanted to have a layout that distributes multiple components so they fill 100% of the container height. For sure, I can do that with AnchorLayout or TableLayout, but it seems some effort is required to manage these when there are a bunch of child elements.

    My idea was that child elements can have height given in percent, and that value should be relative to the "unallocated" height (which is the difference between container height and the sum of the heights of all elements that are set in pixels).

    Code:
    +-------------------------------------------------------------------+
    |  { height: 100 }                                                  |
    |  panel with a fixed height of 100px (height will remain the same  |
    |  when container size container size changes)                      |
    +-------------------------------------------------------------------+
    |                                                                   |
    |  { height: "50%" }                                                |
    |  Will fill half of the remaining space                            |
    |  (container.height - 100) / 2                                     |
    +-------------------------------------------------------------------+
    |                                                                   |
    |  ( no height in config)                                           |
    |  Will fill all the space that is unallocated (50% in that case)   |
    |                                                                   |
    +-------------------------------------------------------------------+
    Analogous layout in Ext is ColumnLayout, where you can give width or columnWidth and layout will manage that automatically.

    I had some hours to spare and decided, "Why don't make that?"

    Here's what I came up to:
    PHP Code:
    Ext.namespace('Ext.ux.layout');

    /**
     * @class Ext.ux.layout.RowFitLayout
     * @extends Ext.layout.ContainerLayout
     * <p>Layout that distributes heights of elements so they take 100% of the
     * container height.</p>
     * <p>Height of the child element can be given in pixels (as an integer) or
     * in percent. All elements with absolute height (i.e. in pixels) always will
     * have the given height. All "free" space (that is not filled with elements
     * with 'absolute' height) will be distributed among other elements in
     * proportion of their height percentage. Elements without 'height' in the
     * config will take equal portions of the "unallocated" height.</p>
     * <p>Supports panel collapsing, hiding, removal/addition. The adapter is provided
     * to use with Ext.SplitBar: <b>Ext.ux.layout.RowFitLayout.SplitAdapter</b>.</p>
     * <p>Example usage:</p>
     * <pre><code>
     var vp = new Ext.Viewport({
       layout: 'row-fit',
       items: [
         { xtype: 'panel', height: 100, title: 'Height in pixels', html: 'panel height = 100px' },
         { xtype: 'panel', height: "50%", title: '1/2', html: 'Will take half of remaining height' },
         { xtype: 'panel', title: 'No height 1', html: 'Panel without given height' },
         { xtype: 'panel', title: 'No height 2', html: 'Another panel' }
       ]
     });
     * </code></pre>
     * Usage of the split bar adapter:
     * <pre><code>
     var split = new Ext.SplitBar("elementToDrag", "elementToSize", Ext.SplitBar.VERTICAL, Ext.SplitBar.TOP);
     // note the Ext.SplitBar object is passed to the adapter constructor to set
     // correct minSize and maxSize:
     split.setAdapter(new Ext.ux.layout.RowFitLayout.SplitAdapter(split));
     * </code></pre>
     */

    Ext.ux.layout.RowFitLayout Ext.extend(Ext.layout.ContainerLayout, {
      
    // private
      
    monitorResizetrue,

      
    // private
      
    trackChildEvents: ['collapse''expand''hide''show'],

      
    // private
      
    renderAll: function(cttarget) {
        
    Ext.ux.layout.RowFitLayout.superclass.renderAll.apply(thisarguments);
        
    // add event listeners on addition/removal of children
        
    ct.on('add'this.containerListener);
        
    ct.on('remove'this.containerListener);
      },

      
    // private
      
    renderItem: function(cpositiontarget) {
        
    Ext.ux.layout.RowFitLayout.superclass.renderItem.apply(thisarguments);

        
    // add event listeners
        
    for (var i=0this.trackChildEvents.lengthni++) {
          
    c.on(this.trackChildEvents[i], this.itemListener);
        }
        
    c.animCollapse false// looks ugly together with row-fit layout

        // store some layout-specific calculations
        
    c.rowFit = {
          
    hasAbsHeightfalse// whether the component has absolute height (in pixels)
          
    relHeight0// relative height, in pixels (if applicable)
          
    calcRelHeight0// calculated relative height (used when element is resized)
          
    calcAbsHeight// calculated absolute height
        
    };

        
    // process height config option
        
    if (c.height) {
          
    // store relative (given in percent) height
          
    if (typeof c.height == "string" && c.height.indexOf("%")) {
            
    c.rowFit.relHeight parseInt(c.height);
          }
          else { 
    // set absolute height
            
    c.setHeight(c.height);
            
    c.rowFit.hasAbsHeight true;
          }
        }
      },

      
    // private
      
    onLayout: function(cttarget) {
        
    Ext.ux.layout.RowFitLayout.superclass.onLayout.call(thiscttarget);

        if (
    this.container.collapsed || !ct.items || !ct.items.length) { return; }

        
    // first loop: determine how many elements with relative height are there,
        // sums of absolute and relative heights etc.
        
    var absHeightSum 0// sum of elements' absolute heights
            
    relHeightSum 0// sum of all percent heights given in children configs
            
    relHeightRatio 1// "scale" ratio used in case sum <> 100%
            
    relHeightElements = [], // array of elements with 'relative' height for the second loop
            
    noHeightCount 0// number of elements with no height given

        
    for (var i=0ct.items.lengthni++) {
          var 
    ct.items.itemAt(i);

          if (!
    c.isVisible()) { continue; }

          
    // collapsed panel is treated as an element with absolute height
          
    if (c.collapsed) { absHeightSum += c.getFrameHeight(); }
          
    // element that has an absolute height
          
    else if (c.rowFit.hasAbsHeight) {
            
    absHeightSum += c.height;
          }
          
    // 'relative-heighted'
          
    else {
            if (!
    c.rowFit.relHeight) { noHeightCount++; } // element with no height given
            
    else { relHeightSum += c.rowFit.relHeight; }
            
    relHeightElements.push(c);
          }
        }

        
    // if sum of relative heights <> 100% (e.g. error in config or consequence
        // of collapsing/removing panels), scale 'em so it becomes 100%
        
    if (noHeightCount == && relHeightSum != 100) {
          
    relHeightRatio 100 relHeightSum;
        }

        var 
    freeHeight target.getStyleSize().height absHeightSum// "unallocated" height we have
            
    absHeightLeft freeHeight// track how much free space we have

        
    while (relHeightElements.length) {
          var 
    relHeightElements.shift(), // element we're working with
              
    relH c.rowFit.relHeight relHeightRatio// height of this element in percent
              
    absH 0// height in pixels

          // no height in config
          
    if (!relH) {
            
    relH = (100 relHeightSum) / noHeightCount;
          }

          
    // last element takes all remaining space
          
    if (!relHeightElements.length) { absH absHeightLeft; }
          else { 
    absH Math.round(freeHeight relH 100); }

          
    // anyway, height can't be negative
          
    if (absH 0) { absH 0; }

          
    c.rowFit.calcAbsHeight absH;
          
    c.rowFit.calcRelHeight relH;

          
    c.setHeight(absH);
          
    absHeightLeft -= absH;
        }

      },


      
    /**
       * Event listener for container's children
       * @private
       */
      
    itemListener: function(item) {
        
    item.ownerCt.doLayout();
      },


      
    /**
       * Event listener for the container (on add, remove)
       * @private
       */
      
    containerListener: function(ct) {
        
    ct.doLayout();
      }

    });

    // Split adapter
    if (Ext.SplitBar.BasicLayoutAdapter) {

      
    /**
       * @param {Ext.SplitBar} splitbar to which adapter is applied.
       *   If supplied, will set correct minSize and maxSize.
       */
      
    Ext.ux.layout.RowFitLayout.SplitAdapter = function(splitbar) {
        if (
    splitbar && splitbar.el.dom.nextSibling) {
          var 
    next Ext.getCmpsplitbar.el.dom.nextSibling.id ),
              
    resized Ext.getCmp(splitbar.resizingEl.id);

          if (
    next) {
            
    splitbar.maxSize = (resized.height || resized.rowFit.calcAbsHeight) +
                               
    next.getInnerHeight() - 1// seems can't set height=0 in IE, "1" works fine
          
    }
          
    splitbar.minSize resized.getFrameHeight() + 1;
        }
      }

      
    Ext.extend(Ext.ux.layout.RowFitLayout.SplitAdapterExt.SplitBar.BasicLayoutAdapter, {

        
    setElementSize: function(splitbarnewSizeonComplete) {
          var 
    resized Ext.getCmp(splitbar.resizingEl.id);

          
    // can't resize absent, collapsed or hidden panel
          
    if (!resized || resized.collapsed || !resized.isVisible()) return;

          
    // resizingEl has absolute height: just change it
          
    if (resized.rowFit.hasAbsHeight) {
            
    resized.setHeight(newSize);
          }
          
    // resizingEl has relative height: affects next sibling
          
    else {
            if (
    splitbar.el.dom.nextSibling) {
              var 
    nextSibling Ext.getCmpsplitbar.el.dom.nextSibling.id ),
                  
    deltaAbsHeight newSize resized.rowFit.calcAbsHeight// pixels
                  
    nsRf nextSibling.rowFit// shortcut
                  
    rzRf resized.rowFit,
                  
    // pixels in a percent
                  
    pctPxRatio rzRf.calcRelHeight rzRf.calcAbsHeight,
                  
    deltaRelHeight pctPxRatio deltaAbsHeight// change in height in percent

              
    rzRf.relHeight rzRf.calcRelHeight deltaRelHeight;

              if (
    nsRf.hasAbsHeight) {
                var 
    newHeight nextSibling.height deltaAbsHeight;
                
    nextSibling.height newHeight;
                
    nextSibling.setHeight(newHeight);
              }
              else {
                
    nsRf.relHeight nsRf.calcRelHeight deltaRelHeight;
              }
            }
          }
          
    // recalculate heights
          
    resized.ownerCt.doLayout();
        } 
    // of setElementSize

      
    }); // of SplitAdapter
    }

    Ext.Container.LAYOUTS['row-fit'] = Ext.ux.layout.RowFitLayout
    There's also an SplitBar adapter as a bonus.

    I haven't tested that a lot, was in hurry to share my excitement about Ext 2.0 (Actually the free time ran out...)
    There are some known issues and limitations, e.g. collapsed panels are considered elements with absolute height regardless their initial settings, and that can produce somewhat strange visual effect when there are a lot of collapsed panels.

    Hope that will help someone, but even if I had just re-invented the wheel, that exercise helped me to dive into the depths of the Ext. Gee-whiz! The whole Ext 2.0 layout system is so-o-o damned cool!!! No doubt Jack and his team are geniuses!

    Here you can see the layout in action.

  2. #2
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    44
    Vote Rating
    0
    netsuo is on a distinguished road

      0  

    Default


    Hey, i don't know why nobody has responded to this.. but.. this is great !
    I'm not so experienced in Ext so for me this extension is the perfect solution to all my problems !

    Thanks a lot, i will test it very soon !

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    27
    Vote Rating
    0
    dselkirk is on a distinguished road

      0  

    Default


    I agree, nice work.

  4. #4
    Ext User
    Join Date
    Sep 2007
    Posts
    55
    Vote Rating
    0
    gimler is on a distinguished road

      0  

    Default


    this is exactly what i have searched for.

    it work very well the only limitation is the height value only except px ;(

  5. #5
    Ext User
    Join Date
    Apr 2007
    Posts
    379
    Vote Rating
    0
    sfwalter is on a distinguished road

      0  

    Default


    Outstanding work! Kudos to you!

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    pavel.dolinin is on a distinguished road

      0  

    Default


    I have to thank you very mach
    Your code of row-fit just solve my problem in 3 minutes

  7. #7
    Ext User
    Join Date
    Nov 2007
    Posts
    110
    Vote Rating
    0
    ray007 is on a distinguished road

      0  

    Talking


    Thanks for sharing your work, I've tried to improve a bit on it and extended it to automatically add the needed sliders and splitbars. Just add a property 'split' to the items to be resizable.

    Here we go:
    Code:
    Ext.namespace('Ext.ux.layout'); 
     
    /** 
     * @class Ext.ux.layout.RowFitLayout 
     * @extends Ext.layout.ContainerLayout 
     * <p>Layout that distributes heights of elements so they take 100% of the 
     * container height.</p> 
     * <p>Height of the child element can be given in pixels (as an integer) or 
     * in percent. All elements with absolute height (i.e. in pixels) always will 
     * have the given height. All "free" space (that is not filled with elements 
     * with 'absolute' height) will be distributed among other elements in 
     * proportion of their height percentage. Elements without 'height' in the 
     * config will take equal portions of the "unallocated" height.</p> 
     * <p>Supports panel collapsing, hiding, removal/addition. The adapter is provided 
     * to use with Ext.SplitBar: <b>Ext.ux.layout.RowFitLayout.SplitAdapter</b>.</p> 
     * <p>Example usage:</p> 
     * <pre><code> 
     var vp = new Ext.Viewport({ 
       layout: 'row-fit', 
       items: [ 
         { xtype: 'panel', height: 100, title: 'Height in pixels', html: 'panel height = 100px' }, 
         { xtype: 'panel', height: "50%", title: '1/2', html: 'Will take half of remaining height' }, 
         { xtype: 'panel', title: 'No height 1', html: 'Panel without given height', id: '' }, 
         { xtype: 'panel', title: 'No height 2', html: 'Another panel' } 
       ] 
     }); 
     * </code></pre> 
     * Usage of the split bar adapter: 
     * <pre><code> 
     var split = new Ext.SplitBar("elementToDrag", "elementToSize", Ext.SplitBar.VERTICAL, Ext.SplitBar.TOP); 
     // note the Ext.SplitBar object is passed to the adapter constructor to set 
     // correct minSize and maxSize: 
     split.setAdapter(new Ext.ux.layout.RowFitLayout.SplitAdapter(split)); 
     * </code></pre> 
     */ 
     
    Ext.ux.layout.RowFitLayout = Ext.extend(Ext.layout.ContainerLayout, {
      // private
      monitorResize: true,
    
      // private
      trackChildEvents: ['collapse', 'expand', 'hide', 'show'],
    
      // private
      splitHeight: 5,
      rendered: false,
    
      // private
      renderItem: function(c, position, target) {
        Ext.ux.layout.RowFitLayout.superclass.renderItem.apply(this, arguments);
    
        // add event listeners
        for (var i=0, n = this.trackChildEvents.length; i < n; i++) {
          var ev = this.trackChildEvents[i];
          //c.on(this.trackChildEvents[i], this.itemListener, this);
          c.on(ev, this['_item_' + ev], this);
        }
        c.animCollapse = false; // looks ugly together with row-fit layout
    
        this.checkRelHeight(c);
      },
    
      checkRelHeight: function(c) {
    
        // store some layout-specific calculations
        if(!c.rowFit) c.rowFit = {
          hasAbsHeight: false, // whether the component has absolute height (in pixels)
          relHeight: 0, // relative height, in pixels (if applicable)
          calcRelHeight: 0, // calculated relative height (used when element is resized)
          calcAbsHeight: 0, // calculated absolute height
          height: c.height  // save height config
        };
    
        // process height config option
        if (c.height) {
          var height = c.rowFit.height || c.height;
          // store relative (given in percent) height
          if (typeof height == "string" && height.indexOf("%")) {
            c.rowFit.relHeight = parseInt(height);
          }
          else { // set absolute height
            c.setHeight(c.height);
            //c.rowFit.hasAbsHeight = true;
            c.rowFit.hasAbsHeight = !Boolean(c.split);
          }
        }
        //if(c.split) c.rowFit.hasAbsHeight = false;
        c.isResizable = c.isResizable || Boolean(c.split) || !c.rowFit.hasAbsHeight;
      },
    
      // private
      onLayout: function(ct, target) {
    
        Ext.ux.layout.RowFitLayout.superclass.onLayout.call(this, ct, target);
    
        if (this.container.collapsed || !ct.items || !ct.items.length) {
          return;
        }
    
        // first loop: determine how many elements with relative height are there,
        // sums of absolute and relative heights etc.
        var absHeightSum = 0, // sum of elements' absolute heights
            relHeightSum = 0, // sum of all percent heights given in children configs
            relHeightRatio = 1, // "scale" ratio used in case sum <> 100%
            noHeightCount = 0, // number of elements with no height given
            relHeightElements = []; // array of elements with 'relative' height for the second loop
    
        for (var i=0, n = ct.items.length; i < n; i++) {
          var c = ct.items.itemAt(i);
    
          if (!c.isVisible()) { continue; }
    
          // collapsed panel is treated as an element with absolute height
          if (c.collapsed) {
            absHeightSum += c.getFrameHeight();
          }
          else if (c.rowFit.hasAbsHeight) { // element that has an absolute height
            absHeightSum += c.height;
          }
          else { // 'relative-heighted'
            if (!c.rowFit.relHeight) { // element with no height given
              noHeightCount++;
            }
            else {
              relHeightSum += c.rowFit.relHeight;
            }
            relHeightElements.push(c);
          }
        }
    
        // if sum of relative heights <> 100% (e.g. error in config or consequence
        // of collapsing/removing panels), scale 'em so it becomes 100%
        if (noHeightCount == 0 && relHeightSum != 100) {
          relHeightRatio = 100 / relHeightSum;
        }
    
        var freeHeight = target.getStyleSize().height - absHeightSum, // "unallocated" height we have
            absHeightLeft = freeHeight; // track how much free space we have
    
        while (relHeightElements.length) {
          var c = relHeightElements.shift(), // element we're working with
              relH = c.rowFit.relHeight * relHeightRatio, // height of this element in percent
              absH = 0; // height in pixels
    
          // no height in config
          if (!relH) {
            relH = (100 - relHeightSum) / noHeightCount;
          }
    
          // last element takes all remaining space
          if (!relHeightElements.length) { absH = absHeightLeft; }
          else { absH = Math.round(freeHeight * relH / 100); }
    
          // anyway, height can't be negative
          if (absH < 0) { absH = 0; }
    
          c.rowFit.calcAbsHeight = absH;
          c.rowFit.calcRelHeight = relH;
    
          c.setHeight(absH);
          absHeightLeft -= absH;
        }
    
        for (var i=0, n = ct.items.length; i < n; i++) {
          var c = ct.items.itemAt(i);
          if(c.isSlider && c.el2resize) {
    //        this.checkRelHeight(c);
            var split = new Ext.SplitBar(c.el, c.el2resize.el, Ext.SplitBar.VERTICAL, Ext.SplitBar.TOP);
            split.setAdapter(new Ext.ux.layout.RowFitLayout.SplitAdapter(split));
            c.el2resize.sliderId = c.getId();
            c.el2resize = false;
          }
        }
    
        if(!this.rendered) { // keep watching for changes of items
          ct.on('add', this.ctAddItem, this);
          ct.on('remove', this.ctDelItem, this);
          this.rendered = true;
        }
      },
    
      // private - called from Ext.Container
      setContainer : function(ct){
        Ext.ux.layout.RowFitLayout.superclass.setContainer.call(this, ct);
        this._addSliders(ct);
      },
    
      // private
      _addSliders: function(ct) {
        var sh = ct.splitHeight || this.splitHeight;
        var skip1 = true;
        var n = ct.items.length;
        for(var i = n-1; i >= 0; i--) {
          var c = ct.items.itemAt(i);
    
          this.checkRelHeight(c);
          if(c.isResizable) { // !c.rowFit.hasAbsHeight) {
            if(skip1) {
              skip1 = false;
              continue;
            }
    
            if(c.split) {
              var slider = new Ext.Panel({height:sh, isSlider: true});
              slider.el2resize = c;
              slider.addClass('x-splitbar-y');
              ct.insert(i+1, slider);
            }
          }
        }
      },
    
      /**
       * Add event listener for container children
       * @private
       */
      itemListener: function(item) {
        item.ownerCt.doLayout();
      },
      _item_show: function(comp) {
        if(!comp.isSlider && comp.sliderId) {
          var sl = comp.ownerCt.findById(comp.sliderId);
          if(!sl.isVisible()) {
            sl.show();
            return;
          }
        }
        comp.ownerCt.doLayout();
      },
      _item_hide: function(comp) {
        if(!comp.isSlider && comp.sliderId) {
          var sl = comp.ownerCt.findById(comp.sliderId);
          if(sl.isVisible()) {
            sl.hide();
            return;
          }
        }
        comp.ownerCt.doLayout();
      },
      _item_expand: function(comp) {
        this._item_show(comp);
      },
      _item_collapse: function(comp) {
        this._item_hide(comp);
      },
    
      /**
       * Event listener for the container (on add, remove)
       * @private
       */
      ctAddItem: function(ct, comp, idx) {
        // TODO: ev. add slider & splitbar
        ct.doLayout();
      },
      ctDelItem: function(ct, comp) {
        // TODO: ev. remove slider & splitbar
        ct.doLayout();
      }
    
    });
    
    
    // Split adapter
    if (Ext.SplitBar.BasicLayoutAdapter) {
    
      /**
       * @param {Ext.SplitBar} splitbar to which adapter is applied.
       *   If supplied, will set correct minSize and maxSize.
       */
      Ext.ux.layout.RowFitLayout.SplitAdapter = function(splitbar) {
        if (splitbar && splitbar.el.dom.nextSibling) {
          var next = Ext.getCmp( splitbar.el.dom.nextSibling.id ),
              resized = Ext.getCmp(splitbar.resizingEl.id);
    
          // skip abs-height non-resizable components
          while(next && (next.collapsed || !next.isVisible() || !next.isResizable)) {
            next = Ext.getCmp(next.el.dom.nextSibling.id);
          }
    
          if (next) {
            //splitbar.maxSize = (resized.height || resized.rowFit.calcAbsHeight) +
            splitbar.maxSize = (resized.rowFit.hasAbsHeight ? resized.rowFit.calcAbsHeight : resized.getSize().height) +
                               next.getInnerHeight() - 1; // seems can't set height=0 in IE, "1" works fine
          }
          splitbar.minSize = resized.getFrameHeight() + 1;
        }
      }
    
      Ext.extend(Ext.ux.layout.RowFitLayout.SplitAdapter, Ext.SplitBar.BasicLayoutAdapter, {
    
        setElementSize: function(splitbar, newSize, onComplete) {
          var resized = Ext.getCmp(splitbar.resizingEl.id);
    
          // can't resize absent, collapsed or hidden panel
          if (!resized || resized.collapsed || !resized.isVisible()) return;
    
          // resizingEl has absolute height: just change it
          if (resized.rowFit.hasAbsHeight) {
            resized.setHeight(newSize);
          }
          // resizingEl has relative height: affects next sibling
          else {
            if (splitbar.el.dom.nextSibling) {
              var nextSibling = Ext.getCmp( splitbar.el.dom.nextSibling.id );
              // skip abs-height non-resizable components
              while(nextSibling && (nextSibling.collapsed || !nextSibling.isVisible() || !nextSibling.isResizable)) {
                nextSibling = Ext.getCmp(nextSibling.el.dom.nextSibling.id);
              }
    
              var deltaAbsHeight = newSize - resized.rowFit.calcAbsHeight, // pixels
                  nsRf = nextSibling.rowFit, // shortcut
                  rzRf = resized.rowFit,
                  // pixels in a percent
                  pctPxRatio = rzRf.calcRelHeight / rzRf.calcAbsHeight,
                  deltaRelHeight = pctPxRatio * deltaAbsHeight; // change in height in percent
    
              rzRf.relHeight = rzRf.calcRelHeight + deltaRelHeight;
    
              if (nsRf.hasAbsHeight) {
                var newHeight = nextSibling.height - deltaAbsHeight;
                nextSibling.height = newHeight;
                nextSibling.setHeight(newHeight);
              }
              else {
                nsRf.relHeight = nsRf.calcRelHeight - deltaRelHeight;
              }
            }
          }
          // recalculate heights
          resized.ownerCt.doLayout();
        } // of setElementSize
    
      }); // of SplitAdapter
    }
    
    Ext.Container.LAYOUTS['row-fit'] = Ext.ux.layout.RowFitLayout;
    still missing: better handling of add- and remove-events on the container to add/remove sliders and splitbars as well.

    Now if only someone extended the ColumnLayout to have resizable columns ;-)

    Comments?

  8. #8
    Ext User
    Join Date
    Nov 2007
    Posts
    110
    Vote Rating
    0
    ray007 is on a distinguished road

      0  

    Default


    I just found a little problem, probably also with the original version and not only with my modified one:
    internet explorer doesn't scroll the content of the items in the container if too large, while firefox and opera are doing just fine here. I'm getting a rendering error in a different place with those 2 browsers, but that's another story ...
    Does anybody have an idea what's going wrong here?

  9. #9
    Ext User
    Join Date
    Dec 2007
    Posts
    9
    Vote Rating
    0
    sgan is on a distinguished road

      0  

    Default Ext.ViewPort

    Ext.ViewPort


    Hi,


    I need to add a Ext.ViewPort to an existing jsp, basically render the viewport to a div which resides in the existing jsp page.

    I found the Ext.viewport(with all its panels within) always rendered starting at leftmost and topmost point of the browser(FireFox specifically).Is it correct to try to render a Ext.ViewPort into portion of JSP? For the viewport part seems to take over the whole screen.

    Thanks a lot,

  10. #10
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    1
    DigitalSkyline is on a distinguished road

      0  

    Default


    You could've posted in help, but anyways to answer, no ViewPort is descendant of document.body, it can not reside in a div. For this you'll need to use a panel.

    ps - Isn't JSP irrelevant to the browser/discussion?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi