web-dev-qa-db-fra.com

extjs en utilisant des méthodes de haut en bas

J'essaie d'utiliser up et down pour appeler plutôt que Ext.getCmp mais je ne comprends pas très bien. J'ai ce code

listeners: {
    'change': function(field, selectedValue) {
        // Ext.getCmp('wildAnimal').setValue(selectedValue);
        this.up('form').down('#wildAnimal').setValue(selectedValue);
    }
}

à l'intérieur de ce plus grand code

Ext.define('ryan', {
    constructor: function() {
        Ext.create('Ext.form.Panel', {
            bodyStyle: {"background-color":"green"},
            name: 'mypanel',
            title: 'Animal sanctuary, one animal per location  ',
            width: 300,
            bodyPadding: 10,
            test: 'mycat',
            style: 'background-color: #Fdd;',
            renderTo: Ext.getBody(),
            items: [{
                itemId: 'button1',
                xtype: 'button',
                text: 'click the button',
                handler: function() {
                    alert('(<^_^>)');
                }
            },{
                itemId: 'wildAnimal',
                xtype: 'textfield',
                fieldLabel: 'animal:',
                name: 'myanimal'
            },{
                itemId: 'myCombo',
                xtype: 'combo',
                fieldLabel: 'choose your animal',
                store: animals,
                queryMode: 'local',
                displayField: 'name',
                listeners: {
                    'change': function(field, selectedValue) {
                        // Ext.getCmp('wildAnimal').setValue(selectedValue);
                        this.up('form').down('#wildAnimal').setValue(selectedValue);
                    }
                }
            }]
        });
    }
});

var animals = Ext.create('Ext.data.Store', {
    fields: ['itemId', 'name'],
    data: [{
        "itemId": 'mycat',
        "name": "mycat"
    },{
        "itemId" : 'mydog', 
        "name": "mydog"
    },{
        'itemId' : 'sbBarGirls', 
        "name": "BarGirls-when-drunk"
    }]
});

Ext.onReady(function() {
    var a = Ext.create('ryan');
    var b = Ext.create('ryan');
});

Ce qui me rend confus, c'est pourquoi j'ai besoin du hashtag dans wildAnimal pour que cela fonctionne. De plus, lorsque je passe de Ext.form.Panel à widget.window, le code des écouteurs cesse de fonctionner. Mon code crée une fenêtre mais je ne peux pas transmettre la valeur de la liste déroulante comme je le peux lorsqu'il s'agit d'un panneau de formulaire. Si je comprends bien, up est utilisé pour rechercher des éléments dans la classe parente. Lorsque j'utilise un widget.window, est-ce que j'appelle this.up(widget)? Je n'arrive pas à faire fonctionner ça. De plus, je suis très nouveau sur Ext JS, tellement de choses peuvent me passer par la tête> __ <.

extjsextjs4
11
Ryan Williams

Les méthodes up et down sont utilisées pour parcourir l'arborescence des composants.

Lorsque vous utilisez up et down avec des sélecteurs, le sélecteur par défaut vérifie le type xt du composant. Donc, up('form') signifie "continue à monter dans l'arborescence des composants jusqu'à ce que tu trouves un formulaire." Le sélecteur #wildAnimal signifie "continue jusqu'à ce que vous trouviez le composant où id == 'wildAnimal'". Si vous utilisez up() sans sélecteur, le conteneur parent est renvoyé.

Si vous décidez d'utiliser Ext.window.Window au lieu de Ext.form.Panel, vous devrez changer toutes les occurrences de up('form') avec up('window'). Sinon, si vous savez que "myCombo" et "wildAnimal" sont des composants frères, vous pouvez simplement utiliser up().down('#wildAnimal') et cela fonctionnera après la modification du type de conteneur parent.

27
Eric

Les symantiques des méthodes montante et descendante suivent la classe ComponentQuery . Je vous recommande vivement de lire les documents de l'API à ce sujet. Et voyez également ci-dessous comment utiliser ExtJS. 

Bonne chance!

Je vais simplement laisser ceci ici pour vous. 

Voici une liste de ressources que j'ai préparée pour mes collègues: Il est évident que les liens renvoient à ExtJS4.1, mais n'hésitez pas à prendre la même chose pour la dernière version.

API: http://docs.sencha.com/ext-js/4-1/

Exemples : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/

Guides: http://docs.sencha.com/ext-js/4-1/#!/guide

Ressources: 

Forum Sencha: http://www.sencha.com/forum/

StackOverflow: https://stackoverflow.com/questions/tagged/extjs

Outils: 

Firebug Plugin (Illuminations for Developers) 

http://www.illuminations-for-developers.com/

Comment commencer

1. Scroll through the Examples to get ideas of what you want to build.
2. Read through these Guides :
    ○ Getting Started
    ○ Class System
    ○ MVC
    ○ Layouts
    ○ Components
    ○ Data Package

Une fois familiarisé avec ces concepts, choisissez les composants à utiliser et examinez de plus près les guides spécifiques de la section Composants. Je vous conseillerais également de lire les tutoriels sur l'architecture des applications.

5
dbrin

J'ai eu des problèmes avec Ext.getCmp("id"), alors la meilleure solution semble être Ext.up/down(), .__ et elle m'a été très bien expliquée dans ce sujet:

https://www.sencha.com/forum/showthread.php?258048-Clarify-getCmp-vs-Up-down ,

J'espère que cela aide pour ceux qui ne semblent pas le comprendre.

0
Egzonr