4.1 Regression: Grid CellEditing with resizable textarea width is clipped

[neongrau]

e.g. modify the cell-editing.js example

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [{
            id: 'common',
            header: 'Common Name',
            dataIndex: 'common',
            flex: 1,
            editor: {
                xtype:'textarea',
                resizable:{ handles:'s', minheight: 50, heightIncrement:20, constrainTo:Ext.getBody() },
                height:200,
                width:250,
                allowBlank: false
            }

When editing starts the Textarea is clipped (worked fine in 4.0.x).
After resizing it is fine.

[mitchellsimoens]

Thanks for the report.

[neongrau]

Since my Support Subscription ran out about 2 weeks ago i don't have access to the last Release (on 4.1.1 atm). Since this still shows [OPEN] i reckon that this bug hasn't been tackled yet?

I still have 40 unused x-credits, can i trade them for fix?

[evant]

You'll need to provide more information.

What do you mean by clipped? When I run the example in 4.1.0

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require(['Ext.selection.CellModel', 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.form.*', 'Ext.ux.CheckColumn']);

if (window.location.search.indexOf('scopecss') !== -1) {
    // We are using ext-all-scoped.css, so all rendered ExtJS Components must have a
    // reset wrapper round them to provide localized CSS resetting.
    Ext.scopeResetCSS = true;
}

Ext.onReady(function() {
    Ext.QuickTips.init();

    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: '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'
        }]
    });

    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: {
                xtype: 'textarea',
                resizable: {
                    handles: 's',
                    minheight: 50,
                    heightIncrement: 20,
                    constrainTo: Ext.getBody()
                },
                height: 200,
                width: 250,
                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'
        },
        renderTo: 'editor-grid',
        width: 600,
        height: 300,
        title: 'Edit Plants?',
        frame: true,
        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]
    });

    // manually trigger the data store load
    store.load({
        // store loading is asynchronous, use a load listener or callback to handle results
        callback: function() {
            Ext.Msg.show({
                title: 'Store Load Callback',
                msg: 'store was loaded, data available for processing',
                modal: false,
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        }
    });
});

I see the attached.

[mitchellsimoens]

Since my Support Subscription ran out about 2 weeks ago i don't have access to the last Release (on 4.1.1 atm). Since this still shows [OPEN] i reckon that this bug hasn't been tackled yet?

I still have 40 unused x-credits, can i trade them for fix?

If your subscription ran out, you don't have 40 x credits anymore.

[neongrau]

this is one of the places that worked fine in 4.0.x then got all weird in 4.1.x.
Notice that i tried experimenting alot with width / flex on the column and width on the editor as well as on the resizable.

