Grid Panel overflowing to the right - Question

[SoccerGee]

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:

        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:

        this.cptStatus = Ext.create('Company.Cloud.UI.forms.Status', {
        });
        this.add(this.cptStatus);

Thanks in advance!

[Tim Toady]

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

[SoccerGee]

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?

[Tim Toady]

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.

[SoccerGee]

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.

[Tim Toady]

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