Hybrid View

    This issue duplicates another issue.
  1. #1
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    mono blaine will become famous soon enough

      0  

    Default [4.2.1.744] Grid row editor z-index/visibility issue

    [4.2.1.744] Grid row editor z-index/visibility issue


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.2.1.744
    Browser versions tested against:
    • Chrome 26.0.1410.64
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:

    While using a grid with a bottom toolbar, the row editor gets displayed behind the toolbar when you try to activate the editor for the last record of the grid. (assume that the grid height is fixed, and there are enough records making the grid view overflowed.)

    Steps to reproduce the problem:

    Just use the row editing example (with a little modification):
    http://docs.sencha.com/extjs/4.2.0/#...w-editing.html

    Make sure you change "tbar" to "bbar" in the following file: "ext\examples\grid\row-editing.js"

    The result that was expected:

    A visible row editor.

    The result that occurs instead:

    The fact that I hate this bug template.

    Test Case:

    The modified row editor example source:

    Code:
        Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*',
        'Ext.form.*'
    ]);
    
    Ext.onReady(function(){
        // Define our data model
        Ext.define('Employee', {
            extend: 'Ext.data.Model',
            fields: [
                'name',
                'email',
                { name: 'start', type: 'date', dateFormat: 'n/j/Y' },
                { name: 'salary', type: 'float' },
                { name: 'active', type: 'bool' }
            ]
        });
    
        // Generate mock employee data
        var data = (function() {
            var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],
                firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],
                lastLen = lasts.length,
                firstLen = firsts.length,
                usedNames = {},
                data = [],
                s = new Date(2007, 0, 1),
                eDate = Ext.Date,
                now = new Date(),
                getRandomInt = Ext.Number.randomInt,
    
                generateName = function() {
                    var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];
                    if (usedNames[name]) {
                        return generateName();
                    }
                    usedNames[name] = true;
                    return name;
                };
    
            while (s.getTime() < now.getTime()) {
                var ecount = getRandomInt(0, 3);
                for (var i = 0; i < ecount; i++) {
                    var name = generateName();
                    data.push({
                        start : eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
                        name : name,
                        email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com',
                        active: getRandomInt(0, 1),
                        salary: Math.floor(getRandomInt(35000, 85000) / 1000) * 1000
                    });
                }
                s = eDate.add(s, eDate.MONTH, 1);
            }
    
            return data;
        })();
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            // destroy the store if the grid is destroyed
            autoDestroy: true,
            model: 'Employee',
            proxy: {
                type: 'memory'
            },
            data: data,
            sorters: [{
                property: 'start',
                direction: 'ASC'
            }]
        });
    
        var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false
        });
    
        // create the grid and specify what field you want
        // to use for the editor at each column.
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: false
                }
            }, {
                header: 'Email',
                dataIndex: 'email',
                width: 160,
                editor: {
                    allowBlank: false,
                    vtype: 'email'
                }
            }, {
                xtype: 'datecolumn',
                header: 'Start Date',
                dataIndex: 'start',
                width: 105,
                editor: {
                    xtype: 'datefield',
                    allowBlank: false,
                    format: 'm/d/Y',
                    minValue: '01/01/2006',
                    minText: 'Cannot have a start date before the company existed!',
                    maxValue: Ext.Date.format(new Date(), 'm/d/Y')
                }
            }, {
                xtype: 'numbercolumn',
                header: 'Salary',
                dataIndex: 'salary',
                format: '$0,0',
                width: 90,
                editor: {
                    xtype: 'numberfield',
                    allowBlank: false,
                    minValue: 1,
                    maxValue: 150000
                }
            }, {
                xtype: 'checkcolumn',
                header: 'Active?',
                dataIndex: 'active',
                width: 60,
                editor: {
                    xtype: 'checkbox',
                    cls: 'x-grid-checkheader-editor'
                }
            }],
            renderTo: 'editor-grid',
            width: 600,
            height: 400,
            title: 'Employee Salaries',
            frame: true,
            bbar: [{
                text: 'Add Employee',
                iconCls: 'employee-add',
                handler : function() {
                    rowEditing.cancelEdit();
    
                    // Create a model instance
                    var r = Ext.create('Employee', {
                        name: 'New Guy',
                        email: 'new@sencha-test.com',
                        start: Ext.Date.clearTime(new Date()),
                        salary: 50000,
                        active: true
                    });
    
                    store.insert(0, r);
                    rowEditing.startEdit(0, 0);
                }
            }, {
                itemId: 'removeEmployee',
                text: 'Remove Employee',
                iconCls: 'employee-remove',
                handler: function() {
                    var sm = grid.getSelectionModel();
                    rowEditing.cancelEdit();
                    store.remove(sm.getSelection());
                    if (store.getCount() > 0) {
                        sm.select(0);
                    }
                },
                disabled: true
            }],
            plugins: [rowEditing],
            listeners: {
                'selectionchange': function(view, records) {
                    grid.down('#removeEmployee').setDisabled(!records.length);
                }
            }
        });
    });
    <<insert working code to reproduce the report >>


    HELPFUL INFORMATION


    Screenshot or Video:
    • attached
    See this URL for live test case: http://


    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • ________
    • WinXP Pro
    Attached Images

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Looks like this has been fixed in 4.2.1 GA (just released yesterday) - will position the update / cancel buttons above / below as space permits.

    And THANK YOU for taking the time to fill out the bug report template - it really speeds up the process of validating the issues being reported. I happen to agree with you that the bug template is not ideal. We're talking internally about how to make the process easier for the community to communicate issues to us.


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    11
    Vote Rating
    0
    Robert_SK is on a distinguished road

      0  

    Default


    I have the same issue with 4.2.1.883, which I have just downloaded. The buttons are hidden under the grid header. When the grid is empty, I cannot just start adding items, because there is no way to save the first row. My app is useless. I cannot go back to 4.1.1, because there were many other bugs. For example it did not work in FF.

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Posts
    11
    Vote Rating
    0
    Robert_SK is on a distinguished road

      0  

    Default


    I have just tried various browsers. The issue is present only with Internet Explorer. If I open the app in Google Chrome or FF on Linux (FF on Win does not work - too much recursion), the buttons are displayed below the row.

    Extjs 4.1.1 worked quite well with IE. 4.2.1 seems to have quite a few issues with IE. The only browser I can really use now is Google Chrome (or some other webkit based browser).

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I'm linking this report to:
    http://www.sencha.com/forum/showthread.php?266323

    You might have a look to see if the user provided workaround is of benefit to you (I've not had a chance to test it just yet).


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

Thread Participants: 2