1. #1
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default Ext.ux.grid.plugins.CellIconMenu

    Ext.ux.grid.plugins.CellIconMenu


    Update 06/08/2009
    • Fixed bug when component used in multiple columns.
    • New default icon config to specify a default value.
    • New defaultMenuPosition config to specify where in the menu the default appears.
    • New expandMouseTarget config expands click target to the parent cell.
    • New handleEmptyAndNull config to sepcify whether empty strings and null values are handled by the component (and recieve the blank icon automatically) or whether they are handled by the developer via the icon config.
    • I've also updated the example page to demonstrate some of the above.


    Hi,

    A new grid plugin component that renders an icon in place of a field in the underlying record data and enables selection of pre-defined values via a menu or 'cycle-mode'.

    Example:

    http://www.technomedia.co.uk/CellIconMenu/example.html

    I'd appreciate comments and/or suggestions.

    Thanks,

    Dan
    Last edited by danh2000; 22 Dec 2009 at 3:50 AM. Reason: Component Renamed

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    good stuff once again

    it might be a good idea to listen on the grid's cellclick event instead of the icon's click event -- this way, users would only need to aim the cursor at the grid cell, which has a larger area, instead of the icon, which covers less than half of the cell.
    (refer to the CheckColumn in the EditorGrid example to see what i mean)

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Maybe the cellclick event could cycle the value round instead of displaying the dropdown? Best of both modes then.

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Thumbs up


    Quote Originally Posted by Animal View Post
    Maybe the cellclick event could cycle the value round instead of displaying the dropdown? Best of both modes then.
    +1 (as an option -- i still think the icon's a little hard to hit accurately with the mouse though)

  5. #5
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    @Animal, @mystix,

    Good suggestions - Thanks guys!

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    3
    Vote Rating
    0
    Katunverdi is on a distinguished road

      0  

    Default The IconField plugin is awesome

    The IconField plugin is awesome


    Thanks so much @danh2000, the plugin works great!
    It's so easy to use.

  7. #7
    Ext User
    Join Date
    Jul 2009
    Posts
    2
    Vote Rating
    0
    jasonyifei is on a distinguished road

      0  

    Default Mutil-columns used iconField problem.

    Mutil-columns used iconField problem.


    What a wonderful plugin just i needed it. thanks.
    When i used iconField in mutil-columns, whatever i changed any column, it aim to the last column which used IconField. After check the plugins code, i found the onClick Event binded by the mainbody click Event.
    (this.gridView.mainBody.on('click',this.onClick,this).
    That's mean the mainbody click event will fire all IconField instance onClick event, the menu of the last iconField will replace others and show.

  8. #8
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    @Katunverdi

    Thanks.

    @jasonyifei

    Are you adding the same instance of IconField to multiple columns or seperate instances?

    I haven't tried this component in multiple columns yet, but I will do this later and will update this post with a fix if required.

  9. #9
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    Hi,

    I've updated this component with a bug fix (thanks @jasonyifei) and a few new features.

    See the first post for details:

    http://extjs.com/forum/showthread.ph...739#post339700

  10. #10
    Ext User
    Join Date
    Jul 2009
    Posts
    2
    Vote Rating
    0
    jasonyifei is on a distinguished road

      0  

    Default


    Thanks. here is my way to fixed this bug for you refer.
    Code:
    onClick : function(e,target){
            var tEl = TOONE.get(target), cEl = tEl.parent('.x-iconfield');
            
           //users can fire the iconfield select event by click the cell
            if(!cEl) cEl = tEl.child('.x-iconfield');
            if(!cEl){
                return;
            }
            e.stopEvent();
            
            
            var col = this.gridView.findCellIndex(cEl.dom.parentNode.parentNode);
    
            //fix bug in multiple columns.
            var cm = this.grid.getColumnModel();
            if(cm.config[col].dataIndex != this.dataIndex) return;
            
            
            var row = this.gridView.findRowIndex(cEl.dom.parentNode.parentNode.parentNode);
            
            var rec = this.grid.store.getAt(row);
            var val = rec.get(this.dataIndex);
            
            this.activeRow = row;
            this.activeCol = col;
            this.activeRecord = rec;
            this.activeValue = val;
            
            if(this.clickActivatesGridView){
                var sm = this.grid.getSelectionModel();
                if(sm.selectRow){
                    sm.selectRow(row);
                }else{
                    sm.select(row,col);
                }
            }
            
            if(this.cycleMode && e.button === 0){
                this.cycleIcon(cEl,row,col,rec,val);
            }else{
                if(this.fireEvent('beforeshowmenu',this,row,col,rec,val) !== false){
                    this.showMenu(cEl,row,col,rec,val);
                }
            }
        },