PDA

View Full Version : Ext.ux.grid.plugins.IconField



danh2000
8 Jun 2009, 1:08 AM
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

mystix
8 Jun 2009, 1:34 AM
good stuff once again =D>

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)

Animal
8 Jun 2009, 1:59 AM
Maybe the cellclick event could cycle the value round instead of displaying the dropdown? Best of both modes then.

mystix
8 Jun 2009, 3:26 AM
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)

danh2000
8 Jun 2009, 2:38 PM
@Animal, @mystix,

Good suggestions - Thanks guys!

Katunverdi
31 Jul 2009, 12:12 PM
Thanks so much @danh2000, the plugin works great!
It's so easy to use.

jasonyifei
5 Aug 2009, 12:58 AM
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.

danh2000
5 Aug 2009, 1:12 AM
@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.

danh2000
5 Aug 2009, 6:24 PM
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.php?p=368739#post339700

jasonyifei
5 Aug 2009, 8:37 PM
Thanks. here is my way to fixed this bug for you refer.


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);
}
}
},

danh2000
5 Aug 2009, 8:52 PM
@jasonyifei

Did you try the updated examples page?

I have updated Example 3 to show multiple columns working.

Are you still having problems?

Katunverdi
21 Dec 2009, 3:36 PM
Hi Danh2000, the examples link to iconField.js is no longer working. Would it be possible to update the examples link?

danh2000
22 Dec 2009, 3:48 AM
I updated and renamed the component - you can see it here:

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

Katunverdi
22 Dec 2009, 8:00 AM
Thanks danh2000 :)