Update content of one window on event in other window with ExtJS

Question

Some time ago I started learning of ExtJS library and now I would like to create following:

There is a browser window and it is separated verticaly.
On the left there is a TreePanel with directories and subdirectories (only 2 level deep).
On the right side there will be an output for content of the selected subdirectory.

I have done the interface part, but I don't how to change the content on the right side when user clicks on subdirectory on the left side. I can make the request with Ext.Ajax.request, but I don't know how to trigger the update of the content for the right side.

By the way. As I mantioned the left side is TreePanel and the right side is GripPanel and they are in Viewport with xtype : 'panel', but I don't think that this is imoptant for that question.

Any suggestions?

Answer 1

Firstly, you need to register the fact the user is selecting a node in the treepanel, this can be done via:

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

Where 'yourtreepanel' is the name of your treepanel (if the treepanel was assigned to a variable, otherwise use Ext.getCmp('yourtreepanel').getSelecti....) and 'whattodonext' is the name of the function to call when the user choses a node.

The function 'whattodonext' would then look like this:

    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)

            }

        }   
    }

The next part is to update the panel to the right with content (if it were called 'mycontentpanel'). Say this content should be loaded from 'mycontent.html', in the section with

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

You would put the code:

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

And thats it!

You can use the params options to send any specific POST parameters you may have which will decide what content is served.

And dont forget, if you run in to difficulties, try referencing your objects using Ext.getCmp('objectname') instead of just 'objectname'.operation....

Good luck!