Results 1 to 2 of 2

Thread: Buttons (Save and Cancel) are overlapped by grid on rowediting plugin

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium User
    Join Date
    Mar 2016
    Posts
    3

    Default Buttons (Save and Cancel) are overlapped by grid on rowediting plugin

    Hello all,

    I'm creating a editable grid with the rowediting plugin. My code is really simple:


    [EDITED] I've created a fiddle to show the problem: https://fiddle.sencha.com/#view/editor&fiddle/1spe [/EDITED]

    Code:
    Ext.define('MyApp.view.MyGridPanel', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.instanceGrid',
        //{...}
        plugins: {
            ptype: 'rowediting',
            clicksToEdit: 2
        },
    
    
        forceFit: true,
    
    
        listeners: {
            edit: 'onGridEdit',
            beforeedit: 'onBeforeEdit'
        },
    
    
        columns: [
            {
                xtype: 'gridcolumn',
                align: 'left',
                dataIndex: 'columnA',
                text: 'Column A',
                editor: {
                    xtype: 'combo',
                    reference: 'comboColumnA',
                    displayField: 'name',
                    emptyText: '- Select -',
                    valueField: 'name',
                    queryMode: 'local',
                    store: 'columnAStore',
                    listeners: {
                        select: 'onColumnAComboSelected'
                    }
                }
            },
            // {...}
            {
                xtype: 'actioncolumn',
                width: 50,
                align: 'center',
                items: [
                    {
                        iconCls: 'x-fa fa-pencil-square-o',
                        handler: function (grid, rowIndex, colIndex) {
                            grid.editingPlugin.startEdit(rowIndex, 0);
                        }
                    },
                    {
                        iconCls: 'x-fa fa-cog',
                        handler: function (grid, rowIndex, colIndex) {
                            alert('TODO');
                        }
                    }
                ]
            }]
    });
    So far so good, but when I have few lines in the grid, the buttons are overlapped by grid (as shown by the image below).

    editablerow.jpg

    How should I fix it? Anyone has passed through it?

    [EDITED] I've created a fiddle to show the problem: https://fiddle.sencha.com/#view/editor&fiddle/1spe [/EDITED]

    Thanks!

  2. #2
    Sencha Premium User
    Join Date
    Mar 2016
    Posts
    3

    Default A workaround for this issue

    In my UI project the editable grid buttons are in the last column. So, I've created it and shared it in my github: https://github.com/maltempi/extjs-ac...mn-row-editing

    I hope to help someone else with the same issue =)

    PS. I'm new in ExtJS world, and this one was my first plugin. If anyone have suggestions to improve the plugin, let's to talk about =)

    Have a nice day!

    Abraços!

Similar Threads

  1. Replies: 1
    Last Post: 2 Jan 2020, 2:30 AM
  2. Replies: 5
    Last Post: 15 Oct 2013, 8:06 AM
  3. Roweditor plugin without save/cancel buttons
    By northbridge in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 24 Jan 2012, 12:47 PM
  4. Buttons update cancel rowediting
    By Fanny144 in forum Ext:User Extensions and Plugins
    Replies: 3
    Last Post: 8 Jul 2011, 1:19 AM
  5. Replies: 1
    Last Post: 5 May 2011, 7:14 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
  •