分機編輯器位置問題

Question

當文本來到位置變化時，我正在使用內聯編輯樹節點值的編輯器？以下是我爲測試此場景所做的代碼。

var store = Ext.create('Ext.data.TreeStore', { 
       root: { 
        expanded: true, 
        children: [ 
         { text: "ong label for testing long options test field.50", leaf: true }, 
         { text: "long label for testing long options test field.50 long label for testing log option test field. 100", leaf: true }, 
         { text: "option4", leaf: true } 
        ] 
       } 
      }); 

      Ext.create('Ext.tree.Panel', { 
       title: 'Simple Tree', 
       width: 300, 
       height: 250, 
       store: store, 
       rootVisible: false, 
       defaultRootId: 0, 
       renderTo: Ext.getBody(), 
       listeners: { 
        itemdblclick: function (View, record, item, index, e, eOpts) { 
         var editor = new Ext.Editor({ 
          ignoreNoChange: true, 
          revertInvalid: true, 
          width: 235, 
          shadow: false, 
          //offsets: [-150, 0], 
          hideEl: false, 
          field: { 
           xtype: 'textfield', 
           maxLength: 500, 
           enforceMaxLength: true, 
           allowBlank: false 
          } 
         }); 

         editor.startEdit(item, record.get('text')); 

         editor.on('complete', function (me, value) { 
          if (value.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ') != "") { 
           record.set('text', value); 
          } 
         }, item, { single: true }); 
        } 
       } 

      }); 

我使用Extjs4.1版本

Answer 1

首先，你應該改變編輯alingment到tl（左上角）。它應該始終與節點的左側對齊。如果要將編輯器與節點中的文本對齊，則還應調整偏移量。

實施例：

itemdblclick: function (View, record, item, index, e, eOpts) { 
    var item = Ext.get(item); 
    var images = item.down('td').query('.x-tree-elbow, .x-tree-elbow-empty, .x-tree-elbow-end, .x-tree-elbow-line'); 
    var x = 0; 

    for (var i = 0, ilen = images.length; i < ilen; ++i) { 
     x += Ext.get(images[i]).getWidth(); 
    } 

    var editor = new Ext.Editor({ 
     alignment: 'tl', 
     ignoreNoChange: true, 
     revertInvalid: true, 
     width: 235 - x, 
     shadow: false, 
     offsets: [x, 0], 
     hideEl: false, 
     field: { 
      xtype: 'textfield', 
      maxLength: 500, 
      enforceMaxLength: true, 
      allowBlank: false 
     } 
    }); 

    editor.startEdit(item, record.get('text')); 

    editor.on('complete', function (me, value) { 
     if (value.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ') != "") { 
      record.set('text', value); 
     } 
    }, item, { single: true }); 
}