1. #1
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    72
    Vote Rating
    0
    kaigan is on a distinguished road

      0  

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

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


    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
    Attached Images
    Attached Files

  2. #2
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    72
    Vote Rating
    0
    kaigan is on a distinguished road

      0  

    Default


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

    -kaigan

  3. #3
    Ext User Ytorres's Avatar
    Join Date
    Jun 2007
    Location
    Rennes, France
    Posts
    285
    Vote Rating
    0
    Ytorres is on a distinguished road

      0  

    Default


    Hi Kaigan,

    Very great job. So clean

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

    Keep up this great work !
    "Software is like sex: it's better when it's free" - Linus Torvald
    https://edit.php.net - A tool written with ExtJs for translated Php documentation

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


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

    Good luck with future projects.

  5. #5
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    @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.

  6. #6
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    72
    Vote Rating
    0
    kaigan is on a distinguished road

      0  

    Default


    @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.
    -

  7. #7
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    Thanks, that would be cool.

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

  8. #8
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    72
    Vote Rating
    0
    kaigan is on a distinguished road

      0  

    Default


    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
    -

  9. #9
    Sencha User
    Join Date
    May 2007
    Posts
    191
    Vote Rating
    0
    temporary is on a distinguished road

      0  

    Default


    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).

  10. #10
    Ext JS Premium Member
    Join Date
    Sep 2008
    Posts
    72
    Vote Rating
    0
    kaigan is on a distinguished road

      0  

    Default


    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;
    Code:
        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>'
        );
    -

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi