[4.0.7] Field editors for grid shunted left when RowEditing and CheckboxModel present

**allan.ditzel** · 1 Dec 2011 4:59 PM

REQUIRED INFORMATION

Ext version tested:

Ext 4.0.7

Browser versions tested against:

Chrome 15.0.874.121
FF 8.0.1

DOCTYPE tested against:

<!DOCTYPE html>

Description:

When using a grid panel that has a RowEditing plugin as well as a Checkbox selection model, the editors that appear for in-line editing are shoved all the way to the left and don't respect the width of the columns.

Steps to reproduce the problem:

Create a grid panel
add a RowEditing plugin
add a CheckboxModel selection model
attempt to inline edit a cell with value

The result that was expected:

the inline editing fields that appear should behave exactly as when there is a RowEditing plugin in place without a Checkbox model

The result that occurs instead:

The inline editing fields are too small and aligned all the way to the left of the screen

Test Case:

Code:

 <!DOCTYPE html>

<!-- Auto Generated with Ext Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>gridroweditpluginissue.xds</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all-debug.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>-->
    <!--<script type="text/javascript" src="extjs/ext-all-debug.js"></script>-->


    <script type="text/javascript">
    
    Ext.Loader.setConfig({
    enabled: true
});


Ext.define('MyApp.store.SampleStore', {
    extend: 'Ext.data.Store',


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'SampleStore',
            fields: [
                {
                    name: 'id'
                },
                {
                    name: 'name'
                },
                {
                    name: 'email'
                },
                {
                    name: 'status'
                }
            ],
            data: [
                {
                    "id":0,
                    "name":"Name 1",
                    "email":"email1@test.com",
                    "status":"enabled"
                },
                {
                    "id":1,
                    "name":"Name 2",
                    "email":"email2@test.com",
                    "status":"disabled"
                },
                {
                    "id":2,
                    "name":"Name 3",
                    "email":"email3@test.com",
                    "status":"enabled"
                }
            ]
        }, cfg)]);
    }
});


Ext.define('MyApp.view.ui.MyViewport', {
    extend: 'Ext.container.Viewport',


    layout: {
        type: 'fit'
    },


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    title: 'My Grid Panel',
                    store: 'SampleStore',
                    viewConfig: {


                    },
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            editor: 'textfield',
                            flex: 1,
                            text: 'Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'email',
                            editor: 'textfield',
                            flex: 1,
                            text: 'E-mail'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'status',
                            flex: 1,
                            text: 'Status'
                        }
                    ],
                    plugins: [
                        Ext.create('Ext.grid.plugin.RowEditing', {


                        })
                    ],
                    selModel: Ext.create('Ext.selection.CheckboxModel', {


                    })
                }
            ]
        });


        me.callParent(arguments);
    }
});


Ext.define('MyApp.view.MyViewport', {
    extend: 'MyApp.view.ui.MyViewport',


    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    }
});


Ext.application({
    name: 'MyApp',
    
    stores: [
        'SampleStore'
    ],


    launch: function() {
        Ext.QuickTips.init();


        var cmp1 = Ext.create('MyApp.view.MyViewport', {
            renderTo: Ext.getBody()
        });
        cmp1.show();
    }
});


    
    </script>
</head>
<body></body>
</html>

HELPFUL INFORMATION
Screenshot or Video:

attached

Operating System:

Mac OS X 10.7

**evant** · 1 Dec 2011 5:43 PM

Can confirm, but looks like it's fixed for 4.1, please see below.

**JPfahl** · 28 Feb 2012 1:08 PM

I am having the same problem in:

IE 9
Firefox 9.0.1
Safari 5.1.2
Chrome 17

Please find attached a sample image and source to reproduce the problem.

**user ext** · 28 Feb 2012 8:10 PM

I have a similar problem in ExtJS 4.1 beta 3. See to fix it http://www.sencha.com/forum/showthre...-hidden-column

[4.0.7] Field editors for grid shunted left when RowEditing and CheckboxModel present

Thread Tools

Search Thread

Display

[4.0.7] Field editors for grid shunted left when RowEditing and CheckboxModel present

[4.0.7] Field editors for grid shunted left when RowEditing and CheckboxModel present

Problem in all Browsers

Problem in all Browsers