ExtJS 4網格 - 如何粘貼文本在單元格中的光標位置？

我有一個使用單元格編輯插件的網格面板。在這個網格旁邊有一組代表可以插入到單元格中的可用佔位符的鏈接。ExtJS 4網格 - 如何粘貼文本在單元格中的光標位置？

目標：當用戶編輯單元格並單擊其中一個鏈接時，相應的佔位符應插入到用戶光標的位置。

我發現迄今：

當編輯，然後我點擊一個鏈接，在單元格中輸入元素失去焦點和編輯停止。它似乎是輸入元素從dom中刪除。
爲了獲得光標位置，我需要掌握輸入元素（link）。 CellEditing插件有4個事件：beforeedit，cancelit，edit和validateedit。顯示輸入元素時，它們都不會被觸發。
有一個方法Ext.grid.plugin.CellEditingView.startEditByPosition，但我認爲這隻選擇應該編輯的單元格。

請幫忙嗎？

編輯

我卡上實現以下回調。

// var placeholder = 
// ... 
listeners: { 
    itemclick: function(view, link) { 
     console.debug('selected placeholder: ', link.data.placeholder) 
     console.debug(exampleGrid); 
     // Todo: insert placeholder into the grid cell at the cursor position 
    } 
}

編輯2

好感謝@克里斯我得到它的工作。 Here is the code on JsFiddle

的解決方案是使用一個CustomEditor（一選擇器要準確），其覆蓋正常的文本字段：

Ext.define('CustomEditorField', { 
    extend: 'Ext.form.field.Picker', 
    alias: 'widget.customeditorfield', 
    // ... 
    createPicker: function() { 
     var me = this, 
      format = Ext.String.format; 
     return Ext.create('Ext.form.Panel', { 
      // ... 
      items: [ 
       { 
        xtype: 'textfield', 
        name: 'description' 
       }, Ext.create('Ext.view.View', { 
        listeners: { 
         itemclick: function(view, link) { 
          var textToInsert = link.data.placeholder, 
           textInField = me.picker.getForm().getValues()['description'], 
           position = me.picker.getEl().query('input')[0].selectionStart; 

          var changedText = textInField.substring(0, position) + 
               textToInsert + textInField.substring(position); 
          me.picker.getForm().setValues({description: changedText}); 
          return false; 
         } 
        }, 
        store: { 
         fields: ['placeholder', 'text'], 
         data: [ 
          {placeholder: '{param1}', text: 'Parameter 1'}, 
          {placeholder: '{param2}', text: 'Parameter 2'} 
         ] 
        }, 
        itemSelector: 'a', 
        tpl: [ 
         '<tpl for=".">', 
         '<a href="#" data-placeholder="{placeholder}">{text}</a><br />', 
         '</tpl>' 
        ] 
       }) 
      ], 
      listeners: { 
       afterrender: function(panel, opts) { 
        panel.getForm().setValues({description: me.getValue()}); 
       } 
      } 
     }); 
    }

來源

2013-08-02 Adrian Philipp

如果你創建了一個工作視圖的jsfiddle到目前爲止，我敢打賭你會發現有些人會幫助你解決問題。 –

看起來你可以從創建一個自定義單元格編輯器中受益。它會讓你的鏈接列表靠近你編輯的單元格，這樣可以改善外觀，並且避免你在與它們交互之前發現鏈接被隱藏的地方。以下是編輯器的一個示例，該編輯器可創建可用於託管佔位符列表的自定義面板。

http://existdissolve.com/2012/12/extjs-4-custom-editor-for-property-grid/

編輯：

處理您的問題有關itemclick不點火，我建議你調整你的視圖定義，像這樣：

// other view config props, then... 
itemSelector: 'div.item', 
tpl: [ 
    '<tpl for=".">', 
    '<div class="item">{text}</div>', 
    '</tpl>' 
]

來源

2013-08-02 21:11:17

謝謝！我試圖用'Picker'來實現這一點，並覆蓋單元格中的原始TextField。請看這[js fiddle]（http://jsfiddle.net/B5BrE/3/）。現在我在'Ext.view.View'上的'itemclick'監聽器似乎沒有被執行。你能否給我一個正確的方向提示？ –

@adri我編輯了我的答案，包括處理來自網格的itemclick事件的方法。當我這樣調整你的jsfiddle時，這工作。 –

糟糕。我的意思是「處理視圖中的itemclick事件。」 –

ExtJS 4網格 - 如何粘貼文本在單元格中的光標位置？

回答

相關問題