1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    latterd is on a distinguished road

      0  

    Default Unanswered: Make Grid Panel Span Container and Resize Accordingly

    Unanswered: Make Grid Panel Span Container and Resize Accordingly


    Hi All,

    Merry xmas

    What is the best way to make a grid panel span the with of the container it sits in, and also resize accordingly when I resize the browser window?

    Scenario:

    I have a tabpanel, on each tab there is form panel with a nested grid panel. I can make the tabpanel span the entire browser window but how can I get the gridpanel to span the entire browser window aswell? furthermore, how can I get the tabpanel contents to resize accordingly also?

    Many Thanks
    latterd

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Answers
    3447
    Vote Rating
    814
    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


    The grid is within the form? Should be able to use the anchor config as the form should be using anchor layout. anchor take a string and can be 1 or 2 values within it. Let's take this for an example:

    Code:
    anchor : '90% 50%'
    That means the grid will take 90% of the available width and 50% of the available height at all times (when the parent container resizes)

    If you pass one value it is assumed to be the width:

    Code:
    anchor : '100%'
    will take up 100% of the available width.

    You can also don't have to use percentages:

    Code:
    anchor : '-20'
    Means that the width will be 100% minus 20 pixels.
    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
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    latterd is on a distinguished road

      0  

    Default


    Hi,

    Many Thanks for your reply, I did try what you suggested but to no avail? I have included my code below to see if this changes anything?

    NOTE: I have ommitted some code for brevity but
    Code:
    grid3
    is a gridpanel,

    Code:
    candidatesGridForm = Ext.create('Ext.form.Panel', {
            url: 'http://rest/candidates/',
            method: 'POST',
            id: 'candidates-form',
            width: '100%',
            frame: false,
            title: 'Candidates',
            bodyPadding: 5,
            fieldDefaults: {
                labelAlign: 'left',
                msgTarget: 'side'
            },
            tbar:candidatesToolbar,
            items: [
                    grid3
                    ]
        });
    Code:
    var tabs = Ext.createWidget('tabpanel', {
            renderTo: 'xapp',
            //width: "100%"
            activeTab: 0,
            defaults :{
                bodyPadding: 0
            },
            items: [tabHome, candidatesGridForm]
        });
    So, as you can see I create my gridpanel, add it to a formpanel, which is then finally added to a tabpanel.

    Many Thanks for any help.
    latterd.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Answers
    526
    Vote Rating
    282
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Get rid of the width: '100%', it isn't valid.

    Currently you don't have a layout specified on the form. This is the cause of your problems.

    If you want the grid to fit the width and height of the form then use a fit layout.

    If you want to do cleverer things with percentages or pixel offsets then you'll need to use anchor layout or absolute layout.

    Check out the layout browser example:

    http://dev.sencha.com/deploy/ext-4.0...t-browser.html

    The layout option needs to be specified on the form but the details go on the grid itself. If you can't get it to work then please post your code including your attempts at using the layouts so that we can point you in the right direction.

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    latterd is on a distinguished road

      0  

    Default


    Hi skirtle,

    Thanks for the reply, sorry mine is a bit late but it is the holidays and all .

    I tried your suggestion but to no avail, so I'm posting my code as you kindly suggested:

    Code:
    candidateProfileForm = Ext.create('Ext.form.Panel', {
            url: 'http://localhost.testing.com/rest/rest/candidates/1',
            method: 'POST',
            id: 'candidateProfile-form',
            frame: false,
            title: 'Profile',
            fieldDefaults: {
                labelAlign: 'left',
                msgTarget: 'side'
            },
            items: [ ... ]
    }).hide();
    Code:
    grid3 = Ext.create('Ext.grid.Panel', {
            store: candidatesStore,
            selModel: sm,
            columnLines: true,
            frame: false,
            title: 'Candidates',
            columns: [ ... ],
            bbar: candidatesPagingBar
        });
    Code:
    candidatesGridForm = Ext.create('Ext.form.Panel', {
            url: 'http://localhost.testing.com/rest/rest/candidates/1',
            method: 'POST',
            id: 'candidates-form',
            frame: false,
            title: 'Candidates',
            bodyPadding: 5,
            fieldDefaults: {
                labelAlign: 'left',
                msgTarget: 'side'
            },
            tbar:candidatesToolbar,
            items: [
                    grid3,
                    candidateProfileForm
                    ]
        });
    Code:
    var tabs = Ext.widget('tabpanel', {
        renderTo: 'xapp',
        activeTab: 0,
        defaults :{
            bodyPadding: 0
        },
        items: [tabHome, candidatesGridForm]
    });
    Many Thanks, please let me know if you need more info.

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    25
    Vote Rating
    0
    danielleng is on a distinguished road

      0  

    Default


    You did not do what skirtle mentioned. You need to specify the LAYOUT of the panel so that your items inside the panel can be sized and placed properly.

    Code:
    candidatesGridForm = Ext.create('Ext.form.Panel', {         
    url: 'http://localhost.testing.com/rest/rest/candidates/1',         
    method: 'POST',         
    id: 'candidates-form',
    layout: 'anchor',     // or fit/column/watever layout you want.
    frame: false,         
    title: 'Candidates',         
    bodyPadding: 5,         
    fieldDefaults: {             
    abelAlign: 'left',             
    msgTarget: 'side'         },         
    tbar:candidatesToolbar,         
    items: [                 
    grid3,                 
    candidateProfileForm                 
    ]     
    });



    It seems to me you did not look at the examples at all. Theres alot of info there, and also in the api documentation.
    Once u have specified the layout THEN you can go on ahead and put
    anchor: '100% 50%'
    For the items INSIDE that panel.