Mise à jour du contenu d'une fenêtre sur l'événement dans un autre fenêtre avec ExtJS

Question

Il y a quelque temps, je commencé à apprendre la bibliothèque ExtJS et maintenant je voudrais créer ce qui suit:

Il y a une fenêtre de navigateur et il est séparé verticaly.
Sur la gauche il y a un TreePanel avec des répertoires et sous-répertoires (seulement 2 niveaux de profondeur).
Du côté droit, il y aura une sortie pour le contenu du sous-répertoire sélectionné.

J'ai fait la partie de l'interface, mais je ne sais pas comment changer le contenu du côté droit lorsque l'utilisateur clique sur sous-répertoire sur le côté gauche. Je peux faire la demande avec Ext.Ajax.request, mais je ne sais pas comment déclencher la mise à jour du contenu pour le côté droit.

Par ailleurs. Comme je l'ai mantioned le côté gauche est TreePanel et le côté droit est GripPanel et ils sont en Viewport avec xtype:. « Panneau », mais je ne pense pas que ce soit imoptant pour cette question

Toutes les suggestions?

Answer 1

Tout d'abord, vous devez vous enregistrer le fait que l'utilisateur sélectionne un nœud dans le treepanel, cela peut se faire via:

yourtreepanel.getSelectionModel().on('selectionchange', whattodonext);

Où yourtreepanel 'est le nom de votre treepanel (si le treepanel a été affecté à une variable, sinon utilisez Ext.getCmp ( « yourtreepanel »). GetSelecti ....) et « whattodonext » est le nom de la fonction à l'appel lorsque l'utilisateur choisit un noeud.

La fonction 'whattodonext' doit ressembler à ceci:

    function whattodonext(){
        node=yourtreepanel.selModel.selNode;
        if(node){
            if(node.isLeaf()){
// this works out what you want to do if the user has selected a valid leaf node


            }else{
// otherwise...put anything you wish to happen here (i.e. if a folder has been selected)

            }

        }   
    }

La partie suivante consiste à mettre à jour le panneau vers la droite avec le contenu (si elle était appelée « mycontentpanel »). Dites ce contenu doit être chargé de « mycontent.html », dans la section avec

// this works out what you want to do if the user has selected a valid leaf node

vous mettriez le code:

mycontentpanel.load({
url: 'mycontent.html',
params: {
yourparam1:'param1value',
yourparam2:'param2value'
},
nocache: true,
timeout: 30
});

thats it!

Vous pouvez utiliser les options de params d'envoyer des paramètres POST spécifiques que vous pourriez avoir qui décidera quel contenu est servi.

Et ne pas oublier, si vous avez des difficultés pour, essayez le référencement de vos objets à l'aide Ext.getCmp ( « objectname ») au lieu de simplement « objectname'.operation ....

Bonne chance!