1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    6
    Vote Rating
    0
    SoccerGee is on a distinguished road

      0  

    Default Unanswered: Grid Panel overflowing to the right - Question

    Unanswered: Grid Panel overflowing to the right - Question


    I am new.

    I'm trying to place a grid inside of a panel. However the panel defaults to the size of the browser- whereas the grid in the panel defaults to a width of 10,000px. The rendering of the grid looks as if it is overflowing the panel to the right (which is how I discovered the width problem). This causes there to be no border to the right of the grid- looks awful. Is there a way to fit the grid inside of the panel without specifying a specific width?

    quick note:
    - I have not populated the store with any data.

    Here's some code of my objects and what not:
    Code:
            this.gridContainer = Ext.create('Ext.grid.Panel', {
                width: 900,
                title: 'Status',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns:
                {
                    defaults: {
                        width: 100
                    },
                    items: [
                        { text: 'Name', dataIndex: 'Name' },
                        { text: 'DisplayName', dataIndex: 'DisplayName' },
                        { text: 'Active', dataIndex: 'Active' },
                        { text: 'Created Date', dataIndex: 'CreatedDate' },
                        { text: 'Updated Date', dataIndex: 'UpdatedDate' },
                        { text: 'Record Version', dataIndex: 'RecordVersion' },
                        { text: 'Description', dataIndex: 'Description',flex:1}
                    ]
                }
            });
            this.add(this.gridContainer);
        }
    instantiation:
    Code:
            this.cptStatus = Ext.create('Company.Cloud.UI.forms.Status', {
            });
            this.add(this.cptStatus);

    Thanks in advance!

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    What type of layout does the panel have and is the grid the only child? In what method are you adding the grid?

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    6
    Vote Rating
    0
    SoccerGee is on a distinguished road

      0  

    Default


    Essentially there are 3 panels (Panel1 is the UI and instantiates Panel2, Panel2 instantiates the grid, Panel3 is the Grid Panel).

    Panel1 - vbox
    Panel2 - hbox
    Panel3 - didn't declare a layout. I assumed it inherited some 'grid' styled layout.

    The grid is the only child

    Does that answer your question fully?

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    So if I am correct in understanding that the grid is panel 3 and that it is the only child of panel 2, why is panel2 an hbox? Is your reason for the hbox in a vbox to use the entire browser window? If so, you can use Ext.container.Viewport to handle that for you. You are correct in not having a layout on your grid. It is hard to identify your issue without seeing more code or a working example of the minimum code to cause the issue.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    6
    Vote Rating
    0
    SoccerGee is on a distinguished road

      0  

    Default


    The reason I didn't use a Viewport was because Panel3 is actually going to be brought into the center area of the Viewport. No real reason for the hbox, but when I remove that layout declaration, it doesn't fix the 10000px width of the grid... its so strange.

  6. #6
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    Can you post a small amount of code that demonstrates the problem?

Thread Participants: 1

Tags for this Thread