Results 1 to 5 of 5

Thread: [] Grid row editor z-index/visibility issue

    This issue duplicates another issue.
  1. #1
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Vote Rating

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


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

    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):

    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:

        // Define our data model
        Ext.define('Employee', {
            extend: '',
            fields: [
                { 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();
                        start : eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)),
                        name : name,
                        email: name.toLowerCase().replace(' ', '.') + '',
                        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('', {
            // 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() {
                    // Create a model instance
                    var r = Ext.create('Employee', {
                        name: 'New Guy',
                        email: '',
                        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();
                    if (store.getCount() > 0) {
                disabled: true
            plugins: [rowEditing],
            listeners: {
                'selectionchange': function(view, records) {
    <<insert working code to reproduce the report >>


    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 Attached Images

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Boise, ID
    Vote Rating


    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.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Vote Rating


    I have the same issue with, 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
    Vote Rating


    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 User slemmon's Avatar
    Join Date
    Mar 2009
    Boise, ID
    Vote Rating


    I'm linking this report to:

    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).

Posting Permissions

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