Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    0
    wangld is on a distinguished road

      0  

    Default Editing Grid in TabPanel has problem when tab change

    Editing Grid in TabPanel has problem when tab change


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.1.0gpl
    • Ext 4.1.1GA

    Browser versions tested against:
    • IE8

    Description:
    • An cellediting Grid in Tabpanel, click the tab, The Eidtor's inputEl does not hide

    Test Case:


    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    
    Ext.onReady(function() {
        Ext.create('Tabpanel', {
            renderTo: Ext.getBody()
        });
    });
    
    
    Ext.define('Tabpanel', {
        extend: 'Ext.tab.Panel',
        
        initComponent: function() {
            this.items = this.buildItems();
            
            this.callParent(arguments);
        },
        
        buildItems: function() {
            return [Ext.create('Grid'), {
                title: 'tab1'
            }, {
                title: 'tab2'
            }, {
                title: 'tab3'
            }, {
                title: 'tab4'
            }];
        }
    });
    
    
    Ext.define('Grid', {
        extend: 'Ext.grid.Panel',
        requires: ['Ext.grid.plugin.CellEditing'],
        title: '节点信息',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        
        initComponent: function(){
            this.columns = this.buildColumns();
            this.store = Ext.create('Ext.data.Store', {
                fields: [
                    {name: 'nodeName', type: 'string'},
                    {name: 'actorName', type: 'string'},
                    {name: 'createDate', type: 'date', dateFormat: 'Y-m-d H:i:s'},
                    {name: 'dueDate', type: 'date', dateFormat: 'Y-m-d H:i:s'},
                    {name: 'timeState', type: 'int'},
                    {name: 'participanceType', type: 'string'},
                    {name: 'message', type: 'string'}
                ],
                proxy: {
                    type: 'ajax',
                    url: 'data/Grid.jsp'
                }
            });
            this.callParent(arguments);
        },
        
        afterRender: function(){
            var me = this;
            me.callParent(arguments);
            
            me.store.load();
        },
        
        buildColumns: function() {
            return [{
                text: '环节名称', 
                dataIndex: 'nodeName',
                editor: 'textfield'
            }, {
                text: '受理人', 
                dataIndex: 'actorName',
                editor: 'textfield'
            }, {
                text: '环节开始时间', 
                xtype: 'datecolumn',
                format: 'Y-m-d H:i',
                width: 120,
                dataIndex: 'createDate',
                editor: 'textfield'
            }, {
                text: '到期时限', 
                xtype: 'datecolumn',
                format: 'Y-m-d H:i',
                dataIndex: 'dueDate',
                editor: 'textfield'
            }, {
                text: '超时状态', 
                dataIndex: 'timeState',
                renderer: function(v){
                    return v === 0 ? '正常' : v === 1 ? '即将超时' :  v === 2 ? '超时' : '';
                },
                editor: 'textfield'
            }, {
                text: '任务类型', 
                dataIndex: 'participanceType',
                renderer: function(v){
                    return v === 'master' ? '主送' : v === 'participator' ? '抄送' :  '';
                },
                editor: 'textfield'
            }, {
                text: '消息', 
                flex: 1,
                dataIndex: 'message',
                editor: 'textfield'
            }];
        }
    });

    HELPFUL INFORMATION

    Screenshot or Video:

    Possible fix:
    • I listen the grid's hide event. When it happening, I call the Editor's completeEdit method. Then it's OK.

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    0
    wangld is on a distinguished road

      0  

    Default


    This is my case
    Test.zip

  3. #3

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You have not initialized your grid when you are trying to create the plugin.
    You can use the following approach to load the plugin:

    Code:
     plugins: [ {ptype: 'cellediting'} ], // from plugin:  alias: 'plugin.cellediting',
    Scott.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Drop this as an HTML file into examples/grid

    It works for me...

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../ux/css/CheckHeader.css" />
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript">
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath('Ext.ux', '../ux');
    Ext.require([
        'Ext.ux.CheckColumn'
    ]);
    Ext.require('*');
    
    Ext.onReady(function() {
        function formatDate(value){
            return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
        }
    
        Ext.define('Plant', {
            extend: 'Ext.data.Model',
            fields: [
                // the 'name' below matches the tag name to read, except 'availDate'
                // which is mapped to the tag 'availability'
                {name: 'common', type: 'string'},
                {name: 'botanical', type: 'string'},
                {name: 'light'},
                {name: 'price', type: 'float'},
                // dates can be automatically converted by specifying dateFormat
                {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
                {name: 'indoor', type: 'bool'}
            ]
        });
    
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            // destroy the store if the grid is destroyed
            autoDestroy: true,
            model: 'Plant',
            proxy: {
                type: 'ajax',
                // load remote data using HTTP
                url: '../../examples/grid/plants.xml',
                // specify a XmlReader (coincides with the XML format of the returned data)
                reader: {
                    type: 'xml',
                    // records will have a 'plant' tag
                    record: 'plant'
                }
            },
            sorters: [{
                property: 'common',
                direction:'ASC'
            }],
            autoLoad: true
        });
    
        var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        });
    
        // create the grid and specify what field you want
        // to use for the editor at each header.
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [{
                id: 'common',
                header: 'Common Name',
                dataIndex: 'common',
                flex: 1,
                editor: {
                    allowBlank: false
                }
            }, {
                header: 'Light',
                dataIndex: 'light',
                width: 130,
                editor: new Ext.form.field.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        ['Shade','Shade'],
                        ['Mostly Shady','Mostly Shady'],
                        ['Sun or Shade','Sun or Shade'],
                        ['Mostly Sunny','Mostly Sunny'],
                        ['Sunny','Sunny']
                    ],
                    lazyRender: true,
                    listClass: 'x-combo-list-small'
                })
            }, {
                header: 'Price',
                dataIndex: 'price',
                width: 70,
                align: 'right',
                renderer: 'usMoney',
                editor: {
                    xtype: 'numberfield',
                    allowBlank: false,
                    minValue: 0,
                    maxValue: 100000
                }
            }, {
                header: 'Available',
                dataIndex: 'availDate',
                width: 95,
                renderer: formatDate,
                editor: {
                    xtype: 'datefield',
                    format: 'm/d/y',
                    minValue: '01/01/06',
                    disabledDays: [0, 6],
                    disabledDaysText: 'Plants are not available on the weekends'
                }
            }, {
                xtype: 'checkcolumn',
                header: 'Indoor?',
                dataIndex: 'indoor',
                width: 55,
                stopSelection: false
            }, {
                xtype: 'actioncolumn',
                width:30,
                sortable: false,
                items: [{
                    icon: '../shared/icons/fam/delete.gif',
                    tooltip: 'Delete Plant',
                    handler: function(grid, rowIndex, colIndex) {
                        store.removeAt(rowIndex); 
                    }
                }]
            }],
            selModel: {
                selType: 'cellmodel'
            },
            title: 'Edit Plants',
            tbar: [{
                text: 'Add Plant',
                handler : function(){
                    // Create a model instance
                    var r = Ext.create('Plant', {
                        common: 'New Plant 1',
                        light: 'Mostly Shady',
                        price: 0,
                        availDate: Ext.Date.clearTime(new Date()),
                        indoor: false
                    });
                    store.insert(0, r);
                    cellEditing.startEditByPosition({row: 0, column: 0});
                }
            }],
            plugins: [cellEditing]
        });
    
        new Ext.tab.Panel({
            style: 'margin:20px',
            height:500, width: 800,
            renderTo: document.body,
            items: [grid, {title: 'other'}]
        });
    });
    </script>
    </head>
    <body>
    </body>
    </html>

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    @wangld
    Please understand the difference between creating the plugin when using define vs create.

    Scott.

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    0
    wangld is on a distinguished road

      0  

    Default


    @Scott
    Thank you for that suggestion,I have tried it,but nothing changes.

    It occurs when the tabpanel changeing it's tabs.

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    0
    wangld is on a distinguished road

      0  

    Default


    @Animal
    Thanks,I had tried your case, and changed nothing. This is the result:
    QQ截图20120603215951.jpg

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What browser and OS? Because with 4.1.1 and that example, I cannot reproduce that on Chrome or IE (The best and the worst browsers out there)

  10. #10
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    0
    wangld is on a distinguished road

      0  

    Default


    @Animal
    OS: Win7, XP
    Browser: IE8