11

eg. <span id="foo">foo</span>ST2アプリ の任意のスパン（）にクリックイベントを割り当てるにはどうすればよいですか？

私がやりたいことのアイデアを説明する簡単な例があります。この例では、文字を書いて、A,B,Cどの文字をクリックしたかをユーザーに伝えたいと思います。

これが画像です：

ここに画像の説明を入力してください

コードスニペット

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {

            layout: {
                type: 'vbox'
            },
            items: [{
                html: '<span id="let_a">A</span>  <span id="let_b">B</span> <span style="float:right" id="let_c">C</span>',
                style: 'background-color: #c9c9c9;font-size: 48px;',
                flex: 1
            }]
        });
        Ext.Viewport.add(view);
    }
});
4

1 に答える 1

22

委任を使用して、特定の要素にリスナーを追加できます。実際には、使用するのはかなり簡単です。

Ext.Viewport.add({
    html: 'test <span class="one">one</span> hmmm <span class="two">two</span>',
    listeners: [
        {
            element: 'element',
            delegate: 'span.one',
            event: 'tap',
            fn: function() {
                console.log('One!');
            }
        },
        {
            element: 'element',
            delegate: 'span.two',
            event: 'tap',
            fn: function() {
                console.log('Two!');
            }
        }
    ]
});

主な部分はとelementですdelegate。

  • elementelementカスタムテンプレートを使用してカスタムコンポーネントを操作している場合を除き、ほとんどすべての場合にの値があります。
  • delegateシンプルなCSSセレクターです。だからそれはspanからspan .test.second

理想的には、ティエムが言ったように、コンポーネントを可能な限り活用する必要があります。彼らはあなたにはるかに多くの柔軟性を与えるでしょう。しかし、私はあなたがこれをする必要がある確かにいくつかのケースがあることを知っています。パフォーマンスへの影響はありません。実際、コンポーネントを使用するよりも高速になります。ただし、彼が提案した方法でリスナーを実装しないでください。それはパフォーマンスが悪く、非常に汚れています（彼が言ったように）。

于 2012-04-24T21:59:05.527 に答える