0

私の問題は複雑なので、質問があれば躊躇しないでください。

コントローラーを介してイベントをキャッチしたい。

テンプレートのみを含む単純なビューがあります。このテンプレートには多くのリンクが含まれています。

これが私の見解のコードです：

Ext.define('Application.view.suiviItems.suiviMenu', {

extend: 'Ext.panel.Panel',

alias: 'widget.suiviMenu',

id: 'suiviMenu',

layout: {
    type: 'border'
},

bodyCls: 'bodyMenu',

bodyPadding: '10 10 10 10',

title: 'Suivi',

tpl: [
    '<tpl for=".">',
    '    <div class="Main">',
    '        <div class="Gestion">',
    '            <ul>  ',
    '                <li>',
    '                    <span>',
    '                        <a id="pfp" href="#">Valeur du point FP</a><br/>',
    '                        <a href="#">Référentiels</a><br/>',
    '                        <a href="#">Valeur du taux de CAS</a><br/>',
    '                        <b>Paramètrage nationaux, ministériels et référentiels</b>',
    '                    </span>',
    '                </li>  ',
    '                <li>',
    '                    <span>',
    '                        <a href="#">Plafond d\'emploi</a><br/>',
    '                        <a href="#">Plafond de crédit</a><br/>',
    '                        <a href="#">Enveloppes</a><br/>',
    '                        <a href="#">Mode de gestion des mouvements</a><br/>',
    '                        <a href="#">Calcul des ratios</a><br/>',
    '                        <a href="#">Corrections de consommation</a><br/>',
    '                        <a href="#">Provisions pour mouvement</a><br/>',
    '                        <b>Paramètrage des exercices budgétaires</b>',
    '                    </span>',
    '                </li> ',
    '                <li>',
    '                    <span>',
    '                        <a href="#">Liste des mouvements</a><br/>',
    '                        <a href="#">Prévoir un mouvement</a><br/>',
    '                        <a href="#">Import en masse de mouvements</a><br/>',
    '                        <a href="#">Rapprochement des mouvements prévus / constatés</a><br/>',
    '                        <b>Gestion des mouvements</b>',
    '                    </span>',
    '                </li>',
    '                <li>',
    '                    <span>',
    '                        <a href="#">Importer des dossiers de paye</a><br/>',
    '                        <b>Imports</b>',
    '                    </span>',
    '                </li>',
    '            </ul>',
    '        </div>',
    '        <div class="Restitution">',
    '            <ul>  ',
    '                <li>',
    '                    <span>',
    '                        <a href="#">RP-01: Suivi N ETPT</a><br/>',
    '                        <a href="#">RP-03: Liste et impacts des mouvements</a><br/>',
    '                        <a href="#">RP-05: Suivi N</a><br/>',
    '                        <a href="#">RP-08: Suivi N agrégé</a><br/>',
    '                        <a href="#">RP-22: Prévisions, consommations et soldes des dépenses hors PSOP</a><br/>',
    '                        <b>Restitutions</b>',
    '                    </span>',
    '                </li>     ',
    '                                <li>',
    '                    <span>',
    '                        <a href="#">RP-02: Vue agrégée de la dépense constatée</a><br/>',
    '                        <a href="#">RP-07: Vue agrégée de la consommation d\'emplois</a><br/>',
    '                        <a href="#">RP-04: Consommation constatée du plafond d\'emploi par catégorie statutaire</a><br/>',
    '                        <a href="#">RP-06: Consommation constatée du plafond d\'emploi par catégorie d\'emploi</a><br/>',
    '                        <a href="#">RP-13: Suivi de la dépense constatée par imputation budgétaire et par catégorie d\'emploi</a><br/>',
    '                        <a href="#">RP-14: Suivi de la dépense constatée par imputation budgétaire et par catégorie statutaire</a><br/>',
    '                        <a href="#">RP-15: Suivi de la dépense constatée par code élément et par catégorie d\'emploi</a><br/>',
    '                        <a href="#">RP-16: Suivi de la dépense constatée par code élément et par catégorie statutaire</a><br/>',
    '                        <a href="#">RP-20: Ratios</a><br/>',
    '                        <a href="#">RP-21: Données individuelles de paye par catégorie budgétaire</a><br/>',
    '                        <a href="#">RP-23: Coûts moyens</a><br/>',
    '                        <a href="#">RP-24: Restitution individuelle de paye</a><br/>',
    '                        <a href="#">RP-25: Suivi des codes éléments par agent</a><br/>',
    '                        <a href="#">RP-28: Consommations des crédits sous enveloppes</a><br/>',
    '                        <a href="#">RP-38: Consommations des provisions pour mouvements</a><br/>',
    '                        <b>Payes constatées</b>',
    '                    </span>',
    '                </li>',
    '            </ul>',
    '        </div>',
    '    </div>',
    '</tpl>',


],

});

今度は各リンクにイベントをプラグインしたいので、それらをコントローラーに配置すると便利だと思いました。

これが私のコントローラーのコードです：

Ext.define('Application.controller.suivi.suiviMenu', {
/**
 *
 */
extend: 'Ext.app.Controller',

views: [
    'Application.view.suiviItems.suiviMenu'
],

models: [

],

stores: [

],

init: function(){

    this.control({

        'pfp':{
            click: function(){
                console.log("Click 1");
            }
        },

        'span a': {
            click: function(c){
                console.log('Click 2')
            },
        },
    });
}

});

私のイベントがトリガーされない理由を知っていますか? 私が間違った方法でそれを行った場合、誰かが私に親切にして、私がどのようにそれを行うべきかを説明してくれませんか?

ありがとうございました

4

1 に答える 1

1

controlのドキュメントを読むと、それが受け入れるセレクターはExt.ComponentQuery、Ext コンポーネントの選択を伴う使用可能でなければならないことがわかります。dom セレクターを使用して、動作しない実際の HTML 要素を選択しようとしています。

これらの要素のクリックを聞きたい場合は、別の方法を使用してそれらへの参照を取得する必要があります。たとえば、'afterrender' リスナーを使用panel.el.select('span a')して、すべてのリンクへの参照を取得し、クリック リスナーを各リンク要素にアタッチすることができます。

于 2013-04-17T14:50:40.650 に答える