1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Answers
    4
    Vote Rating
    2
    renganathan is on a distinguished road

      0  

    Default Unanswered: Fit to parent plugin available for Extjs4?

    Unanswered: Fit to parent plugin available for Extjs4?


    Hi all,

    Is Fit to parent plugin available for Extjs 4? I was going through this page http://www.sencha.com/forum/showthre...-Fit-to-parent. i found that its available for Extjs 3.

    Guys any suggestions ?
    Thanks,

    RENGANATHAN M G

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,014
    Answers
    3491
    Vote Rating
    848
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Not that I have seen. Port it! Bet you would learn a lot about Ext JS 4
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2010
    Posts
    136
    Vote Rating
    0
    toolware is on a distinguished road

      0  

    Default


    I'd like to see this as well.

  4. #4
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    1
    Albareto is on a distinguished road

      1  

    Default


    Well, I also needed this and I couldn't find it so I tried to port version 3 to 4, and this is what I got. For me it is working but I don't know if it is correct coding or not, I basically removed a couple of things and move others, nothing very impressive. I did a quick test in IE9, FF, Chrome and Safari and seems to work.

    Code:
    Ext.define('Ext.ux.plugins.FitToParent',
    {
        alias: 'plugin.fittoparent',
        
        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 = Ext.Function.createInterceptor(c.doLayout, this.fitSize, this);
                }
                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 code is just a modification from Condor's plugin, you can find the original code for ExtJS 3.x here.

    I attach a full example, you just have to change the paths to the ext source files.

    Please, comment and help improving this component, I think it is very useful; in my opinion it should be a default in the library.

    Cheers!
    Attached Files

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    U.S.A.
    Posts
    11
    Vote Rating
    1
    DCstewieG is on a distinguished road

      0  

    Default


    Thanks Albareto!

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    0
    b.rameesh is on a distinguished road

      0  

    Default


    Working GREAT for Tab panels but not for GRIDs...Please indicate what changes have to be done to make it compatible with Grids...
    Also facing some issues when there are scroll bars in the page...

    Thanks in Advance

  7. #7
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    1
    Albareto is on a distinguished road

      0  

    Default


    In my production application I only use this plugin with grids and never had problems...

    This sample code works with the plugin:

    Code:
    Ext.onReady(function() 
            {
                Ext.create('Ext.grid.Panel',
                {
                    autoScroll: true,
                    renderTo: 'content',
                    layout : 'fit',
                    plugins : ['fittoparent'],
                    store : Ext.create('Ext.data.Store',
                    {
                        fields : ['column1', 'column2'],
                        data :
                        [
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
                        {column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'}
                        ]
                    }),
                    columns :
                    [
                    {flex : 1, text : 'column 1', dataIndex : 'column1'},
                    {flex :1, text : 'column 2', dataIndex : 'column2'}
                    ]
                });
            });
    I tested Chrome, FF and IE9, maybe the plugin is interfering with other code you have. Can you try to pick my example, change the Ext.onReady code to the grid one and test if it works?

  8. #8
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    0
    b.rameesh is on a distinguished road

      0  

    Default


    Hi Albareto,
    The code u gave worked perfectly, but its not working for the code i am using. Really dont know what mistake i am making..Pls help..

    Code:
    var grid = Ext.create('Ext.grid.Panel', {
        id : id1,
        title: titleVal,
        store: store,
        layout : 'fit',
        plugins : ['fittoparent'],
        collapsible:true,
        columns:columnModel,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true,
            plugins: Ext.create('Ext.ux.ProgressBarPager', {})
        }],
        renderTo: divId
    });
      store.loadPage(1);
      store.on('load',function() {
          Ext.getCmp('DashboardBackend').doLayout();
          Ext.getCmp('DashboardGUI').doLayout();
      })
      addToolbars(divId,sfFinal,pollInterval,type);
     return true;
    
    }
    I am getting this error.

    TypeError: d.clone is not a function

  9. #9
    Sencha User
    Join Date
    Oct 2009
    Posts
    95
    Answers
    3
    Vote Rating
    1
    Albareto is on a distinguished road

      0  

    Default


    I guess you will have to debug to see what's in d, why it is undefined and where is coming from, probably will give you a hint of what you are not setting up correctly, I cannot see anything strange in the code you posted.

    Other thing, have you tried to remove the plugin to see if you get the error? I think this is not related to the plugin.

  10. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    11
    Vote Rating
    0
    b.rameesh is on a distinguished road

      0  

    Default


    Hi Albareto,
    I have tried to remove the plugin and tried and its working.. I am in the process of debugging...Will post if i get it working....

    Thanks for you help.