Définir les auditeurs dans le contrôleur de ExtJS

J'ai le tabpanel - c'est le main forme (point de vue).
Dans ce tabpanel j'définir les différents onglets - xtype:'panel'.

Donc, j'ai un main(contrôleur) , main vue et certains onglets de la vue.
L'onglet de la vue sont référencés dans main vue.

Je veux définir auditeur de activate cas d'un enfant panel dans main contrôleur.

Comment puis-je le faire?

la main contrôleur :

Ext.define('KP.controller.account.apartment.Main', {
    extend: 'Ext.app.Controller',

    views: ['account.apartment.Main',
        'account.apartment.Requisites'
    ],

    models: ['account.apartment.Requisites'
    ],
    stores: ['account.apartment.Requisites'
    ],


    init: function () {

    }
});

La main vue:

Ext.define('KP.view.account.apartment.Main', {
    extend: 'Ext.window.Window',
    alias: 'widget.ApartmentData',

    height: 566,
    width: 950,
    activeItem: 0,
    layout: {
        type: 'fit'
    },
    autoShow: false,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {            
            items: [
                {
                    xtype: 'tabpanel',
                    activeTab: 0,
                    deferredRender: true, 

                    items: [                        

                        {
                            xtype: 'RequisitesApartment'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

L'enfant panel RequisitesApartment (point de vue):

Ext.define('KP.view.account.apartment.Requisites', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.RequisitesApartment',


    id: 'panel_accountrequisites',
    height: 350,
    width: 1124,
    autoScroll: true,
    layout: {
        type: 'fit'
    },


    listeners: {
        activate: function () {           
               ....load data....
               ...this listeners I want to push in 'main' controller...            
        }
    },

    initComponent: function () {
        var me = this;

        var grid_store = Ext.create('KP.store.account.apartment.Requisites');

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'gridpanel',
                    height: 260,
                    autoScroll: true,
                    dock: 'bottom',
                    store: grid_store,
                    id: 'r_gridFlatParams',
                    forceFit: true,


                    columns: [
                        ...some columns....
                    ],
                    viewConfig: {
                }
            }
            ]
        });

        me.callParent(arguments);
    }
});

OriginalL'auteur Oleg | 2012-09-21

7

Inscrire directement comme contrôle dans le contrôleur responsable

Voici un exemple avec une requête. Pour sûr que vous avez tout simplement besoin de la requête, mais je pense que c'est un bon exemple. La coutume cfg propriété ident faire, il est facile de trouver chaque onglet. Comme dans l'exemple ci-dessous, vous devrez spécifier un tabConfig à l'intérieur de chaque panneau et de définir les ident.
```
Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [{
        title: 'Foo',
        tabConfig: {
            ident: 'foo'
        },
    }, {
        title: 'Bar',
        tabConfig: {
            ident: 'bar',
            title: 'Custom Title',
            tooltip: 'A button tooltip'
        }
    }]
});

console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]);
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]);
```
Une autre façon est d'utiliser des css id qui peut être interrogée comme '#my-name' mais je recommande d'utiliser un programme personnalisé comme dans l'exemple ci-dessus

edit fait. Avec cet exemple, vous avez un accès direct à chaque onglet
Dans "main" (contrôleur) j'écris : ce.de contrôle({ 'ApartmentData tabpanel tabbar onglet[ident=foo]': { activer: function (grille) { console.log ("parampampam'); } } }); - Mais il n'est pas un travail(
D'abord, vous devez écrire des widgets en bas de casse et uniquement les noms de classe en camelcase. Seconde; l'avez-vous appliqué une tabConfig avec xtype: 'RequisitesApartment'? L'Exemple ci-dessus peut être copié dans l'une de l'exemple de code de champs dans le sencha de l'API.

OriginalL'auteur sra
3

Bien, je devrais mettre ce code dans 'main'(contrôleur):
```
 this.control({
        'ApartmentData tabpanel RequisitesApartment': {
            activate: function () {
                console.log('hello!');                
            }
        }
    });
```
Le problème était dans le mauvais sélecteur , que j'ai utilisé.
Le bon sélecteur est :
```
 'ApartmentData tabpanel RequisitesApartment'
```
Il y 'ApartmentData'(définir comme un alias: 'widget.ApartmentData') - est la "fenêtre" xtype -le formulaire principal.
tabpanel - panneau à onglets dans la fenêtre", et "apartServList'(définir comme alias: 'widget.RequisitesApartment') - le panneau de certains.

Merci pour sra!

Eh bien, apartServList ne peut pas être trouvé dans votre exemple de code. De sorte qu'il sera un peu difficile à suivre pour les autres pourquoi c'est la bonne réponse. Moi y compris. Peut-être que vous pouvez modifier à votre question.
Et s'il vous plaît noter que mon exemple vous à l'onglet du bouton lui-même, de ne pas l'onglet. Autant que je sache, l'événement activate de l'onglet n'est pas cochée dans le panneau, n'est-ce pas?
J'ai édité ma réponse, dans le 'panneau' xtype ont les "activer" de l'événement .

OriginalL'auteur Oleg
0

la bonne chose à faire est de passer un objet de configuration de la fonction de membre de contrôle en contrôleur init fonction. De Sencha documentation : La fonction de contrôle de fait, il est facile d'écouter des évènements sur votre façon de voir les classes et prendre des mesures avec une fonction de gestionnaire.

Un exemple rapide directement à partir de extjs docs:
```
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',

init: function() {
    this.control({
        'viewport > panel': {
            render: this.onPanelRendered
        }
    });
},

onPanelRendered: function() {
    console.log('The panel was rendered');
}
});
```
Espère que cette aide.
Cheers

Comment nous pouvons ajouter plusieurs écouteur pour un magasin à l'intérieur du contrôleur de fichier? var ps = ce.getMyStore(); ps.sur({ beforesync : ce.beforesync, finishupdate : ce.finishupdate, finishedWriting: ce.finishedWriting, portée: ce });

OriginalL'auteur r366y

Vous devez vous connecter pour publier un commentaire.