1

XTemplateから生成されたさまざまな要素にリスナーを追加するのに問題があります。

  var data = {
    users: [
        { id: 1, name: 'Ed Spencer' },
        { id: 2, name: 'Abe Elias'}
    ]
};

var store = new Ext.data.JsonStore({       
    autoLoad: true,
    data : data,
    root: 'users',
    fields: [
        {name: 'id',    type: 'int'},
        {name: 'name',  type: 'string'}
    ]
});


var template = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="holder">',
            '<div class="notclicked">foobar</div>',
            '<div class="name">{name}</div>',
            '<div class="id">{id}</div>',
        '</div>',
    '</tpl>'
);



var newPanel = new Ext.Panel({

    title: "test",
    items: new Ext.DataView({
        store: store,
        tpl: template,
        itemSelector: 'div.holder',
        emptyText: 'No foo to display'
    })
});

newPanel.render('targetDiv');

私がやりたいのは、「name」divのクリック用に「click」リスナーを作成し、「id」div用に別のリスナーを作成することです。しかし、これまでのところ、who「holder」divの「クリック」リスナーしか作成できません。拡張機能として、div'notclicked'...がクリックに応答しないようにします。私はしばらくこれに反対してきました。誰かが私に正しい方向へのプッシュを与えることができますか？

3.4を使用しています。私はjsfiddleにフィドルを置きました：http：//jsfiddle.net/tatagatha/7SfCf/6/

4

1 に答える 1

1

タイトなセレクターで「デリゲート」を使用する

http://www.sencha.com/blog/event-delegation-in-sencha-touch

3.4にはまだイベントの委任がなかったようです。したがって、どのノードがクリックされたかを手動で確認する必要があります。これが、選択が機能しているフィドルです。 http://jsfiddle.net/dbrin/R29U5/

これはdataviewに行きます：

     listeners: {
            click: {
                fn: this.onClick,
                scope: this
            }
        },
        onClick: function(event, item, options) {
            console.log(arguments);
            if (item.className === "id") {
                console.log("Id clicked: " + item.innerHTML);
                alert("ID clicked: " + item.innerHTML);
            }
        }
于 2012-12-15T02:20:06.723 に答える