Results 1 to 3 of 3

Thread: editable rowbody

  1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    45
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: editable rowbody

    Hi, in my first ExtJs4 project i use a editable grid with the feature rowbody to have a big textfield displayed under each row.
    I want it to be editable on a dblclick. I succeeded in doing so by replacing the innerHTML of the rowbody by a textarea but the special keys don't do what they are supposed to do (move the cursor). If a use the textarea in a normal field i don't have this probem. Same problem in IE7 and FF4
    example.jpgexample2.jpg
    above the normal and edited view,
    under, the relevant code
    Code:
    gridInfo = Ext.create('Ext.ux.LiveSearchGridPanel', {
        id: 'gridInfo',
        height: '100%',
        width: '100%',
        store: storeInfo,
        columnLines: true,
        selType: 'cellmodel',
        columns: [
          {text: "Titel", flex: 1, dataIndex: 'titel', field:{xtype:'textfield'}},
          {text: "Tags", id: "tags", flex: 1, dataIndex: 'tags', field:{xtype:'textfield'}},
          {text: "Hits", dataIndex: 'hits'},
          {text: "Last Updated", renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'}
        ],
        plugins: [
          Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
          })
        ],
        features: [
          {
            ftype: 'rowbody',
            getAdditionalData: function(data, idx, record, orig) {
              var headerCt = this.view.headerCt,
              colspan = headerCt.getColumnCount();
              return {
                rowBody: data.desc, //the big textfieldvalue, can't use a textarea here 8<
                rowBodyCls: this.rowBodyCls,
                rowBodyColspan: colspan
              };
            }
          },
          {ftype: 'rowwrap'}
        ]
      });
    Code:
    me.on('rowbodydblclick', function(gridView, el, event, o) {
    ...
    rb = td.down('.x-grid-rowbody').dom;
    var value = rb.innerText?rb.innerText:rb.textContent;
    rb.innerHTML = '';
    Ext.create('Ext.form.field.TextArea', {
    id: 'textarea1',
    value : value,
    renderTo: rb,
    border: false,
    enterIsSpecial: true,
    enableKeyEvents: true,
    disableKeyFilter: true,
    listeners: {
    'blur': function(el, o) {
    rb.innerHTML = el.value;
    },
    'specialkey': function(field, e){
    console.log(e.keyCode); //captured but nothing happens
    }
    }
    }).show();

    Is there a better way or how can i enable the specialkeys ?
    Any help apreciated.
    Peter

  2. Certain keys, like the arrow keys or spacebar, cause the browser to scroll its scrollbars. An Ext grid wants to use these same keys to navigate itself but it needs to stop the browser responding to them too. It does this by calling preventDefault() on the event.

    As DOM events propagate up the DOM hierarchy, the events fired by the textarea will also be intercepted by the grid and their default behaviour prevented too. In the case of a textarea this doesn't stop scrolling but instead stops editing.

    The way to avoid this is to stop the event propagating up to the element that prevents the default behaviour. Doing this in a specialkey listener almost works but it doesn't catch spacebar. I found adding these listeners to the textarea worked for me:

    Code:
    // IE, Chrome ans Safari
    keydown: function(field, ev){
        ev.stopPropagation();
    },
    // FF and Opera
    keypress: function(field, ev){
        ev.stopPropagation();
    }

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    Certain keys, like the arrow keys or spacebar, cause the browser to scroll its scrollbars. An Ext grid wants to use these same keys to navigate itself but it needs to stop the browser responding to them too. It does this by calling preventDefault() on the event.

    As DOM events propagate up the DOM hierarchy, the events fired by the textarea will also be intercepted by the grid and their default behaviour prevented too. In the case of a textarea this doesn't stop scrolling but instead stops editing.

    The way to avoid this is to stop the event propagating up to the element that prevents the default behaviour. Doing this in a specialkey listener almost works but it doesn't catch spacebar. I found adding these listeners to the textarea worked for me:

    Code:
    // IE, Chrome ans Safari
    keydown: function(field, ev){
        ev.stopPropagation();
    },
    // FF and Opera
    keypress: function(field, ev){
        ev.stopPropagation();
    }

  4. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    45
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks Skirtle, stopPropagation is indeed the way to go, i publish the entire function here for reference, the keyNav approach worked also but return wasn't catched. This function has no problems with space or other special keys.

    Code:
    function editDesc(me, gridView, el, event, o) {
        var width = Ext.fly(el).up('table').getWidth();
        var rb = event.target;
        var value = rb.innerText?rb.innerText:rb.textContent;
        rb.innerHTML = ''
        
        var txt = Ext.create('Ext.form.field.TextArea', {
          value : value,
          renderTo: rb,
          border: false,
          width: width,
          height: 300,
          enterIsSpecial: true,
          disableKeyFilter: true,
          listeners: {
            'blur': function(el, o) {
              var value = el.value.replace('\n','<br>')
              rb.innerHTML = value;
            },
            'specialkey': function(field, e){
              e.stopPropagation();
            }
           }
        });
        
        var txtTextarea = Ext.fly(rb).down('textarea');
        txtTextarea.dom.style.color = 'blue';
        txtTextarea.dom.style.fontSize = '11px';
        //var sm = gridInfo.getSelectionModel();
        //sm.keyNav.setDisabled(true);
        //sm.keyNav.map.enabled = false;
        //sm.keyNav.forceKeyDown = true;
      }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •