Hybrid View

    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
    36,801
    Vote Rating
    834
    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,833
    Vote Rating
    609
    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
    36,801
    Vote Rating
    834
    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,833
    Vote Rating
    609
    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!

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi