Question

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

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

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

以下是我的观点代码：

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

}）;

你知道为什么我的活动从未被触发过吗？如果我用错误的方式做到了，有人可以对我好心解释我应该怎么做吗？

谢谢

Answer 1

如果您阅读control的文档，您会看到它接受的选择器必须由Ext.ComponentQuery使用，这涉及选择Ext组件。您正在使用dom选择器来尝试选择无效的实际HTML元素。

如果您想听取对这些元素的点击，您将不得不使用其他方法来获取对它们的引用。例如，您可以在'afterrender'监听器中使用panel.el.select('span a')来获取对所有链接的引用，并将单击侦听器附加到每个链接元素。

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

1 个答案: