PDA

View Full Version : Trying to implement iTunes/Mac Finder like column navigation



Andreas Linde
2 May 2007, 4:35 AM
Hello everybody,

I am in the process of evaluating the ext library, and so far I am far more than impressed!

One thing I am trying to implement, is a navigation element which works like the Mac Finder column view or iTunes browse functionality. Did anybody try to implement it already?

So far my idea to implement it is as follows:
- use BorderLayout with nestedLayout for each new column to show
- use Resizable to make the navigation box vertically resizeable. The width isn't needed to change
- dynamically load content into the following columns according to the selected chosen element in the current column
- use the state classes to store and set the height of the box on reloading, as well as the changed column widths
- dynamically add columns on event

The problems I already have are:
- vertically resizing works on Firefox, but not in IE6. IE just renders blue background, while Firefox resizes the complete box correctly
- columns are resized when window is resizing in width, instead of having a horizontal scroll bar

I attached the example code I did so far. Any ideas/hints/suggestions are more than welcome!

Btw: Having such a navigation control implemented by default like the tree control is, would be a blast ;)

jay@moduscreate.com
2 May 2007, 5:21 AM
Loaded the example, it did nothing but list a bunch of links. \:D/

Andreas Linde
2 May 2007, 8:35 AM
Well, actually I am looking for some help on the problem I have. Otherwise I would post a fully working solution in the Examples forum maybe ;)

TopKatz
2 May 2007, 9:06 AM
why not just dynmaicly build a bunch of divs that you populate a layout region with using updateManager? You can use any markup you want to asign icons, and attach events to them to behave just like the osx finder.

Just a thought

Andreas Linde
3 May 2007, 2:07 AM
Since I am pretty new to Ext, I don't exactly understand what you mean :-/

Here is what I think I got:
- Create dynamically a div of type LayoutRegion class with content loaded via UpdateManager into it
- On selection of an element, do it again and place the next LayoutRegion right next the one before

Is this correct? Could you give me a small code example? Somehow I am still stuck :-?

TopKatz
3 May 2007, 4:59 AM
If Im not mistaken you want a vertical navigation pane , for example, running down the left side of the layout, just like the finder in osx. A simple solution would be to have a two region layout, east and west. West would be about 1/4 the size of the layout. In the west layout I would put a div called "nav-div" or something like that. Then I would build an updateManager that made a request to a php script to build the html to bring back and put into the "nav-div".

The updateManager is very simple to use, code like this would grab an html object from a script and return it to the element you specify, like so:


Ext.get("nav-div").load({
url: "ajaxRequests.php",
scripts:true,
params: "myVar=stuff",
text: "Loading Nav..."
});

That snip it will return an object from ajaxRequest.php and put it in the div called "nav-div". What ajaxRequest.php returns is up to you. As I suggested you could easily build a navigation menu with html markup in that php script.

Hope that helps

Andreas Linde
4 May 2007, 12:54 AM
So far so clear,

my example above is basically doing the same static in HTML. But I don't only want one navigation pane being display, but lots of them next to each other, I am still running into the same problems I already had :(

- vertically resizing does not work. The browser just renders blue background (IE + Firefox)
- columns are resized when window is resizing in width, instead of having a horizontal scroll bar

Does anybody have any ideas about these issues?

Andreas Linde
4 May 2007, 6:31 AM
Vertical resizing solved! :)

Simply by adding the following code into my example:


newNavigationResizer.on("resize", function(){
panel1.layout();
});