Editing Grid in TabPanel has problem when tab change

**wangld** · 7 Jul 2012 1:12 AM

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:

QQ截图20120603220123.jpg

Possible fix:

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

**wangld** · 7 Jul 2012 1:14 AM

This is my case
Test.zip

**wangld** · 7 Jul 2012 1:22 AM

another thread
http://www.sencha.com/forum/showthre...id-in-TabPanel

**scottmartin** · 7 Jul 2012 11:08 AM

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.

**Animal** · 7 Jul 2012 11:55 AM

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>

**scottmartin** · 7 Jul 2012 12:33 PM

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

Scott.

**wangld** · 7 Jul 2012 5:26 PM

@Scott

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

It occurs when the tabpanel changeing it's tabs.

**wangld** · 7 Jul 2012 5:31 PM

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

**Animal** · 8 Jul 2012 12:30 AM

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)

**wangld** · 8 Jul 2012 4:15 AM

@Animal
OS: Win7, XP
Browser: IE8

Editing Grid in TabPanel has problem when tab change

Thread Tools

Search Thread

Display

Editing Grid in TabPanel has problem when tab change

Editing Grid in TabPanel has problem when tab change