You found a bug! We've classified it as EXTJS-6316 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    249
    Vote Rating
    0
    neongrau is on a distinguished road

      0  

    Default 4.1 Regression: Grid CellEditing with resizable textarea width is clipped

    4.1 Regression: Grid CellEditing with resizable textarea width is clipped


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

    Code:
        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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,219
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    249
    Vote Rating
    0
    neongrau is on a distinguished road

      0  

    Question


    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?

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,948
    Vote Rating
    636
    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


    You'll need to provide more information.

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

    Code:
    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.
    Attached Images
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,219
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by neongrau View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    249
    Vote Rating
    0
    neongrau is on a distinguished road

      0  

    Default


    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.

    Code:
    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.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,948
    Vote Rating
    636
    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


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    249
    Vote Rating
    0
    neongrau is on a distinguished road

      0  

    Default


    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.

    Code:
    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