Ext.ux.grid.ExplorerView - Windows Explorer look-a-like grid

[kaigan]

Hi,

Referring to my post I made yesterday about "Explorer-like GroupingView"
http://extjs.com/forum/showthread.php?t=49045

here's Ext.ux.grid.ExplorerView!

Be aware of that this is my first try to extend Ext classes and I hope that this contribution will inspire other, more experienced Ext guys to help out with this code.

Current features
Can switch between 5 "views"
* Large icons
* Medium icon
* Small icons
* Grid details
* Tiles

View can be switched on-the-fly and specified at creation of the view.
Grouping-"aware"

Demo
A full demo and a zip ready to be unzipped in your Examples folder can be found here:
http://extjs.funkar.nu/ext-2.2/examples/explorerview/


Update (Oct 5):
* Reworked markup and CSS for items
* Works in IE now, Safari also confirmed
* Added a new view, "Tiles"

Update (Oct 6):
* Some more tweaks to CSS
* ExplorerView can be used without GroupingExplorerView
* Sample updated, D&D seems to work from GroupingExplorerView but not ExplorerView ��
* Ext.reg('explorerview' ... 'groupingexplorerview') for lazy loading (xtype)
* New screenshots!

Update (Nov 26):
* Added license information to zip

Update (Jan 26):
* Added changes by Hunyi for D&D support in ExplorerView

Update (Feb 3):
* Updated ExplorerView to handle removal of columns on-the-fly (http://extjs.com/forum/showthread.ph...121#post282121)

- kaigan

[kaigan]

Update (Oct 5):
* Reworked markup and CSS for items
* Works in IE now, Safari untested - should work
* Added a new view, "Tiles"

-kaigan

[Ytorres]

Hi Kaigan,

Very great job. So clean

Just tested with Safari v3.1.2 for Windows, without any problem

Keep up this great work !

[TommyMaintz]

That looks really great! I think thats a great first extension.

Good luck with future projects.

[temporary]

@kaigan:

do i have to use the grouping in order to use the grid?
i don't need the grouping stuff, since i have a separate tree for my folders.

[kaigan]

@temporary
There seem to be some issues with that at the moment that I wasn't aware of.. It was supposed to be able to be used standalone without being wrapped by the GroupingExplorerView. Will take a look at it later on today.

[temporary]

Thanks, that would be cool.

Together with a tree and my Locationbar component this will be a great file explorer :-D

[kaigan]

Update (Oct 6):
* Some more tweaks to CSS
* ExplorerView can be used without GroupingExplorerView
* Sample updated, D&D seems to work from GroupingExplorerView but not ExplorerView

[temporary]

Nice shots :-D

Another question, can i configure what is shown in the view that is in your screenshot? For example i'd like to have the filesize as a third information (beneath filename and -type).

[kaigan]

Templates for the different views are entirely up to the developer, they are not defined in the ux but in the code creating the grid. My 4 example templates are defined in explorerview.js and are simple Ext.Template's;

    var largeIcons = new Ext.Template(
        '<div class="x-grid3-row ux-explorerview-item ux-explorerview-large-item" unselectable="on">'+
        '<table class="ux-explorerview-icon" cellpadding="0" cellspacing="0">'+
        '<tr><td align="center"><img src="images/large-{icon}"></td></tr></table>'+
        '<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
    );
    
    var mediumIcons = new Ext.Template(
        '<div class="x-grid3-row ux-explorerview-item ux-explorerview-medium-item">'+
        '<table class="ux-explorerview-icon" cellpadding="0" cellspacing="0">'+
        '<tr><td align="center"><img src="images/medium-{icon}"></td></tr></table>'+
        '<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
    );

    var smallIcons = new Ext.Template(
        '<div class="x-grid3-row ux-explorerview-item ux-explorerview-small-item">'+
        '<div class="ux-explorerview-icon"><img src="images/small-{icon}"></div>'+
        '<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}</div></div></div>'
    );
    
    var tileIcons = new Ext.Template(
        '<div class="x-grid3-row ux-explorerview-item ux-explorerview-tiles-item">'+
        '<div class="ux-explorerview-icon"><img src="images/medium-{icon}"></div>'+
        '<div class="ux-explorerview-text"><div class="x-grid3-cell x-grid3-td-name" unselectable="on">{name}<br/><span>{type}</span></div></div></div>'
    );