history and selection model questions

Question

I am trying to build an app using Extjs 4.1. In general: it is a viewport with a tree panel on the west and a center panel that it is actually a tab-holder panel. When a user clicks on a tree node a tab is populating the center view. I had set an attribute in the tree panel that after selecting a node it gets deselected (deselectAll). The reason for this is that the user can open many tabs from different places (e.g. within each tab). But, when I set the above attribute it is producing an error (the “data” is undefined). The data that is undefined is the data related to the tree node. So, the question concerning selection model:

How can I address this problem (a solution may be to select the fist node, but I don’t want it)?

As for the history utility, I need to implement browser back button. Especially I want to disable browser’s refresh button. If user opens let’s say 15 tabs and accidentally click on browser refresh or “F5” he/she will lose everything. I had tried many things but with no luck. I am unable to understand “Ext history util”. So,

Is there any good example out there?

Could anybody guide me on how to do it?

Notice that the application is built respecting the new “MVC” architecture.

Answer 1

Stopping the refresh event is pretty easy - providing that your page has the focus. E.g.:

Ext.getDoc().on('keypress', function(event) {
    if (event.getCharCode() == event.F5) {
        event.stopEvent();
        console.log('you stopped the refresh event');
    }
});

If your page doesn't have the focus then there is nothing that can be done -- but most of the time your page loses the focus when a different browser tab is opened so F5 would be refreshing that one instead anyway.

I'm still trying to wrap my wits around the first part of your question, but I thought I would share that.

EDIT

Instead of trying to stop the default browser behavior (something which you can only do on a very limited basis), you should look into state management. ExtJS supports it on many components. Here is the ExtJS example.

Also here is the example of controlling browser history.