Ext Js 4 MVC將偵聽器添加到網格面板中的圖像

我想在網格面板中顯示圖像，並在用戶單擊圖像時觸發單擊事件。我沒有顯示圖像的問題。我有的問題是我不知道如何將偵聽器添加到圖像。任何幫助將不勝感激？真的不確定接下來要做什麼。謝謝。Ext Js 4 MVC將偵聽器添加到網格面板中的圖像

Ext.define('MyApp.view.people.List' ,{ 
extend: 'Ext.grid.Panel', 
alias: 'widget.myList', 
requires: [ 
    'MyApp.util.Globals', 
    'MyApp.util.ImageTmpl' 
], 

id: 'myGrid', 

title: 'All People', 

initComponent: function() { 

    var imagesUrl =/'+MyApp.util.Globals.projectName+'/'+MyApp.util.Globals.imageFolder; 


    this.store = { 
     fields: ['name', 'email'], 
     data : [ 
      {name: 'Ed', email: '[email protected]', myVal: 1}, 
      {name: 'Tommy', email: '[email protected]',myVal: 2} 
     ] 
    }; 

    this.columns = [ 
     {header: 'Name', dataIndex: 'name', flex: 1}, 
     {header: 'Email', dataIndex: 'email', flex: 1}, 
     {header: '', dataIndex: 'myVal', 
      renderer: function() { 
       return Ext.String.format('<img src="'+imagesUrl+'/edit.png" />'); 
      } 
     }, 
     {header: '', dataIndex: 'myVal', 
      renderer: function() { 
       return '<img src="'+imagesUrl+'/book.png" alt="Lesson Study"/>'; 
      } 
     }, 
     {header: '', dataIndex: 'myVal', 
      renderer: function(){ 

       var imageTmpl = Ext.create('MyApp.util.ImageTmpl'); 

       console.log(imageTmpl); 

       return imageTmpl; 
      } 
     } 
    ]; 

    this.callParent(arguments); 
}

}）;

來源

2013-01-16 Trevor

如果你想點擊圖片，你必須給它和ID和掛鉤。它不完全是作爲組件控制器'control'方法鉤子的MVC，而不是html元素。或者，您可以在網格中單擊單元格單擊事件，但不確定這是您之後的內容？ – Izhaki

我想單擊圖像並讓圖像執行一些功能。例如：點擊刪除圖像並運行寧靜刪除點擊編輯並彈出編輯窗體窗口。 – Trevor

更改列DEFS爲此格式，做細胞上的點擊，我認爲這會爲你的工作情況：

{ 
    header: '', dataIndex: 'myVal', 
    renderer: function() { 
     return Ext.String.format('<img src="'+imagesUrl+'/edit.png" />'); 
    }, 
    listeners: { 
     click: function(){ 
      //action of the image here 
     } 
    } 
}

來源

2013-01-16 15:32:41 Reimius

謝謝Reimius。這工作。它爲整個列增加了一個監聽器，但這對我的需求是很好的。我想這個解決方案不會工作，如果你需要在同一列中的多個圖像的點擊功能。 – Trevor

有辦法讓它依賴列中的行和圖像，但我不會了解如何做，因爲它稍微複雜一些。如果您需要，請提出另一個問題，我會與您一起解決。 – Reimius

我沒有測試此代碼，總線的東西沿着這些路線應該工作：

Ext.define('app.controller.myController', { 
    extend: 'Ext.app.Controller', 

    init: function() { 
     this.control({ 
      'people.List': { 
       afterrender: function(aCmp){ 
        var me = this; 
        var iImages = aCmp.getEl().select('img'); 

        iImages.on('click', function(aEvent, aElement){ 
         me.onImageClick(aElement); 
        }); 

       } 
      } 
     }); 
    }, 

    onImageClick: function(aElement) { 
     console.log('Image Clicked'); 
    } 
});

來源

2013-01-16 15:37:48 Izhaki

感謝Izhaki爲您的迴應，但是當我嘗試此操作時無法使用。 btw你的代碼接近應該是： iImages.on（'click'，function（aEvent，aElement）{ me.onImageClick（aElement）; }）; }） – Trevor

Ext Js 4 MVC將偵聽器添加到網格面板中的圖像

回答

相關問題