Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Touch Premium Member
    Join Date
    Nov 2011
    Location
    Bay Area
    Posts
    68
    Vote Rating
    0
    allan.ditzel is on a distinguished road

      0  

    Default [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


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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,055
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Can confirm, but looks like it's fixed for 4.1, please see below.
    Attached Images
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    56
    Vote Rating
    1
    JPfahl is on a distinguished road

      0  

    Default Problem in all Browsers

    Problem in all Browsers


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

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    38
    Vote Rating
    0
    user ext is on a distinguished road

      0  

    Default


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

Thread Participants: 3