Ext.grid.Panel column menu rendering out of place

[Kevin Krouse]

Hi,

I've been working on Ext 4 integration for our platform and did one of our latest grid view's using an Ext.grid.Panel from Ext 4.

My question is related to the drop-down from a column header that allows for choosing sort and available columns. It is rendering properly in the X direction, however, it seems to always be set with an initial value of top: 0; thus causing it to render at the top of the page. See attached screen cap.

I've been looking for a while and I can't quite figure out how this property is getting set by the layout. Any ideas on how I can figure out where the calculation is going awry?

    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*'
    ]);


    function init() {


        Ext.QuickTips.init();


        Ext.define('employee', {
            extend : 'Ext.data.Model',
            fields : [
                {name: 'eid',       type: 'string'},
                {name: 'firstName', type: 'string'},
                {name: 'lastName',  type: 'string'},
                {name: 'age',       type: 'int'},
                {name: 'eyeColor',  type: 'string'}
            ]
        });


        var data = {
            employees : [
                {
                    eid       : '1238-2318-1238-1777',
                    firstName : 'Nick',
                    lastName  : 'Arnold',
                    age       : 25,
                    eyeColor  : 'Green'
                },{
                    eid       : '2382-2390-2312-7866',
                    firstName : 'Steve',
                    lastName  : 'Buscemi',
                    age       : 53,
                    eyeColor  : 'Brown'
                }
            ]
        };


        var store = Ext.create('Ext.data.ArrayStore', {
            storeId : 'employeeStore',
            model   : 'employee',
            autoLoad: true,
            data    : data,
            proxy   : {
                type: 'memory',
                reader : {
                    type : 'json',
                    root : 'employees'
                }
            }
        });


        Ext.create('Ext.grid.Panel', {
            title   : 'Ext 4 Grid',
            store   : store, //Ext.data.StoreManager.lookup('employeeStore'),
            columns : [
                {
                    header    : 'Name',
                    dataIndex : 'firstName'
                },{
                    header    : 'Eyes',
                    dataIndex : 'eyeColor'
                },{
                    header    : 'Age',
                    dataIndex : 'age'
                }
            ],
            height  : 200,
            width   : 400,
            viewConfig : {
                stripRows : true
            },
            renderTo: 'grid-ext4-test-div'
        });
    }
    Ext.onReady(init);

I'm seeing this in all browsers.

Thanks!

[Animal]

Can you give us an actual page in which this happens, rather than just the grid code? Because it must be an "environmental" thing that's causing it.

[Kevin Krouse]

Thanks for getting back to me.

I seemed to have found the issue that was related to this here. Looks like it has been fixed in Ext 4.0.5.