Results 1 to 4 of 4

Thread: Making Gridheight to fit tabpanel

  1. #1

    Default Making Gridheight to fit tabpanel

    Hi

    I am trying to maximise a grid inside a tabpanel. I am new to extjs and can someone please help to identify what am I not doing/doing wrong.

    Thanks
    Code:
    function simpleGrid() {
        var myData = [['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am']];
    
        // create the data store
        var store = new Ext.data.ArrayStore({
            fields: [{
                name: 'company'
            },
            {
                name: 'price',
                type: 'float'
            },
            {
                name: 'change',
                type: 'float'
            },
            {
                name: 'pctChange',
                type: 'float'
            },
            {
                name: 'lastChange',
                type: 'date',
                dateFormat: 'n/j h:ia'
            }]
        });
        // manually load local data
        store.loadData(myData);
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [{
                id: 'company',
                header: 'Company',
                width: 160,
                sortable: true,
                dataIndex: 'company'
            },
            {
                header: 'Price',
                width: 75,
                sortable: true,
                dataIndex: 'price'
            },
            {
                header: 'Change',
                width: 75,
                sortable: true,
                dataIndex: 'change'
            },
            {
                header: '% Change',
                width: 75,
                sortable: true,
                dataIndex: 'pctChange'
            },
            {
                header: 'Last Updated',
                width: 85,
                sortable: true), dataIndex: 'lastChange'
            }], layout: 'fit', title: 'Array Grid'
        });
        return grid;
    };
    
    Ext.BLANK_IMAGE_URL = '/js/ext-3.1.0/resources/images/default/s.gif';
    // Ext.lib.Ajax.defaultPostHeader = 'application/json';
    Ext.onReady(function() {
        Ext.QuickTips.init();
        var tabPanel = new Ext.TabPanel({
            id: 'FormPanel',
            activeTab: 1,
            renderTo: Ext.getBody(),
            items: [{
                title: 'Search'
            },
            {
                title: 'Browse',
                id: 'gd',
                layout: 'fit'
            },
            {
                title: 'Edit',
                items: [simpleGrid()]
            }]
        });
    })
    Last edited by mystix; 23 Dec 2009 at 9:16 AM. Reason: FORMAT YOUR CODE!!! AND POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Add the GridPanel to the TabPanel.

    BTW, do a forum search for "add the gridpanel to the tabpanel".

  3. #3

    Default

    I have already added the gridpanel to the Tab. look at the part of the code(SimpleGrid()). Even the Tabpanel itself doesn't maximise to 100%.

    var tabPanel = new Ext.TabPanel({
    id: 'FormPanel',
    activeTab: 1,
    renderTo: Ext.getBody(),
    items: [{
    title: 'Search'
    },
    {
    title: 'Browse',
    id: 'gd',
    layout: 'fit'
    },
    {
    title: 'Edit',
    items: [simpleGrid()]
    }]
    });

  4. #4

    Default

    Please ignore. I got it fixed using autoWidth and autoHeight.
    Thanks Animal for your help.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •