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 回答