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

    Editing Grid in TabPanel


    The editor will not disappear when tab changes.
    QQ截图20120603213937.jpgQQ截图20120603213759.jpg
    The Gird's hide behavior execute, but the cellediting's completeEdit method is not invoked

    test with IE8 and Extjs 4.1.0gpl

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    Vote Rating
    443
    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


    Please try this using 4.1.1RC2 to see if the problem is corrected.
    Does this only happen in IE8?

    Scott.

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

      0  

    Default


    I have a testcase for this and cannot repro in Chrome or IE7,8.

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

      0  

    Default


    Drop this into examples/grid as an HTML file

    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>

Thread Participants: 2