Extjs 尝试使用dom选择器捕捉控制器中的单击

我的问题很复杂，所以如果你有问题，请不要犹豫，我会更具体一些

我想通过我的控制器捕捉事件

我有一个只包含一个模板的简单视图。这个模板包含很多链接

以下是我的观点代码：

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组件的

Ext.ComponentQuery

使用。您正在使用dom选择器来尝试选择无法工作的实际HTML元素

---

如果您想要监听这些元素上的点击，您必须使用不同的方法来获取对它们的引用。例如，您可以在“afterrender”侦听器中使用

panel.el.select（'span a'）

获取对所有链接的引用，并将单击侦听器附加到每个链接元素。

我尝试了您的想法，但我想我没有完全理解它

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')
            },
        },
    });
}