1. #91
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    Condor - wasn't there any feedback from sencha team to implement this? Or is the interest low because of Ext4?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  2. #92
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I haven't heard anything, but I'll ask them again at the conference.

  3. #93
    Sencha User
    Join Date
    Aug 2010
    Posts
    11
    Vote Rating
    0
    rnegraobr is on a distinguished road

      0  

    Default FitToParent is using the size before resizing

    FitToParent is using the size before resizing


    Hi all,

    I'm using se follow version of FitToParent :
    Code:
     
    Ext.namespace('Ext.ux');
    /**
     * @class Ext.ux.FitToParent
     * @extends Object
     * <p>Plugin for {@link Ext.BoxComponent BoxComponent} and descendants that adjusts the size of the component to fit inside a parent element</p>
     * <p>The following example will adjust the size of the panel to fit inside the element with id="some-el":<pre><code>
    var panel = new Ext.Panel({
        title: 'Test',
        renderTo: 'some-el',
        plugins: ['fittoparent']
    });</code></pre></p>
     * <p>It is also possible to specify additional parameters:<pre><code>
    var panel = new Ext.Panel({
        title: 'Test',
        renderTo: 'other-el',
        autoHeight: true,
        plugins: [
            new Ext.ux.FitToParent({
                parent: 'parent-el',
                fitHeight: false,
                offsets: [10, 0]
            })
        ]
    });</code></pre></p>
     * <p>The element the component is rendered to needs to have <tt>style="overflow:hidden"</tt>, otherwise the component will only grow to fit the parent element, but it will never shrink.</p>
     * <p>Note: This plugin should not be used when the parent element is the document body. In this case you should use a {@link Ext.Viewport Viewport} container.</p>
     */
    Ext.ux.FitToParent = Ext.extend(Object, {
        /**
         * @cfg {HTMLElement/Ext.Element/String} parent The element to fit the component size to (defaults to the element the component is rendered to).
         */
        /**
         * @cfg {Boolean} fitWidth If the plugin should fit the width of the component to the parent element (default <tt>true</tt>).
         */
        fitWidth: true,
        /**
         * @cfg {Boolean} fitHeight If the plugin should fit the height of the component to the parent element (default <tt>true</tt>).
         */
        fitHeight: true,
        /**
         * @cfg {Boolean} offsets Decreases the final size with [width, height] (default <tt>[0, 0]</tt>).
         */
        offsets: [0, 0],
        /**
         * @constructor
         * @param {HTMLElement/Ext.Element/String/Object} config The parent element or configuration options.
         * @ptype fittoparent
         */
        constructor: function(config) {
            config = config || {};
            if(config.tagName || config.dom || Ext.isString(config)){
                config = {parent: config};
            }
            Ext.apply(this, config);
        },
        init: function(c) {
            this.component = c;
            c.on('render', function(c) {
                this.parent = Ext.get(this.parent || c.getPositionEl().dom.parentNode);
                if(c.doLayout){
                    c.monitorResize = true;
                    c.doLayout = c.doLayout.createInterceptor(this.fitSize, this);
                } else {
                    this.fitSize();
                    Ext.EventManager.onWindowResize(this.fitSize, this);
                }
            }, this, {single: true});
        },
        fitSize: function() {
            var pos = this.component.getPosition(true),
                size = this.parent.getViewSize();
            this.component.setSize(
                this.fitWidth ? size.width - pos[0] - this.offsets[0] : undefined,
                this.fitHeight ? size.height - pos[1] - this.offsets[1] : undefined);
    //  this.component.doLayout();
        }
    });
     
    Ext.preg('fittoparent', Ext.ux.FitToParent);
    And i call plug-in how is follow:
    Code:
     
    var painelITENS = new Ext.Panel({
         id : 'xpainelITENS',
      plugins: [
       new Ext.ux.FitToParent({
         parent: 'FormTabPanel',
         fitHeight: true,
         fitWidht: true,
         offsets: [ 20 ,  215 + 10 ] 
       })
      ],
        autoScroll : false, 
        frame : true,
        renderTo : 'ListadeItens'
    });
     
    ..... 
     
    var gridITENS = new Ext.grid.GridPanel({
         id: 'xgridITENS',
         store: WEBui.storeITENS,
         loadMask: true,
         stripeRows: true,
         sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
         height: 200,
         width : 400,
      plugins: [
       new Ext.ux.FitToParent({
         parent: 'xpainelITENS',
         fitHeight: true,
         fitWidht: true,
         offsets: [ 10 , 10 ] 
       })
      ],
         stateful: true,
         stateId: 'grid',       
         columns: [  ......
     
    ....
     
        Ext.getCmp('xpainelITENS').add(gridITENS);
        Ext.getCmp('xpainelITENS').doLayout();
     
    ....
    My problem is : When i resize the west panel or browser window, the fitSize function runs before the central panel occurs completely. The result is the size of "last" panel size. I think that i need some "wait resource" or "before resizing" to implement on FitToParent, but I don't know how to do it.

    NOTE : When i change the tab and back, i'm calling doLayout() and the size is corrected. It makes me think that i really need some "wait resource" or "before resizing".

    Code:
     
    var FormTabPanel = new Ext.TabPanel({
     activeTab : 0,
     deferredRender : false, // need this if you are going to include a form in your tab panel
     id: 'FormTabPanel',
     frame: true,
     border: false,
     anchor: '100%',  
     defaults : {
      autoScroll : true,
      bodyStyle : 'padding:10px'
     },
          items: [{
           id: 'NFresumo',
      height: altura[3]-127,   
      title : 'Informações Gerais',
          contentEl : 'FormTab1'
     },{
          id: 'NFdetalhe',
      title : 'Itens da Nota Fiscal',
          contentEl : 'FormTab2'
     }],
    listeners: {  
    tabchange: function(tabp,tab){  
    if (tab.id=='NFdetalhe'){ Ext.getCmp('xpainelITENS').doLayout();};
    } 
    } 
    });
    Thanks for all.


    ftp-1.png
    ftp-2.png
    ftp-3.png

  4. #94
    Ext JS Premium Member bbellmyers's Avatar
    Join Date
    Oct 2008
    Location
    Minnesota
    Posts
    1
    Vote Rating
    0
    bbellmyers is on a distinguished road

      0  

    Default


    So, the Box Component is built of divs, right? Aren't divs 100% wide by default anyway? Why do we need all this code to set inline style widths, when "width: auto" would work as well? Is this for reverse compatibility with IE 6 or something?
    Bruce Bell-Myers
    Principal Software Engineer, PTC

  5. #95
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    But all this is inside a tabpanel! You shouldn't be using FitToParent inside an Ext.Container.

    Instead you should add the elements as boxcomponent items to the container. To get the proper width you could use layout:'anchor' on the container and anchor:'100%' on the boxcomponents.

  6. #96
    Sencha User
    Join Date
    Aug 2010
    Posts
    11
    Vote Rating
    0
    rnegraobr is on a distinguished road

      0  

    Default


    I'm using Ext.ND and my TabPanel is inside of Ext.Nd.UIDocument.

    I don't know why, but when i render de grid directly on the DIV, the behavior in IE is different of the Firefox. Sometimes the scroll bar appears in browser windows and sometimes the scroll bar in the grid doesn't (i need to click on the grid to show scroll bar).

    My interesting is in height size because the panel above the grid will changed deppending of situation.

    Using the FitToParent was the only way to have the same behavior in all browsers (IE, FF, Opera and Safari), including correct showing of scroll bar.

    But using FitToParent, the function runs before the resize occurs, changing the size to the "last size".

    So, how i put a "wait resource" to runs FitToParent only after resize occurrs ?

    (sorry about my poor english)

    Thanks in advance.

  7. #97
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I repeat: If this is in an Ext container (e.g. TabPanel) then you should not be rendering anything. You should add() the grid to the tabpanel and call doLayout().

  8. #98
    Sencha User
    Join Date
    Aug 2010
    Posts
    11
    Vote Rating
    0
    rnegraobr is on a distinguished road

      0  

    Default


    Condor,
    I'm not rendering (my mistake writing) I'm using add() and doLayout() to show the grid. But I'm doing it inside the ext.panel not directly on the TabPanel.

    I'll try to add directly on TabPanel how you said.

  9. #99
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You can do it in a normal panel too, but you have to check 2 things:
    1. Do you really need the panel (don't forget that a gridpanel is also a panel!).
    2. Do all containers have a layout (e.g. is the panel layout:'fit')?

  10. #100
    Ext JS Premium Member Zaphod Beeblebrox's Avatar
    Join Date
    Dec 2010
    Posts
    14
    Vote Rating
    0
    Zaphod Beeblebrox is on a distinguished road

      0  

    Default


    Condor, first, thank you.

    I'm only a week or so into Ext JS and this plugin has given me great insight into Ext JS internals.

    I'm working on a project that requires a border layout within a parent div. There's an additional UI that surrounds my app, and I'd like to keep that intact and not have to resort to Ext.Viewport and a separate pop-up.

    I've got your plugin working somewhat - width resizing great, height, well not so much.

    I've taken the complex layout sample code from the Sencha demo and placed it in a panel with your plugin defined. But the only way I can get anything more than a thin blue bar to appear is to give the panel a height:

    After your Ext.ux is defined and inside an Ext.onReady I start with...
    Code:
                var panel = new Ext.Panel({
                    autoHeight: true,
                    // height: 600,
                    layout: 'border',
                    renderTo: 'content',
                    plugins: ['fittoparent'],
                    items: [ ...
    The HTML wrapper looks like this...

    Code:
        <div style="border: 1px solid #f00;">
        <div id="content" style="width: 100%; height: 100%; padding: 0; margin:0 overflow: hidden; min-height:500px;">
            {pg->output_section f='layout'}
        </div>
        </div>
    Smarty renders the HTML from the Sencha complex layout sample in response to the {pg->output_section f='layout'} call. The result can be seen in screen-shot-1.png below.

    screen-shot-1.png

    The red border is to show me where the inner container "content" is showing as it shapes itself to the inner div. The thin blue line just below the top red line is the complex layout.

    If I change the panel config (as follows) removing autoHeight and setting a height I get what's seen in screen-shot-2.png

    Code:
                var panel = new Ext.Panel({
                    // autoHeight: true,
                    height: 600,
                    layout: 'border',
                    renderTo: 'content',
                    plugins: ['fittoparent'],
                    items: [
    screen-shot-2.png

    So, I have the UI rendering now, and changing the width tracks nicely. However, when I reduce the height of the browser I would expect to see a browser based scrollbar - but I get none... see screen-shot-3.png - sigh...

    screen-shot-3.png

    What I'm shooting for is a minimum height presentation, a container div that expands to fit the contents of the border-layout, and browser scroll bars if the window is smaller than the rendered content.

    What am I missing?