Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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
    dxd
    Guest

    Default


    It's a great addition
    I'll surely use it

  8. #8
    Sencha User
    Join Date
    Nov 2007
    Posts
    24
    Vote Rating
    0
    wpichler is on a distinguished road

      0  

    Default


    your row-fit layout did saved my day - its exactly what i was looking for.

    Where do vote for inclusion into Ext ?

  9. #9
    Ext User jasonbronson's Avatar
    Join Date
    Dec 2007
    Location
    USA
    Posts
    106
    Vote Rating
    0
    jasonbronson is on a distinguished road

      0  

    Default


    bug jack to include it

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

      0  

    Default Thank you!

    Thank you!


    Thanks everybody who rated my tiny plugin that high! Glad it is useful not for me only.

    Yet there are issues to be fixed (e.g. there may be some problems with SplitAdapter - minSize and maxSize aren't updated after resize)...

    At a local copy I renamed 'row-fit' to 'Vertical Layout' (because child components are stacked vertically) and also created 'Horizontal Layout' (latter is merely an interface to ColumnLayout to provide consistent config options. No SplitAdapter for horizontal layout yet.)

    I'll try to find some time to fix problems I'm aware of and then publish the update here. Any feedback/bug reports are appreciated!