1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    13
    Vote Rating
    0
    swalker@pintnight.com is on a distinguished road

      0  

    Default Unanswered: Ext.grid.Panel - Resize/Size and Scroll Bar

    Unanswered: Ext.grid.Panel - Resize/Size and Scroll Bar


    I've been struggling to understand initial size, resizing and the scroll bar based on height. What I'm trying to do is that I want my grid to fill in the space in the browser window with what ever the size is width and height. The initial size seems to be okay. When resizing the browser, the grid does not automatically resize, it says at the original size.

    And then there is the scrollbar, I want the scroll to become visible if the amount of data has exceeded the height. The only way that I could do that is by specify 'height: 1000' (you will see below in my code). But, I cannot make assumption on the height since everybody will have a different height for their browser.

    My Code:

    Code:
    /*
     * File: app/view/Contacts.js
     *
     */
    
    var searching = {
        ftype: 'searching',
        minChars: 2,
        mode: 'local'
    };
    
    Ext.define('Contacts.view.Contacts', {
        extend: 'Ext.grid.Panel',
    
        renderTo: 'maincontentarea-body',
        id: 'contacts-container',
    
        title: 'Contacts',
        store: 'Contacts.store.Contacts',
    
        border: false,
    
        stateful: true,
        stateId: 'stateGrid',
    
        layout: {
            type: 'fit'
        },
    
        // Need this to get the scroll bar to display, but we don't want the height,
        // we want the height to fill in automatically
        height: 1000,
    
        resizable: true,
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'firstname',
                        flex: 1,
                        text: 'First Name',
                        sortable: true
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'lastname',
                        flex: 1,
                        text: 'Last Name',
                        sortable: true
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'company',
                        flex: 1,
                        text: 'Company',
                        sortable: true
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'email',
                        flex: 1,
                        text: 'Email',
                        sortable: true
                    }
                ],
                listeners: {
                    afterrender:function() {
                        console.log( 'afterrender ' +this.getHeight())
                    },
                    boxready:function() {
                        console.log( 'boxready ' +this.getHeight())
                    },
                    resize:function() {
                        console.log( 'resize ' +this.getHeight())
                    }
                },
                viewConfig: {
                    trackOver: false,
                    listeners: {
                        itemdblclick: {
                            fn: me.onGridviewItemDblClick,
                            scope: me
                        }
                    }
                },
                /*
                plugins: [
                    new Ext.ux.grid.Search({
                        iconCls: 'icon-zoom',
                        readonlyIndexes: ['note'],
                        disableIndexes: ['pctChange'],
                        minChars: 2,
                        autoFocus: true
                        //menuStyle: 'radio'
                    }), this.rowActions
                ],
                */
                initTopToolbar: function(){
                    return Ext.create('Ext.ux.toolbar.GridSearching', {
                        grid            : this,
                        menuPosition    : 'right',
                        menuIconCls        : 'icon-config',
                        inputWidth        : 200,
                        showSelectAll    : false,
                        menuText        : null,
                        menuTip            : 'mooSearch Menu Tip',
                        inputTip        : 'mooSearch Input Tip',
                        disableIndexes    : ['trad_strumento','trad_metodo'],
                        items            : ['->', this.getAddButton()]
                        });
                },
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                text: 'New'
                            },
                            {
                                xtype: 'button',
                                text: 'Edit'
                            },
                            {
                                xtype: 'button',
                                text: 'Delete'
                            }
                        ]
                    },
                    {
                        xtype: 'pagingtoolbar',
                        dock: 'top',
                        autoShow: true,
                        displayInfo: true,
                        store: 'Contacts.store.Contacts',
                        displayMsg: 'Displaying contacts {0} - {1} of {2}',
                        emptyMsg: "No contacts",
                        /*
                        items: [
                            '-',
                            {
                                text: 'Search',
                                pressed: false,
                                enableToggle: true,
                                toggleHandler: function(btn, pressed) {
                                    console.log('...contact search toggleHandler');
                                }
                            }
                        ]
                        */
                    }
                ]
            });
    
            Ext.QuickTips.init();
    
            me.callParent(arguments);
        },
    
        onGridviewItemDblClick: function(dataview, record, item, index, e, options) {
            console.log('...onGridviewItemDblClick: internalId: ' + record.internalId);
    
            var contactForm = new Ext.form.Panel({
                title: 'Contact Detail',
                id: 'contactFormPanel',
                width:425,
                frame:true,
                items: [
                    new Ext.form.TextField({
                        id:"firstname",
                        name: "firstname",
                        fieldLabel: 'First Name',
                        anchor: '100%',
                        //width:275,
                        allowBlank:false,
                        readOnly: false,
                        listeners: {
                            afterrender: function(field) {
                                field.focus(false, 250);
                            }
                        }
                    }),
                    new Ext.form.TextField({
                        id:"lastname",
                        name: "lastname",
                        fieldLabel: 'Last Name',
                        anchor: '100%',
                        allowBlank:false,
                        readOnly: false
                    }),
                    new Ext.form.TextField({
                        id:"company",
                        name: "company",
                        fieldLabel: 'Company',
                        anchor: '100%',
                        allowBlank:false,
                        readOnly: false
                    }),
                    new Ext.form.TextField({
                        id:"email",
                        name: "email",
                        fieldLabel: 'Email',
                        anchor: '100%',
                        allowBlank:false,
                        readOnly: false
                    })
                ],
                listeners: {
                    afterRender: function(form, options) {
                        this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                            //enter: handleContactEnterKey,
                            //scope: this
                        });
                    }
                },
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    layout: {
                        pack: 'end',
                        type: 'hbox'
                    },
                    items: [
                    {
                        xtype: 'button',
                        id: 'cancelFormButton',
                        text: 'Cancel',
                        listeners: {
                            click: {
                                fn: function(){
                                    contactPopup.close();
                                }
                            }
                        }
                    },
                    {
                        xtype: 'button',
                        id: 'contactFormButton',
                        text: 'Save',
                        listeners: {
                            click: {
                                fn: function(){
                                    //handleLogin();
                                    contactPopup.close();
                                }
                            }
                        }
                    }
                    ]
                }]
            });
    
            var contactPopup = null;
    
            //create the popup menu on the first click and reuse on subsequent clicks
            if (!contactPopup) {
                contactPopup = new Ext.Window({
                    id: "contactDetailWindow",
                    layout: "fit",
                    draggable: false, //don't allow the window to be drag around the screen
                    resizable: false, //don't allow the window to be resize
                    closeable: true,
                    header: false,
                    border: false,
                    plain: true,
                    modal: true,
                    shadow: true,
                    width: 350,
                    constrain: true,
                    items: contactForm
                });
            }
    
            if (contactPopup.isVisible()) {
                contactPopup.hide();
            }
            else {
                contactPopup.show();
            }
        }
    });

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Generally sizes are calculated outside-in. This means that the outermost container has its size determined first (usually a fixed size) and then it sizes its children accordingly. The alternative (only available since 4.1) is to shrink-wrap children. In that scenario the child size is known and the parent container wraps around the child to determine its own size. The width and height don't have to use the same strategy, one could come from the container and the other from the child.

    You talk about making the grid fill the browser window but that isn't what you've got in your code. You have a grid inside an Ext window with a fit layout. The window isn't actually required, you could just float the grid, but it probably makes things easier doing it the way you have.

    In your case you need to make the Ext window fit the size of the browser window - the size of the grid will then be determined by the layout. That should just need the maximized config:

    http://docs.sencha.com/ext-js/4-1/#!...-cfg-maximized

Thread Participants: 1