Aggiornare il contenuto di una finestra sulla manifestazione in altra finestra con ExtJS

Question

Qualche tempo fa ho iniziato a imparare di libreria ExtJS e ora vorrei creare seguente:

C'è una finestra del browser ed è diviso verticalmente.
Sulla sinistra c'è una TreePanel con le directory e sottodirectory (solo 2 livello profondo).
Sul lato destro ci sarà un'uscita per il contenuto della sottodirectory selezionata.

Ho fatto la parte di interfaccia, ma io non come cambiare il contenuto sul lato destro quando l'utente fa clic sulla sottodirectory sul lato sinistro. Posso fare la richiesta con Ext.Ajax.request, ma non so come attivare l'aggiornamento dei contenuti per il lato destro.

Tra l'altro. Come ho mantioned il lato sinistro è TreePanel e il lato destro è GripPanel e sono nella vista con xtype:. 'Panel', ma non credo che questo sia imoptant per questa domanda

Qualche suggerimento?

Answer 1

In primo luogo, è necessario registrare il fatto che l'utente sta selezionando un nodo nel treepanel, questo può essere fatto attraverso:

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

Dove 'yourtreepanel' è il nome del vostro treepanel (se il treepanel è stato assegnato a una variabile, altrimenti utilizzare Ext.getCmp ( 'yourtreepanel'). GetSelecti ....) e 'whattodonext' è il nome della funzione alla chiamata quando l'utente sceglie un nodo.

La funzione 'whattodonext' sarebbe quindi simile a questa:

    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 parte successiva è quello di aggiornare il pannello a destra con contenuto (se fosse chiamato 'mycontentpanel'). Dire questo contenuto dovrebbe essere caricato da 'mycontent.html', nella sezione con

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

Si potrebbe mettere il codice:

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

E questo è tutto!

È possibile utilizzare le opzioni di params per inviare eventuali parametri specifici POST si possono avere che deciderà quali contenuti viene servita.

E non dimenticate, se si esegue in difficoltà, provate a referenziare la tua oggetti utilizzando Ext.getCmp ( 'ObjectName') invece di 'objectname'.operation ....

In bocca al lupo!