3

私のデータビューの各アイテムには、ボタンを表すテキストと div があります。ボタンは、マウスが項目の上にある場合にのみ表示されます。ボタン div でマウスクリックを処理するにはどうすればよいですか?

私がこれまでに持っているのはこれです：

xtype: 'dataview',

store: Ext.create('Ext.data.Store', {
    model: 'LogEntry',
    data: [
        { text: 'item 1' },
        { text: 'item 2' },
        { text: 'item 3' },
        { text: 'item 4' },
        { text: 'item 5' }
    ]
}),

tpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div class="logentry">',
            '<span>{text}</span>',
            '<div class="removeicon"></div>',
        '</div>',
    '</tpl>'
),

itemSelector: 'div.logentry',
trackOver: true,
overItemCls: 'logentry-hover',

listeners: {
    'itemclick': function(view, record, item, idx, event, opts) {
        // How can i distinguish here if the delete-div has been clicked or some other part of the dataview-entry?
        console.warn('This item respresents the whole row:', item);
    }
}

作業例: http://jsfiddle.net/suamikim/3ZNTA/

問題は、ボタン div またはテキスト スパンがクリックされたかどうかを itemclick-handler で区別できないことです。

ありがとう、よろしく、 ミク

4

1 に答える 1

4

event.target.classNameイベントリスナーで確認してください。これが実際の例です：

http://jsfiddle.net/3ZNTA/1/

コードは次のとおりです。

Ext.onReady(function() {
    Ext.define('LogEntry', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'text',    type: 'string' }
        ]
    });

    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),

        layout: 'fit',

        items: [{
            xtype: 'dataview',

            store: Ext.create('Ext.data.Store', {
                model: 'LogEntry',
                data: [
                    { text: 'item 1' },
                    { text: 'item 2' },
                    { text: 'item 3' },
                    { text: 'item 4' },
                    { text: 'item 5' }
                ]
            }),

            tpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    '<div class="logentry">',
                        '<span>{text}</span>',
                        '<div class="removeicon"></div>',
                    '</div>',
                '</tpl>'
            ),

            itemSelector: 'div.logentry',
            trackOver: true,
            overItemCls: 'logentry-hover',

            listeners: {
                'itemclick': function(view, record, item, idx, event, opts) {

                    if(event.target.className === 'removeicon'){
                        alert('you clicked the x icon');
                    }

                    // How can i distinguish here if the delete-div has been clicked or some other part of the dataview-entry?
                    console.warn('This item respresents the whole row:', item);
                }
            }
        }]
    });
});
于 2012-09-04T15:34:54.920 に答える