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

Thread: GridPanel doesn´t fit to surrounding FormPanel

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291

    Default GridPanel doesn´t fit to surrounding FormPanel

    Hi,

    please see attached example, I just don´t get the EditorGridPanel autofitted to the height of the
    surrounding panel ....

    Maybe someone can help me out

    Many thanks!
    d1

    Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/extjs/ext-all.js"></script>
    
        <script type="text/javascript">
        Ext.onReady(function(){
    
    
            myClass = function (cfg) {
    
                //===== Store
                var myData = [
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am']
                          ];
    
                this.store = new Ext.data.ArrayStore({
    
                    storeId: 'EntryStore',
                    fields: [
                        'Title', 'Message','CreationDate','ChangeDate'
                    ]
                });    
                this.store.loadData(myData);
    
                
    
                //===== Define Top
                this.fieldSetEntries = new Ext.form.FieldSet({
                    
                    title: 'New entry',
                    //layout: 'form',
                    items: [
                        {
                            xtype: 'form',
                            labelWidth: 100,
                            labelAlign: 'left',
                            //layout: 'form',
                            hideBorders: true,
                            border: false,
                            items: [
                                {
                                    xtype: 'textfield',
                                    fieldLabel: 'Title',
                                    anchor: '100%'
                                }
                            ]
                        }
                    ]        
                });
                
    
    
                //===== Define Bottom
                this.gridPanelEntries = new Ext.grid.EditorGridPanel({
                    
                    title: 'Entries',
                    store: this.store,
                    autoExpandColumn: 'Message',
                    frame: true,
                    autoHeight: true,
                    //layout: 'fit',
                    tbar: new Ext.Toolbar({
                        items: [
                               {
                                   icon: 'icons/silk/png/application_side_contract.png',
                                   tooltip: 'Replies'
                               }
                        ]
                    }),
                    bbar: new Ext.PagingToolbar({}),
                    selModel: new Ext.grid.RowSelectionModel({
                        singleSelect: true
                    }),
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            header: 'Title',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'Title',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            id: 'Message',
                            header: 'Message',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'Message',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            header: 'CreationDate',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'CreationDate',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            header: 'ChangeDate',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'ChangeDate',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        }
                    ]
                });
    
    
    
                //===== Define Panel
                Ext.apply (cfg, {
    
                    //title: 'Dummy',
                    //border: false,
                    autoShow: false,
                    frame: true,
                    layout: 'form',
                    items: [
                                this.fieldSetEntries,
                                this.gridPanelEntries
                            ]
                }, {});
                
                myClass.superclass.constructor.call (this, cfg);
            }
    
    
            
            Ext.extend (myClass, Ext.Panel, {
    
            });
    
    
            // Draw the panel
            new myClass({
    
                renderTo: Ext.getBody(),
                width: 400,
                height: 350
            });
        });
    
    
        </script>
        
    </head>
    
    <body>
    
    </body>
    </html>
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  2. #2
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291

    Default

    Still have no clue!
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

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

    Default

    You include the grid in a form layout and specify no anchor. How is Ext supposed to know how you want your grid sized?

    I recommend changing the form to layout:'hbox',layoutConfig:{align:'stretch'} and set the grid to flex:1 and remove the autoHeight:true.

  4. #4
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291

    Default

    I guess you mean 'vbox' ...

    but as always: You´re my man!

    Many many thanks!
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291

    Default

    Hi Condor,

    here I´ve got a more complex problem regarding the same issue, maybe you can help me out:

    If you click the button, I switch to another panel and you can see it still doesn´t fit. As soon as
    you resize the window it recalcs correctly.

    Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        
        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/extjs/ext-all.js"></script>
    
        <script type="text/javascript">
        Ext.onReady(function(){
    
            messages = function (cfg) {
                
                //===== Store
                var myData = [
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am'],
                              ['Title','Message','9/1 12:00am','9/1 12:00am']
                          ];
    
                this.store = new Ext.data.ArrayStore({
    
                    storeId: 'EntryStore',
                    fields: [
                        'Title', 'Message','CreationDate','ChangeDate'
                    ]
                });    
                this.store.loadData(myData);
    
    
                //===== Define the grid panel
                this.gridPanelMessages = new Ext.grid.EditorGridPanel({
                    
                    title: 'Messages',
                    store: this.store,
                    autoExpandColumn: 'Message',
                    frame: true,
                    flex: 1,
                    tbar: new Ext.Toolbar({
                        items: [
                               {
                                   icon: 'icons/silk/png/application_side_contract.png',
                                   tooltip: 'Replies'
                               }
                        ]
                    }),
                    bbar: new Ext.PagingToolbar({}),
                    selModel: new Ext.grid.RowSelectionModel({
                        
                        singleSelect: true
                    }),
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            header: 'Title',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'Title',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            id: 'Message',
                            header: 'Message',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'Message',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            header: 'CreationDate',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'CreationDate',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            header: 'ChangeDate',    //[email protected]@- Text
                            sortable: true,
                            resizable: true,
    //                        width: 100,
                            dataIndex: 'ChangeDate',
                            editor: {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        }
                    ]
                });
    
    
    
                //===== Define panel
                Ext.apply (cfg, {
    
                    frame: true,
                    layout: 'vbox',
                    layoutConfig:{
                        
                        align: 'stretch'
                    },
                    items: [
                                this.gridPanelMessages
                            ]
                }, {});
    
                messages.superclass.constructor.call (this, cfg);
            }
    
            Ext.extend (messages, Ext.Panel, {});
    
            //===== Instantiate the panel
            var m = new messages({});
    
    
            //===== The card panel containing the switchable panels (at moment only one)
            preferencespanel = new Ext.Panel ({
                
                region: 'center',
                html: 'center',
                layout: 'card',
                title: 'Center',
                border: true,
                items: [
                        m
                ]
            });
    
    
            //===== The window with the main layout
            var win = new Ext.Window({
    
                layout: 'border',
                title: 'Messages',
                renderTo: Ext.getBody(),
                width: 600,
                height: 800,
                items: [
                        {
                            title: 'West',
                            region: 'west',
                            split: true,
                            collapsible: true,
                            width: 200,
                            items:[
                                   new Ext.Button({
    
                                       text: 'Click me',
                                       handler: function() {
    
                                               preferencespanel.getLayout().setActiveItem(m.id);
                                               preferencespanel.doLayout();
                                           }
                                   })
                            ]
                        },
                        preferencespanel
                ]
            });
            win.show();
        });
    
    
        </script>
        
    </head>
    
    <body>
    
    </body>
    </html>
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

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

    Default

    Why are you wrapping the GridPanel inside a box layout Panel???? Why? And then you wrap THAT inside a card layout Panel. Why?

    That whole heap of code looks random.

    If you want a grid in a window:

    Code:
    new Ext.Window({
        (your configs here..),
        layout: 'fit',
        items: YOUR GRIDPANEL
    });
    Done wrap and wrap and wrap and wrap and wrap...

  7. #7
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291

    Default

    This is just a minified example.

    In real life it's a window for setting preferences.
    Therefore I use a border layout where you can choose
    a category in the western region and the regarding panel
    is shown in the center region.

    I couldn't find a better way ...
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291

    Default

    ... And the grid panel has a box layout because usually there is a form, too.

    I just want to show the problem in a reduced example!
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

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

    Default

    Which Ext version are you using, because your example displays just fine using Ext 3.2.2.

    ps. I've made some changes to your code:
    Code:
    messages = Ext.extend(Ext.Panel, {
        constructor: function (cfg) {
            //===== Store
            var myData = [
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am'],
                ['Title', 'Message', '9/1 12:00am', '9/1 12:00am']
            ];
            this.store = new Ext.data.ArrayStore({
                storeId: 'EntryStore',
                fields: [
                    {name: 'Title'},
                    {name: 'Message'},
                    {name: 'CreationDate', type: 'date', dateFormat: 'n/j g:ia'},
                    {name: 'ChangeDate', type: 'date', dateFormat: 'n/j g:ia'}
                ],
                data: myData
            });
            //===== Define the grid panel
            var pagingToolbar = new Ext.PagingToolbar({
                store: this.store
            });
            this.gridPanelMessages = new Ext.grid.EditorGridPanel({
                title: 'Messages',
                store: this.store,
                autoExpandColumn: 'Message',
                flex: 1,
                tbar: new Ext.Toolbar({
                    items: [{
                        icon: 'icons/silk/png/application_side_contract.png',
                        tooltip: 'Replies'
                    }]
                }),
                bbar: pagingToolbar,
                selModel: new Ext.grid.RowSelectionModel({
                    singleSelect: true
                }),
                columns: [{
                    xtype: 'gridcolumn',
                    header: 'Title', //[email protected]@- Text
                    sortable: true,
                    resizable: true,
                    // width: 100,
                    dataIndex: 'Title',
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    xtype: 'gridcolumn',
                    id: 'Message',
                    header: 'Message', //[email protected]@- Text
                    sortable: true,
                    resizable: true,
                    // width: 100,
                    dataIndex: 'Message',
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    xtype: 'datecolumn',
                    format: 'n/j g:ia',
                    header: 'CreationDate', //[email protected]@- Text
                    sortable: true,
                    resizable: true,
                    // width: 100,
                    dataIndex: 'CreationDate',
                    editor: {
                        xtype: 'datefield'
                    }
                }, {
                    xtype: 'datecolumn',
                    format: 'n/j g:ia',
                    header: 'ChangeDate', //[email protected]@- Text
                    sortable: true,
                    resizable: true,
                    // width: 100,
                    dataIndex: 'ChangeDate',
                    editor: {
                        xtype: 'datefield'
                    }
                }]
            });
            //===== Define panel
            Ext.apply(cfg, {
                xtype: 'container',
                layout: 'vbox',
                layoutConfig: {
                    align: 'stretch'
                },
                items: [
                    this.gridPanelMessages
                ]
            });
            messages.superclass.constructor.call(this, cfg);
        }
    });
    //===== Instantiate the panel
    var m = new messages({});
    //===== The card panel containing the switchable panels (at moment only one)
    preferencespanel = new Ext.Panel({
        region: 'center',
        html: 'center',
        layout: 'card',
        title: 'Center',
        border: true,
        items: [m]
    });
    //===== The window with the main layout
    var win = new Ext.Window({
        layout: 'border',
        title: 'Messages',
        renderTo: Ext.getBody(),
        width: 600,
        height: 800,
        items: [{
            title: 'West',
            region: 'west',
            split: true,
            collapsible: true,
            width: 200,
            items: [
            new Ext.Button({
                text: 'Click me',
                handler: function () {
                    preferencespanel.getLayout().setActiveItem(m.id);
                    preferencespanel.doLayout();
                }
            })]
        }, preferencespanel]
    });
    win.show();

  10. #10
    Sencha User
    Join Date
    Dec 2008
    Location
    Munich (Bavaria/Germany)
    Posts
    291

    Default

    Hi Condor,

    many thanks for improving my example, it helps!

    As I can see the fix for my problem is to extend Ext.Component instead of Ext.Panel,
    can you explain it (just a bit)?

    I am using 3.2.1. I have a commercial license but no access to SVN ... :/

    Many thanks!
    d1
    Checkout Apollo, an ExtJS4-based Apache Cassandra client: http://www.codefreun.de/en/apollo-en

Page 1 of 2 12 LastLast

Similar Threads

  1. vbox doesn't show components; fit does
    By doom777 in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 11 Aug 2009, 12:59 PM
  2. [2.1][CLOSED] Height doesn't fit when TabPanel used
    By krzak in forum Ext 2.x: Bugs
    Replies: 13
    Last Post: 16 Jul 2008, 1:16 AM

Posting Permissions

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