Ext.application({
  debug:false,
  name: 'Informer',
  appFolder: '/javascripts/informer',
  requires:['Informer.store.ConnectorTemplates', 'Informer.store.ConnectorGroups', 'Informer.view.portal.ConnectorGroupSelection'],

  textareaResize: { handles:'s', minHeight: 50, heightIncrement:20, constrainTo:Ext.getBody() },

  launch: function() {
    TemplateManager = this;

    var rowEditing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 2, pluginId: 'rowEditing' });

    this.store = Ext.create('Informer.store.ConnectorTemplates', { autoLoad:true, autoSync: false });
    this.view = Ext.create('Ext.container.Viewport', {
      id:'portal-layout',
      cls:'fancy',
      layout: {
        type:'border',
        padding: '10'
      },
      items: [{
        region: 'center',
        xtype:'gridpanel',
        plugins: [rowEditing],
        title: t('templates.manage'),
        store: this.store,
        iconCls: 'icon_portal_edit',
        viewConfig: {
          getRowClass: function(record, index, rowParams, store) {
            if (this.debug) console.log('getRowClass', record, index, rowParams, store);
            var cls = [];
            if (record.get('deactivated')) cls.push('record-disabled');
            return cls.join(' ');
          }
        },
        columns: [
          { header:'GUID', width:150, dataIndex:'id' },
          { header:t('templates.name'), width:150, dataIndex:'name', field:{ xtype:'textfield' } },
          { header:t('templates.template'), flex:3, width:800, dataIndex:'template', renderer: 'htmlEncode', field:{ xtype:'textarea', height:300, width:800, resizable:this.textareaResize } },
          { header:t('templates.config'), flex:1, width:200, dataIndex:'config', field:{ xtype:'textarea', height:100, width:200, resizable:this.textareaResize } },
          { header:t('templates.deactivated'), width:80, dataIndex:'deactivated', align:'center', field:{ xtype:'checkbox', align:'center'} },
          { header:t('templates.actors'), width:50, dataIndex:'actors', field:{ xtype:'textfield' } },
          { header:t('templates.group'), width:120, dataIndex:'group_name', field:{ xtype:'connectorgroupselection' } },
          { header:t('queries.usage'), width:200, xtype:'templatecolumn', tpl:'<ul class="disc"><tpl for="folder_types"><li>{[t("infobase.foldertype")]}: <a href="{url}" target="infobase">{title} <span data-qtip="{[t("infobase.folder_count")]}">({folder_count})</span></a></li></tpl></ul>' }
        ],

        dockedItems: [{
            xtype: 'toolbar',
            items: [{
              text: t('add_new'),
              iconCls: 'icon_add',
              scope:this,
              handler: function(){
                // insert new record
                var template = Ext.create('Informer.model.ConnectorTemplate', {
                  template:'<tpl for=".">\n</tpl>',
                  deactivated:false,
                  config:'{}'
                });
                this.store.insert(0, template);
              }
            }, {
              text: t('save'),
              itemId:'save',
              iconCls: 'icon_save',
              disabled: true,
              scope:this,
              handler: function(){
                this.store.sync();
              }
            }, '-', {
              itemId: 'delete',
              text: t('delete'),
              iconCls: 'icon_delete',
              disabled: true,
              scope:this,
              handler: function(){
                var selection = this.view.query('gridpanel')[0].getView().getSelectionModel().getSelection()[0];
                if (selection) {
                  Ext.MessageBox.confirm(t('templates.destroy'), t('templates.confirm_destroy'), function(answer) {
                    if (answer!='yes') {
                      return;
                    } else {
                      this.store.remove(selection);
                    }
                  }, this);
                }
              }
            }, '->', { text:t('reload'), iconCls:'icon_reload', handler:function() { this.store.load() }, scope:this }
            ]
        }]

      }]
    });
    var grid = this.view.query('gridpanel')[0];
    grid.getSelectionModel().on('selectionchange', function(selModel, selections) {
      grid.down('#delete').setDisabled(selections.length === 0);
    });
    this.store.on('add', function(store, opts) {
      if (this.debug) console.log('this.store add');
      grid.down('#save').setDisabled(false)
    }, this);
    this.store.on('update', function(store, opts) {
      if (this.debug) console.log('this.store update');
      grid.down('#save').setDisabled(false)
    }, this);
    this.store.on('remove', function(store, opts) {
      if (this.debug) console.log('this.store remove');
      grid.down('#save').setDisabled(false)
    }, this);
    this.store.on('write', function(store, opts) {
      if (this.debug) console.log('this.store write');
      grid.down('#save').setDisabled(true)
    }, this);

  }


});

shot1.pngshot2.png

What i actually wanted was an "se" handle.
And the textarea should start at current (flex) column width, with a default height.

The clipping occurs when i remove the "flex" config and just define a width. Which then looks like this:
Bildschirmfoto 2012-11-29 um 11.48.24.png

@mitchellsimoens: well i logged into the support site and it told me i had no subscription anymore but definately showed 40 x-credits.
So maybe your website doesn't work as you expect vOv

Nonetheless my boss resubscribed yesterday so i can travel back in time since the subscription was invoiced yesterday for starting in October so in the aftermath i will have had access and 40 x-credits anyway.

[evant]

Please post a full test case that I can run locally, as I said above, I can't reproduce it. Same if I swap out the flex for a static width.

[neongrau]

finally got around to simplify your testcase for you to see the issue since this came up again

basically all i did was get rid of the UX elements, fixed the URL for a local xml file and put everything in a viewport. just start the editor in the "Common Name" columns and you'll see the effect.

Ext.onReady(function() {
    Ext.QuickTips.init();

    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: '/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'
        }]
    });

    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: {
                xtype: 'textarea',
                resizable: {
                    handles: 's',
                    minheight: 50,
                    heightIncrement: 20,
                    constrainTo: Ext.getBody()
                },
                height: 200,
                width: 250,
                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: 'actioncolumn',
            width: 30,
            sortable: false,
            items: [{
                tooltip: 'Delete Plant',
                handler: function(grid, rowIndex, colIndex) {
                    store.removeAt(rowIndex);
                }
            }]
        }],
        selModel: {
            selType: 'cellmodel'
        },
        title: 'Edit Plants?',
        frame: true,
        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]
    });

    // manually trigger the data store load
    store.load({
        // store loading is asynchronous, use a load listener or callback to handle results
        callback: function() {
        }
    });

    var view = Ext.create('Ext.container.Viewport', {
      items: grid
    });

});

Bildschirmfoto 2013-04-16 um 12.18.27.png