將點擊事件添加到顯示字段

我想要在我的extjs應用程序中進行內聯編輯：我創建了一個簡單的表單，其中充滿了displayfields，旁邊有一個小圖標表示它們是可編輯的。我希望他們成爲點擊上的實際字段。將點擊事件添加到顯示字段

我見過類似的問題here，但沒有答案。

這是我的形式：

var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24'/>"; 

Ext.define('BM.view.test.Edit', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.test-edit', 

    layout: 'anchor', 
    title: 'Edit Test', 
    defaultType: 'displayfield', 

// handleFieldChanged: function() { 
//  console.log('click el'); 
// }, 
// 
// listeners: { 
//  add: function(me, component, index) { 
////   if(component.isFormField) { 
//    component.on('click', me.handleFieldChanged, me); 
////   } 
//  } 
// }, 

    items: [ 
     {name: 'id', hidden: true}, 
     { 
      name: 'name', 
      fieldLabel: 'Name', 
      afterSubTpl: editPic, 
      cls: 'editable', 
      listeners: [ 
       { 
        element: 'element', 
        delegate: '.editable', 
        event: 'click', 
        fn: function() { 
         console.log('Edit Now!'); 
        } 
       } 
      ] 
     }, 

     {name: 'status', fieldLabel: 'Status'} 
     ] 
});

這是我的控制器內部的控制：

this.control({ 
     'test-edit': { 
      afterrender: this.beenRendered 
     }, 
     'test-edit > displayfield': { 
      click: this.updateTestField 
     } 
    }); 


updateTestField: function(button) { 
    console.log('field clicked'); 
}, 

beenRendered: function() { 
     console.log('Rendered!'); // Getting here 
     var myDiv = Ext.get(".editable"); // Doesn't find anything 
     myDiv.on("click",handleClick); 

    function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject 
     e.preventDefault(); 
     console.log('clicked'); 
    } 

},

據我瞭解，字段不聽單擊事件。我如何製作它們？正如你在上面看到的，我嘗試了很多方法。事後活動效果很好。

也許我應該以某種方式封裝字段與監控點擊事件的容器？

任何線索將不勝感激。

來源

2012-08-23 bldoron

可以使用el屬性：

.. 
beenRendered: function(df) { 
     console.log('Rendered!'); // Getting here 
     var el = df.el; 
     el.on("click",handleClick); 

    function handleClick(e, t){ 
     e.preventDefault(); 
     console.log('clicked'); 
    } 

}

EL是Ext.Element的（包裝器HTML DOM）的W/C，那麼你可以用它來處理事件的實例。

來源

2012-08-23 07:38:07 timidboy

你是天才！我一直想知道如何連接點，這就是訣竅。 10X。 – bldoron

如果您願意，還有一個問題：現在我有了't'的DOM元素，我該如何獲取原始分機字段？相反...我如何發送df來處理Click？ – bldoron

這是傳遞給處理程序的第一個參數。在代碼中，這是'df'變量。 – timidboy

使用getEl()方法定義字段。

df.getEl().on('click', function(){});

來源

2012-08-23 23:35:44 MAP

將點擊事件添加到顯示字段

回答

相關問題