2

グリッド パネルに画像を表示し、ユーザーが画像をクリックしたときにクリック イベントを発生させたいと考えています。画像の表示には問題ありません。私が抱えている問題は、リスナーをイメージに追加する方法がわからないことです。どんな助けでも大歓迎ですか？次に何をすべきか本当に不明です。ありがとう。

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: 'ed@sencha.com', myVal: 1},
            {name: 'Tommy', email: 'tommy@sencha.com',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);
}

});

4

2 に答える 2

0

Change your column defs to this format that does a click on the cell, which I think will work for you situation:

{
    header: '', dataIndex: 'myVal',
    renderer: function() {
        return Ext.String.format('<img src="'+imagesUrl+'/edit.png" />');
    },
    listeners: {
        click: function(){
            //action of the image here
        }
    }
}
于 2013-01-16T15:32:41.817 に答える
0

私はこのコードをテストしていません。これらの行に沿ったバスの何かが機能するはずです:

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-16T15:37:48.207 に答える