Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Auto Adjusting Ext js grid width with screen resolution

  1. #1

    Default Auto Adjusting Ext js grid width with screen resolution

    Hi ,
    how adjust Ext js grid width as we increase screen resolution ext js grid expand accordingly.

    can we set ext js column width in percentage as we do with html table.

    Regards.

  2. #2
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    You can only set the initial width in pixels of the column.
    manual on Column: http://dev.sencha.com/deploy/dev/doc...xt.grid.Column

    You could set autoExpandColumn to the number of the column to be auto expanded:
    Code:
    {
        xtype: 'viewport',
        layout: 'fit',
        items: [
            {
                xtype: 'grid',
                title: 'My Grid',
                autoExpandColumn: 1,
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'string',
                        header: 'Column',
                        sortable: true
                    },
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'number',
                        header: 'Column',
                        sortable: true,
                        width: 100,
                        align: 'right'
                    },
                    {
                        xtype: 'datecolumn',
                        dataIndex: 'date',
                        header: 'Column',
                        sortable: true,
                        width: 100
                    },
                    {
                        xtype: 'booleancolumn',
                        dataIndex: 'bool',
                        header: 'Column',
                        sortable: true,
                        width: 100
                    }
                ]
            }
        ]
    }
    manual on GridPanel: http://dev.sencha.com/deploy/dev/doc...grid.GridPanel


    Or forceFit all columns through the GridView:

    Code:
    {
        xtype: 'viewport',
        layout: 'fit',
        items: [
            {
                xtype: 'grid',
                title: 'My Grid',
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'string',
                        header: 'Column',
                        sortable: true
                    },
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'number',
                        header: 'Column',
                        sortable: true,
                        width: 100,
                        align: 'right'
                    },
                    {
                        xtype: 'datecolumn',
                        dataIndex: 'date',
                        header: 'Column',
                        sortable: true,
                        width: 100
                    },
                    {
                        xtype: 'booleancolumn',
                        dataIndex: 'bool',
                        header: 'Column',
                        sortable: true,
                        width: 100
                    }
                ],
                view: new Ext.grid.GridView({
                    forceFit: true
                })
            }
        ]
    }
    manual on GridView: http://dev.sencha.com/deploy/dev/doc....grid.GridView
    Last edited by devtig; 23 Dec 2010 at 3:55 AM. Reason: typo
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  3. #3

    Default

    Thank you very much sir for the help.
    by using forcefit = true solved my problem.

    Thank you for the quick and accurate response.

  4. #4

    Default setting view property of EditorGridPanel on runtime.

    Hi,

    i want to set the view: new Ext.grid.GridView({
    forceFit: true}),


    on basis of some condition.

    some times i show 18 columns in grid panel in that case i want grid panel to be on full screen, but in other cases i have more then 25 columns and in that case i donot want my grid to be force fit = true because there are enough columns on the screen and no need for force fit = true and in this case it also creates mess.

    so how can i do that after store load event because after store load event i have the number of columns on the basis of which i can take decision.

    although i tried to do like that am i right or wrong, show me another way, it is not working.
    <CODE>
    view: new Ext.grid.GridView({

    var daysData = $(store.reader.xmlData).find("Days")[0];
    var cellFilled = false;
    var totalIncomingColumns = 0;
    if ($(store.reader.xmlData)[0].xml != "")
    totalIncomingColumns = daysData.childNodes.length;
    if (totalIncomingColumns == 7)
    {
    forceFit: true;
    }
    else if(totalIncomingColumns > 7)
    {
    forceFit: false;
    }
    }),
    </CODE>

    Thanks.

  5. #5
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    I'm sorry, but this is: "Too many syntax errors". This is A. not javascript and B. no way to make an instance of a component in ExtJs.

    Make an instance of a component like so:
    Code:
    new Ext.grid.GridView({
        a : 123,
        b : 'abc',
        forceFit : totalIncomingColumns > 7 ? true : false
    });
    And use the CODE tags around your posted code so that code looks like it does in my post instead of how it looks in your post.
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  6. #6

    Default

    you have set the
    forceFit : totalIncomingColumns > 7 ? true : false
    while creating new instance of grid, but at that time i don't have totalIncomingColumns initialized, i want to do that after store load event.

    Thanks.

  7. #7
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    You could try this but I don't think it works, because forceFit is a config option and not a public property.
    Code:
    myGrid.getStore().on('metachange', function(store, meta) {
        myGrid.getView().forceFit=meta.colModel.length > 7 ? true : false;
        myGrid.doLayout();
    });
    (disclaimer: untested code)

    Or don't use the forceFit approach at all, but assign a column to be the one that auto-expands. Check out autoExpandColumn config option in GridPanel: http://dev.sencha.com/deploy/dev/doc...grid.GridPanel
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  8. #8
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    You might want to read thess posts about dynamic grids (changing columns):
    http://blog.nextlogic.net/2009/04/dy...t-js-grid.html
    http://erhanabay.com/2009/01/29/dyna...el-for-ext-js/
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  9. #9

    Default Can we make two or more columns as autoExpandColumn

    Hi,

    i am successful in setting "autoExpandColumn" and now my grid auto expands, but you identified to set "autoExpandColumn" as no of column but actually we have to set the column name.

    ok let me know if there is way to autoExpand two or more columns.

    Thanks.

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Configure the columns you don't want to resize with fixed:true and configure the gridview with autoFill:true (or forceFit:true).

Page 1 of 2 12 LastLast

Similar Threads

  1. Screen resolution
    By issameddine in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 16 Sep 2008, 8:40 AM
  2. Grid height problem on increase of screen resolution.
    By john_kennedy in forum Ext 2.x: Help & Discussion
    Replies: 15
    Last Post: 6 Aug 2008, 3:37 AM
  3. Unhide grid columns based on screen resolution
    By rarerules in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 25 Mar 2008, 1:05 PM
  4. Grid height based on screen resolution
    By rarerules in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 13 Apr 2007, 6:28 PM

Posting Permissions

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