PDA

View Full Version : Grid CellActions Plugin



Pages : [1] 2

jsakalos
25 Mar 2008, 5:03 PM
Following the Grid RowActions plugin (http://extjs.com/forum/showthread.php?t=29961) I turned out first version of CellActions.

To clarify:

RowActions should be used when we need to operate on a whole grid record.
CellActions should be used when we need to operate on a single grid cell.

You can use one, another or both of them in one grid.

Demo: http://cellactions.extjs.eu

Note: Code is really beta in this case, not fully documented and not for general production use. I'll give it some lifetime here and then I'll polish it.
Code is fully documented and well commented now.

Enjoy!

franklt69
26 Mar 2008, 3:32 AM
Saki I am watching the demo, and work ok but a doubt, will be possible to have for instance a inside the column email (icon + emai@domain.com for each row)?, the idea is the user can watch the email, url or phone to do search ect, but when it click on cell to show a dialog.

regards
Frank

jsakalos
26 Mar 2008, 3:36 AM
Yes, it is designed that way. If you click the icon, the handler gets value as one of the arguments. So if you have field with value email@domain.com and email icon beside it and you click the email icon, the handler gets the value email.domain.com and you can do whatever you want with it.

jsakalos
26 Mar 2008, 3:37 AM
Or you mean to place icon(s) to the left of text?

franklt69
26 Mar 2008, 4:21 AM
Yes I want to said to place the icon(s) to the left of text, the reason Saki is the user can browse the (email, phone, url and watch it) if the user want to do send a email click in this cell and appear the mail app, the same with the phone, ect, I have doubt now if is better only to show the email, phone url ect with a link in the cell email@domain.com, maybe is more expense to show the icon + link in the cell, what do you think, could be it optional?

regards
Frank

jsakalos
26 Mar 2008, 4:25 AM
If you want only link, then you don't need CellActions a custom renderer is sufficient. E.g.:


renderer = function(val) {
return '<a href="mailto:' + val + '">' + val + '</a>';
}
or something like that.

CellActions are designed to be lightweight so the performance penalty of using it shouldn't be big. Placing icons at the left of text is not implemented yet, do you want it?

franklt69
26 Mar 2008, 4:43 AM
Saki using


renderer = function(val) {
return '<a href="mailto:' + val + '">' + val + '</a>';
}

open the default mail client, when click on this cell, but remember it could be a web phone voice ip or an map app to fields like address, (dialog or app done with ext) so here cellAction will be very useful, I think the better will be have the options to show:
icon + text (and the text formated) the developer decide if only want icon or text ect inside the cell.

regards
Frank

jsakalos
26 Mar 2008, 5:08 AM
Frank, take a look at the demo now. Icons are (temporarily, only for you ;) ) at the left sice of cells. Is that what you want?

Lucian
26 Mar 2008, 6:41 AM
Frank, take a look at the demo now. Icons are (temporarily, only for you ;) ) at the left sice of cells. Is that what you want?

Lucian here...this is what I want, thank you very much. I also added support for mouseover/mouseout events by modifying the main file. Anybody interested?...~o)

franklt69
26 Mar 2008, 9:01 AM
Saki this is what I want, thanks again

regards
Frank

jsakalos
26 Mar 2008, 9:15 AM
Lucian here...this is what I want, thank you very much. I also added support for mouseover/mouseout events by modifying the main file. Anybody interested?...~o)

I'm not sure if it is good idea to create branches. Better would be to post your change - if it doesn't break anything I would incorporate it to the main stream maybe as a configurable option.

Lucian
26 Mar 2008, 9:22 AM
In onRenderGrid function I add this:



this.view.mainBody.on({scope:this, click:this.onClick, mouseover: this.onMouseOver});


the next thing is to add the onMouseOver function



,onMouseOver: function(e, target) {
var t = e.getTarget('div.ux-cell-action');
var row = e.getTarget('.x-grid3-row');
var col = this.view.findCellIndex(target.parentNode.parentNode);
var c = this.grid.getColumnModel().config[col];
if(t) {
var record = this.grid.store.getAt(row.rowIndex);
var dataIndex = c.dataIndex;
var value = record.get(dataIndex);
var action = t.className.replace(/ux-cell-action /, '');
}
if(false !== row && false !== col && record && dataIndex && action) {
... action here ...
}
}
} // eo function onMouseOver


Same thing for onMouseOut event.
If this is useful somehow, you can add it in the code.

All I need is to handle the other events that might occur, not just "onClick".

Cheers!

jsakalos
26 Mar 2008, 10:30 AM
What would be the "... action here ..."? Because the code you posted is original onClick handler with firing events and calling callbacks stripped off. Also, is getting of all those variables necessary?

I thought that you mean something like overClass to highlight the cell or similar.

Lucian
26 Mar 2008, 10:42 AM
Yep...the code needs to be refactored...working on this right now... :">
Need to handle all the events, so probably I'll try to catch the event type.
For each one I'll check into this.cellActions for the proper function to handle the event.

Any better ideas?...:-/

jsakalos
26 Mar 2008, 11:26 AM
Well, I cannot think of anything that would be useful as mouseover handler.

Lucian
26 Mar 2008, 11:41 AM
Let me give you an example: when I have the mouse over on an icon, let's say the e-mail icon from your example, that icon will act as an select box. Maybe this thumbnail is more elocvent:

http://www.cakextazy.com/icon_select.jpg

The menu below is a custom context menu, but it appears only on mouseover that icon.
The client is asking for this behavior, so another solution for displaying that menu is not an option, for now...

jsakalos
26 Mar 2008, 11:53 AM
I understand. Anyway, I wouldn't put it to mouseover event. I wouldn't like my grids to popup some menus just because I move mouse over them.

If you want to fire actions on mouseover anyway, you can do it w/o changing/extending the existing code:



var cellActions = new Ext.ux.grid.cellActions({...});
var grid = new Ext.grid.GridPanel({....});
// ...
grid.getView().mainBody.on('mouseover', cellActions.onClick, cellActions);
I haven't tested it though.

Lucian
26 Mar 2008, 11:58 AM
Nice. Thank you...:D

jsakalos
26 Mar 2008, 12:08 PM
Lucian, grab the code from demo page now. I've introduced new config variable actionEvent that defaults to 'click' but you can change it to 'mouseover'. Very briefly tested - seems to work.

jsakalos
26 Mar 2008, 1:12 PM
Update:

Some bugfixes leading to better performance and code is now fully documented, well commented and jslint-ed.

jsakalos
27 Mar 2008, 4:31 AM
Beta2 (http://cellactions.extjs.eu) is out.

Changes:
Code is now using XTemplate resulting in much shorter and cleaner code and better cross-browser compatibility.

Enjoy!

Lucian
27 Mar 2008, 4:37 AM
Great job, Saki!...

Sorry for that question , but what if I need to handle multiple events on a single icon?...:-?

jsakalos
27 Mar 2008, 4:44 AM
There is only one event (well two: beforeaction and action) for an icon. However, if you bind your icon (action) to the store you cannot say in advance what iconCls (action) it gets. In that case:


actionEventHanler = function(grid, record, action, value, row, col) {
switch(action) {
case 'icon-save':
// ...
break;

case 'icon-load':
// ...
break;

// ...
}
}

jsakalos
27 Mar 2008, 4:47 AM
Analyzing the example at http://cellactions.extjs.eu should also help you. Event handler just popup toast windows but it is in.

mabello
8 Apr 2008, 1:03 AM
Dear jsakalos,

I have not used the plugin yet, but I've checked the code and it's simple and clear, very nice idea. Thanks for sharing.
Regards
Marco

border9
15 Apr 2008, 4:29 AM
im having a little bit of an issue with this plugin on more then one grid inside of a tabbed system.

this.view.mainBody has no properties
Line 186

this.view.mainBody.on(cfg);

This happens when i try to put this plugin on more then one Grid inside of a Tabbing system. Any ideas?

I have:

var truckloadGrid = new Ext.grid.GridPanel({
loadMask: true,
ds: truckloadStore,
sm: sm2,
columns: [
sm2,
{header: "Num #",
width: 8,
sortable: true,
renderer: function(quote) {
return '<a href="php/quotes/admin_truckloadquotes.php?id=' + quote + '" target="truckloadquote">' + quote + '</a>';
}},
{header: "First / Last Name",
width: 22 ,
renderer: function(value, metadata, record) {
return String.format("{0} {1}", record.data.fname, record.data.lname);
}
},
{header: "Phone Number", width: 22 , sortable: true, dataIndex: 'phonenum'},
{header: "Email Address", width: 22, dataIndex: 'email' },
{header: "Date Time Recieved", width: 17 , sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d h:i:s a'), dataIndex: 'timerecieved'},
{header: "Customer Type", width: 22, dataIndex: 'customertype' },
{header: "Site Recieved From", width: 22, dataIndex: 'websitesubmit' },
{header: "Admin", width: 8 , dataIndex: 'delquote' ,cellActions:[{
iconCls:'icon-plus',
qtip:'Update Quote',
style:'background-color:#f0f0f0;'
},{
iconCls:'icon-minus',
qtip:'Delete Quote'
}]}
],
stripeRows: true,
autoHeight: false,
viewConfig: {
forceFit: true
},
border: false,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: truckloadStore,
displayInfo: true,
displayMsg: 'Displaying Quotes {0} - {1} of {2}',
emptyMsg: "No Quotes to display"
}),
plugins:[new Ext.ux.grid.Search({
mode:'local'
,iconCls:false
,dateFormat:'Y-m-d H:i:s'
,minLength:2
,align:'left'
}), this.cellActions, checkColumn2]
});

3 Grids that look like this slightly diffrent depending on the fields needed.

jsakalos
15 Apr 2008, 5:13 AM
Please re-download and let me know it it works. I haven't changed version yet but zip file is patched.

border9
15 Apr 2008, 5:27 AM
I reinstalled with the patched one and its still throwing the same error.

Right know it works on 2, but not on anymore then 2 grids in a Tabbing system, when you try to do it on 2+ is when it throws the error, so right now im just leaving it out of the other 4 tabs until the error is resolved. Thanks ill keep an eye out on here for a fix.

jsakalos
15 Apr 2008, 5:33 AM
I cannot fix it more as now the event is installed latest it can be: from grid.afterRender function sequence. Do you lazy instantiate your grids? Any simplified copy&paste&run showcase?

jsakalos
15 Apr 2008, 5:33 AM
One more remark: Any colliding ids?

border9
15 Apr 2008, 2:13 PM
I checked over all the colliding IDs there wherent any, What i did was i copyed the Grid, changed it acordingly to what as needed for that specific Grid, the grids themselves all have diffrent ids and the Grids work, just not when i include the Cellaction on more then 2 of them. then the whole page gets thrown off with that error.

The Site is a Border Layout, with a North, Center, West, South Region ( In the South Region is the Tab Panel with 6 Tabs and Diffrent Grids in Each Tab, The First Tab Loads With the Grid and The Cell Action Working along with a Managed Iframe in the Center Region, when you change tabs the grid changes along with the Center region changes to a new Managed Iframe and the cell action will work. But any more Cell actions in any of the other tabs will not function, they cause the website to throw that error i posted to begin with.

So im not 100% sure whats the issue, everything has its own unique ID.

jsakalos
15 Apr 2008, 2:44 PM
I do not have enough info to say or do anything reasonable; can you please post a simplified showcase that I can copy&paste&run locally?

border9
15 Apr 2008, 7:47 PM
Sure i can post the viewpoint and the tabbing with the grids

Viewpoint:


var viewport = new Ext.Viewport({
layout:"tdgi_border",
items:[{
region:'center',
id: 'center',
title: 'Quotes',
layout: 'card',
activeItem:'form_mainquotes',
border:true,
items: [
mainquotesForm ,
{title:'formB', id:'form_truckloadquotes' },
{title:'formC', id:'form_generalrequests' },
{title:'formD', id:'form_residentialsent' },
{title:'formE', id:'form_truckloadsent' },
quotesentForm
]
},{
region:'north',
contentEl: 'header',
split:false,
height:25,
minSize: 25,
maxSize:25,
border: false,
collapsible: false,
margins:'0 0 0 0',
bbar: this.northToolbar
},
tabpanel
,{
region:'west',
id:'searchpanel',
title:'Zipcode Search',
collapsedTitle: {
//Just like an Ext.DomHelper config object
element : {
// Required0
tag : 'img',
// Required
src : 'westzipcode.png'
// Set this if you need to.
//style : "margin-left:3px; color: #FF0000; font-weight: bold;"
}
},
collapsible:true,
//collapsed:true,
layout:'border',
width:210,
items:[ simplesearch, gridsearch ]
}]
});

Tabbing Panel:


//***********************
//****** Tab Panel ******
var tabpanel = new Ext.TabPanel({
region:'south',
id:'tabs',
title:'Quotes Select',
qtip:'Quotes Select',
collapsedTitle: {
//Just like an Ext.DomHelper config object
element : {
// Required0
tag : 'div',
// Required
html : 'Quotes Select',
// Set this if you need to.
style : "margin-left:3px; color: #006699; font-weight: bold;"
}
},
split:true,
height: 200,
minSize: 100,
maxSize: 210,
collapsible: true,
border:true,
margins:'0 0 0 5',
activeTab:0,
tabPosition:'bottom',
pressed:true,
items:[{
id: 'mainquotes',
title: 'General Quotes',
layout:"fit",
items:[ mainquotesGrid ]
},{
id: 'truckloadquotes',
title: 'Truckload Quotes',
layout:"fit",
items:[ truckloadGrid ]
},{
id: 'generalrequests',
title: 'General Requests',
layout:'fit',
items:[ requestsGrid ]
},{
id: 'residentialsent',
title: 'Residential Quotes Sent'
},{
id: 'truckloadsent',
title: 'Truckload Quotes Sent'
},{
id: 'quotesent',
title:"General Quotes Sent",
layout:"fit",
items:[ quotessentGrid ]
}]
});



Grid Example:


var requestsGrid = new Ext.grid.GridPanel({
loadMask: true,
ds: requestsStore,
sm: sm3,
columns: [
sm3,
{header: "Num #",
width: 6,
sortable: true,
renderer: function(id) {
return '<a href="php/quotes/admin_requests.php?id=' + id + '" target="truckloadquote">' + id + '</a>';
}},
{header: "First / Last Name",
width: 17 ,
renderer: function(value, metadata, record) {
return String.format("{0} {1}", record.data.fname, record.data.lname);
}
},
{header: "Phone Number", width: 12 , sortable: true, dataIndex: 'phonenum'},
{header: "Email Address", width: 22, dataIndex: 'email' },
{header: "Date Time Recieved", width: 17 , sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d h:i:s a'), dataIndex: 'timerecieved'},
{header: "Reason for Request", width: 50, dataIndex: 'reason' },
{header: "Status", width: 10, dataIndex: 'status' },
{header: "Admin", width: 8 , dataIndex: 'delquote' ,cellActions:[{
iconCls:'icon-plus',
qtip:'Update Quote',
style:'background-color:#f0f0f0;'
},{
iconCls:'icon-minus',
qtip:'Delete Quote'
}]}
],
stripeRows: true,
autoHeight: false,
viewConfig: {
forceFit: true
},
border: false,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: requestsStore,
displayInfo: true,
displayMsg: 'Displaying Quotes {0} - {1} of {2}',
emptyMsg: "No Quotes to display"
}),
plugins:[new Ext.ux.grid.Search({
mode:'local'
,iconCls:false
,dateFormat:'Y-m-d H:i:s'
,minLength:2
,align:'left'
}), checkColumn3]
});

Can you think of anything else you would need to see for the example? this is everything i use exactly so you can see also how i have it setup.

jsakalos
16 Apr 2008, 2:54 AM
Before I test it: Have you considered to create your grids in tabs this way: http://examples.extjs.eu?ex=gridintab ?

mjlecomte
16 Apr 2008, 3:20 AM
Sure i can post the viewpoint and the tabbing with the grids

Viewpoint:


var viewport = new Ext.Viewport({
...
items:[{
id: 'mainquotes',
title: 'General Quotes',
layout:"fit",
items:[ mainquotesGrid ]//overnested
},{
// id: 'truckloadquotes',//specify in grid config
// title: 'Truckload Quotes',//specify in grid config
// layout:"fit",//specify a default layout for the tabs
// items:[ truckloadGrid ]
truckloadGrid
},{
id: 'generalrequests',
title: 'General Requests',
layout:'fit',
items:[ requestsGrid ]
},{
id: 'residentialsent',
title: 'Residential Quotes Sent'
},{
id: 'truckloadsent',
title: 'Truckload Quotes Sent'
},{
id: 'quotesent',
title:"General Quotes Sent",
layout:"fit",
items:[ quotessentGrid ]
}]
});



});[/code]



You are overnesting your grids inside the tab panels....see FAQ.

border9
16 Apr 2008, 5:44 AM
Ok, thats understandable, but why would the plugin work fine on 2 grids and not on the other 4? that doesnt quite make much sense does it?
Also http://examples.extjs.eu?ex=gridintab (http://examples.extjs.eu/?ex=gridintab) is a dead link.

Lucian
16 Apr 2008, 5:49 AM
Hi Saki!...

I try to use the CellActions plugin on a grouping grid, and the results are not quite what I need.

You can simply copy&paste that piece of code into cellactions.js to check what is all about.



Ext.apply(this, {
store:new Ext.data.GroupingStore({
reader:new Ext.data.JsonReader({
id:'company'
,totalProperty:'totalCount'
,root:'rows'
,fields:[
{name: 'company'}
,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
,{name: 'industry'}
,{name: 'action1', type: 'string'}
,{name: 'action2', type: 'string'}
,{name: 'action3', type: 'string'}
,{name: 'qtip1', type: 'string'}
,{name: 'qtip2', type: 'string'}
,{name: 'qtip3', type: 'string'}
]
})
,proxy:new Ext.data.HttpProxy({url:'get-grid-data.php'})
,groupField:'industry'
,sortInfo:{field:'company', direction:'ASC'}
})
,columns:[
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'
,cellActions:[{
iconCls:'icon-key'
,qtip:'Click to Unlock'
,hide:true
,hideMode:'display'
},{
iconCls:'icon-email'
,qtip:'Send E-mail'
}]
,editor:new Ext.form.TextField()
}
,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'
,cellActions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,style:'background-color:#f0f0f0;'
}]
,editor:new Ext.form.TextField()
}
,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
// ,clicksToEdit:1
,plugins:[this.cellActions]
,viewConfig:{forceFit:true}
,stripeRows:true
,sortInfo:{field: 'company', direction: "ASC"}
,groupField:'industry'
}); // eo apply



I believe that the code should group the items by the default value, without considering the icons for actions.

border9
16 Apr 2008, 10:25 AM
OK, so i fixed the double nested thing, didnt change anything though,

IE gives the error:
Line 188
Char 3
Error: 'this.view.mainBody" is null or not an object
Code: 0
URL: Site URL

error is coming from Ext.ux.grid.CellActions.js Any ideas?

border9
16 Apr 2008, 12:10 PM
I figured it out.

Each Cellaction needs to have its own individual var.


var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction:function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-undo':function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});

IE: cellActions, cellActions1, cellActions2
The reason i was having issues with that is because each of the grids uses the same 2 buttons but on a diffrent grid, but oh well that seems to have fixed my errors. not sure if thats the way its supose to be.

jsakalos
16 Apr 2008, 1:05 PM
Yes, it sounds very logical. I'm glad you found out

Chris in Cambridge
18 Apr 2008, 11:00 AM
Saki,

Great work, thanks. Very useful.

How would you gauge the difficulty of having multiple (vertically stacked) cell actions in a single grid cell.

Thanks!

jsakalos
18 Apr 2008, 12:39 PM
Vertically? Really? You can try to play with templates and css rules. It should be feasible and not that difficult.

jay@moduscreate.com
20 Apr 2008, 11:48 AM
Hi Saki,

Great work. May i suggest adding to the original post that 'dataIndex' is a required field in the column model config? Else, it does not fire actions.

Thanks for contributing this.

pjordan
20 Apr 2008, 3:59 PM
Hello

I am wondering if there is a way to omit the cellAction (and icon) on a row by row basis?

An example would be if an email has an attachment, to show an attachment icon, etc. I am not doing exactly that, but it serves as an easy example.

For my purposes, I have two right aligned icons. The left most icon should only be present on records that have a non blank value in a dataIndex.

I noticed in the example there is "hide" and "hideMode" but I don't see these referenced in the source... Is there inherited controls or something I don't know about? I looked at RowActions source for more clues, but it does not seem that hideIndex is available to cellActions.

Lastly, is there an opposite of hideIndex like showIndex? IMO when there *is* data (like hideIndex expects), it represents something exists, and not the lack of.

A fix would be say "hide:true" meant that if (iconIndex || iconCls) were both blank, that we exepct this and to then hide the action alltogether. As it is now, I don't see how one would use the 'hide' parameter in any meaningful way.

TIA,
Paul

jsakalos
21 Apr 2008, 11:55 AM
CellActions do not support hiding at present.

calverte
28 Apr 2008, 11:05 AM
@border9 or @jsakalos


I figured it out.

Each Cellaction needs to have its own individual var.


var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction:function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-undo':function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});

IE: cellActions, cellActions1, cellActions2
The reason i was having issues with that is because each of the grids uses the same 2 buttons but on a diffrent grid, but oh well that seems to have fixed my errors. not sure if thats the way its supose to be.

Where did you put your cellactions vars in your code?

I've tried to place my var before my grid so that I can reference it in by gridcolumn's plugins attribute without success. If it matters I am using Ext JS 2.0.2.

My CellActions code:



//Code for CellActions
var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction:function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-undo':function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});


My grid:



new Ext.grid.GridPanel({
height: 250, id: "grid1", loadMask: true, plugins: cellActions, store: myJSON, stripeRows: true, view: gridView, width: 600, columns: [
new Ext.grid.RowNumberer({
header: "No.", sortable: true,
dummy: true
}),
{
dataIndex: "investigative_number", header: "Investigative Number", id: "investigative_number", renderer: inv_file_url, sortable: true, width: 120,
dummy: true
},
{
dataIndex: "investigative_title", header: "Investigative Title", id: "investigative_title", sortable: true, width: 390,
dummy: true
},
{
dataIndex: "categorydesc", header: "Category", id: "categorydesc", sortable: true, width: 150,
dummy: true
},
{
dataIndex: "status", header: "Status", id: "status", sortable: true, width: 60,
dummy: true
},
{
dataIndex: "lead_agent", header: "Lead Agent", id: "lead_agent", sortable: true, width: 150,
dummy: true
},
{
dataIndex: "watch_list", header: "Watch", id: "watch_list", sortable: true, width: 40,
dummy: true
},
{
dataIndex: "qtr_hrs", header: "Q Hrs", id: "qtr_hrs", sortable: false, width: 50,
dummy: true
},
{
dataIndex: "total_hrs", header: "Total Hrs", id: "total_hrs", sortable: false, width: 70,
dummy: true
},
{
dataIndex: "completed_date", header: "Completed Date", hidden: true, id: "completed_date", sortable: true, width: 20,
dummy: true
},
{
dataIndex: "unit", header: "Unit", id: "unit", sortable: true, width: 160,
dummy: true
} ], bbar:
new Ext.PagingToolbar({
displayInfo: true, pageSize: 500, store: myJSON, items: [
{
text: "View Comment", handler: myHandler4,
icon: "icons/fam/user_comment.png",
cls: "x-btn-text-icon",

dummy: true
},
{
disabled: true, text: "Save & Submit",
handler:
function () {

Ext.MessageBox.alert("Submit", "Submitting");

}
,

icon: "icons/fam/application_go.png",
cls: "x-btn-text-icon",

dummy: true
},
{
disabled: true, text: "Approve",
handler:
function () {

Ext.MessageBox.alert("Approve", "Approving");

}
,

icon: "icons/fam/add.gif",
cls: "x-btn-text-icon",

dummy: true
},
{
disabled: true, text: "Decline",
handler:
function () {

Ext.MessageBox.alert("Decline", "Declining...");

}
,

icon: "icons/fam/delete.gif",
cls: "x-btn-text-icon",

dummy: true
} ],
dummy: true
}), listeners: {
"rowclick" : {

fn:
function(grid, rowIndex, e) {
var row = grid.getStore().getAt(rowIndex);

Ext.getCmp("sid").setValue(row.data.inv_file_sid);
Ext.getCmp("CurrAllegSubj").setValue(row.data.curr_alleg_subj_text);
Ext.getCmp("investigative_number").setValue(row.data.investigative_number);
Ext.getCmp("investigative_title").setValue(row.data.investigative_title);

//Enable buttons
Ext.getCmp("btnReports").setDisabled(false);

// Enable tabs
Ext.getCmp("pnPriorText").setDisabled(false);
Ext.getCmp("pnCurrAllegSubj").setDisabled(false);
Ext.getCmp("pnCurrtext").setDisabled(false);
Ext.getCmp("pnInvestInfo").setDisabled(false);
Ext.getCmp("pnInternalInfo").setDisabled(false);

//Load panels with content
//Send request via AJAX to load content on demand...
Ext.Ajax.request({
waitMsg: 'Loading...',
url : 'tigertabdatacontent5.cfm' ,
params : { investigative_number : Ext.getCmp("investigative_number").getValue() },
method: 'GET',
scope: this,
success: function ( result, request) {
jsonData = Ext.util.JSON.decode(result.responseText);
//Ext.MessageBox.alert('Ok', result.responseText); //For debugging only
//Ext.MessageBox.alert('Ok', jsonData.query.data[0].inv_file_sid); //For debugging only

//Update tabs
Ext.getCmp("priorText").setValue(jsonData.query.data[0].prior_text);
Ext.getCmp("CurrAllegSubj").setValue(jsonData.query.data[0].curr_alleg_subj_text);
Ext.getCmp("Currtext").setValue(jsonData.query.data[0].current_text);

Ext.getCmp("pnPriorText").html = (jsonData.query.data[0].prior_text);
return jsonData.data;
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'Successfully posted form: '+result.date);
}
});

document.getElementById("investigation_no").innerHTML = row.data.investigative_number;
}
,

dummy: true
}
,
"select" : {

fn:
function(combo, value) {
var row = grid.getStore().getAt(rowIndex);

Ext.getCmp("investigative_number").setValue('');
row.store.filter('sid', combo.getValue());
}
,

dummy: true
}
},

dummy: true
})




FF debug message::-/

sp has no properties...
Ext={version:"2.0.2"};window["undefined"]=window["undefined"];Ext.apply=function...

this.addEvents is not a function...
CellActions(Object listeners=Object callbacks=Object align=left)Ext.ux.grid.CellA... (line 119)
(no name)()tigerpoc.cfm (line 196)
Observable()ext-all.js (line 12)
EventManager()ext-all.js (line 13)
[Break on this error] ,'beforeaction'

I am trying to add my cellactions config to my grid?

Thanks in advance.:)

jsakalos
28 Apr 2008, 12:39 PM
Is there any reason why you cannot configured it same way as it is on examples page?

Code you posted looks good - cannot say what's problem. It seems that there is a scope problem, from the error message. Also, check if you're running latest version of CellActions.

calverte
28 Apr 2008, 1:23 PM
Is there any reason why you cannot configured it same way as it is on examples page?

Code you posted looks good - cannot say what's problem. It seems that there is a scope problem, from the error message. Also, check if you're running latest version of CellActions.

I am using the version of CellActions I downloaded today. (See attached)


My code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>TIGER (Web) > Status Reports</title>

<style type="text/css">
html { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
body { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }

/*html, body { padding: 10px; height: 100%; width: 100%; }*/

/*body h1 { font-family: Verdana; font-size: 23px; padding: 0.5em 0; }
body h2 { font-family: Verdana; font-size: 18px; padding: 1em 0; }*/

#grid1 { margin-bottom: 20px; }
/*#mygridpanel2 { margin-bottom: 20px; }*/
/*#out {width: 100%;}*/


.ext-ie .x-tip {width: 100%;}
body {
font-family:verdana,tahoma,helvetica;
padding:0px;
padding-top:0px !important;
font-size:13px;
background-color:#fff !important;
}

.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }


</style>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../css/examples2.css" />


<link type="text/css" rel="stylesheet" href="/aps/tiger/ext/css/ext-all.css" />

<script type="text/javascript" src="/aps/tiger/ext/ext-base.js"></script>




<script type="text/javascript" src="/aps/tiger/ext/plugins/Ext.ux.Toast.js"></script>

<script type="text/javascript" src="/aps/tiger/ext/ext-all.js"></script>


<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "/aps/tiger/ext/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
});
</script>
</head>

<body>



<div id="out" ></div>




<script type="text/javascript">
Ext.onReady(function(){



var myJSON1 = new Ext.data.JsonStore({
autoLoad: true, remoteSort: false, url: "tigerdata5.cfm", root: "query.data", fields: [ {
type: "string",
name: "investigative_number"
},{
type: "string",
name: "investigative_title"
} ],
dummy: true
});

var myJSON = new Ext.data.JsonStore({
autoLoad: true, remoteSort: false, url: "tigerdata5.cfm", root: "query.data", totalProperty: "totalcount", fields: [ {
type: "string",
name: "investigative_number"
},{
type: "string",
name: "investigative_title"
},{
type: "string",
name: "categorydesc"
},{
type: "string",
name: "status"
},{
type: "string",
name: "lead_agent"
},{
type: "string",
name: "watch_list"
},{
type: "string",
name: "qtr_hrs"
},{
type: "string",
name: "total_hrs"
},{
type: "string",
name: "completed_date"
},{
type: "string",
name: "unit"
},{
type: "string",
name: "inv_file_sid"
} ],
dummy: true
});

var myJSONText = new Ext.data.JsonStore({
autoLoad: false, url: "tigertabdatacontent5.cfm", id: "investigative_number", root: "query.data", fields: [ {
type: "string",
name: "current_text"
},{
type: "string",
name: "curr_alleg_subj_text"
},{
type: "string",
name: "prior_text"
} ],
dummy: true
});

gridView = new Ext.grid.GridView({
forceFit: true,
getRowClass : function (row, index) {
var cls = '';
var data = row.data;
switch (data.status) {
case 'OPEN' :
cls = 'yellow-row'
break;
case 'CLOSE' :
cls = 'green-row'
break;
case 'INITIAL' :
cls = 'yellow-row'
break;
}
return cls;
}
});


inv_file_url = function(val) {
//var sUrl = '';
//var data = row.data;

var data = 'OPEN';
switch (data) {
case 'OPEN' :
sUrl = '<a href="?id=' + val + '&open=1" target="_blank">' + val + '</a>'
break;
case 'CLOSE' :
sUrl = '<a href="?id=' + val + '&close=1" target="_blank">' + val + '</a>'
break;
default:
sUrl = val;
}
return sUrl;
} ;

//Code for CellActions


// window with grid
var win = new Ext.Window({
width:600
,id:'cawin'
,height:400
,layout:'fit'
,border:false
,plain:true
,closable:false
,title:'My Window'
//,items:{xtype:'examplegrid',id:'cagrid'}
});
//win.show();
var myForm = new Ext.FormPanel({
autoHeight: true, autoWidth: true, bodyStyle: "padding: 10px; ", labelAlign: "top", labelWidth: 100, renderTo: "out", width: 350,
url: "submit.cfm",
method: "post",
items: [
{
items: [
{
columnWidth: 0.5,
items: [
{
id: "sid",
name: "sid",
xtype: "hidden"
},
{
id: "assign_role",
name: "assign_role",
xtype: "hidden"
},
new Ext.form.ComboBox({
displayField: "review_level", forceSelection: true, labelStyle: "font-weight:bold;", name: "Review Level", triggerAction: "all", value: "Manager", valueField: "review_level", width: 200,
mode: "local",
displayField: "text",
valueField: "value",
store: new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
["Please select a Review Level...", "Please select a Review Level..."],
["Manager", "Manager"],
["SAC", "SAC"],
["Agent", "Agent"] ]
}),

name: "Review Level",

fieldLabel: "Review Level"
}),
new Ext.form.ComboBox({
displayField: "StatusQtr", forceSelection: true, labelStyle: "font-weight:bold;", mode: "local", name: "Status Report Quarter", selectOnFocus: true, triggerAction: "all", value: "March", valueField: "StatusQtr", width: 200,
mode: "local",
displayField: "text",
valueField: "value",
store: new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
["Please select a quarter...", "Please select a quarter..."],
["OCT", "October"],
["JAN", "January"],
["March", "March"],
["JUN", "June"] ]
}),

name: "Status Report Quarter",

fieldLabel: "Status Report Quarter"
}) ],

border: false,
layout: "form"
},
{
columnWidth: 0.5,
items: [
{
id: "investigative_number",
name: "investigative_number",
xtype: "hidden"
},
{
id: "investigative_title",
name: "investigative_title",
xtype: "hidden"
},
new Ext.form.ComboBox({
displayField: "StatusRptType", emptyText: "Please select...", forceSelection: true, labelStyle: "font-weight:bold;", name: "Status Report Status", triggerAction: "all", value: "Open", valueField: "StatusRptType", width: 200,
mode: "local",
displayField: "text",
valueField: "value",
store: new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
["Please select...", "Please select..."],
["Initial", "Initial"],
["Open", "Open"],
["Close", "Closing"],
["WatchList", "Watch List"] ]
}),

name: "Status Report Status",

fieldLabel: "Status Report Status"
}),
new Ext.form.ComboBox({
allowBlank: false, autoShow: true, displayField: "investigative_number", emptyText: "Select a File...", forceSelection: true, labelStyle: "font-weight:bold;", mode: "local", name: "investigative_id", pageSize: 0, store: myJSON1, triggerAction: "all", valueField: "investigative_number", width: 200, store: myJSON1,
name: "investigative_id",

fieldLabel: "Investigative_id"
}) ],

border: false,
layout: "form"
},
{
columnWidth: 1.0,
items: [ new Ext.grid.GridPanel({
height: 250, id: "grid1", loadMask: true, store: myJSON, stripeRows: true, view: gridView, width: 600, columns: [
new Ext.grid.RowNumberer({
header: "No.", sortable: true,
dummy: true
}),
{
dataIndex: "investigative_number", header: "Investigative Number", id: "investigative_number", renderer: inv_file_url, sortable: true, width: 120,
dummy: true
},
{
dataIndex: "investigative_title", header: "Investigative Title", id: "investigative_title", sortable: true, width: 390,
dummy: true
},
{
dataIndex: "categorydesc", header: "Category", id: "categorydesc", sortable: true, width: 150,
dummy: true
},
{
dataIndex: "status", header: "Status", id: "status", sortable: true, width: 60,
dummy: true
},
{
dataIndex: "lead_agent", header: "Lead Agent", id: "lead_agent", sortable: true, width: 150,
dummy: true
},
{
dataIndex: "watch_list", header: "Watch", id: "watch_list", sortable: true, width: 40,
dummy: true
},
{
dataIndex: "qtr_hrs", header: "Q Hrs", id: "qtr_hrs", sortable: false, width: 50,
dummy: true
},
{
dataIndex: "total_hrs", header: "Total Hrs", id: "total_hrs", sortable: false, width: 70,
dummy: true
},
{
dataIndex: "completed_date", header: "Completed Date", hidden: true, id: "completed_date", sortable: true, width: 20,
dummy: true
},
{
dataIndex: "unit", header: "Unit", id: "unit", sortable: true, width: 160,
dummy: true
} ], bbar:
new Ext.PagingToolbar({
displayInfo: true, pageSize: 500, store: myJSON, items: [
{
text: "View Comment", handler: myHandler4,
icon: "icons/fam/user_comment.png",
cls: "x-btn-text-icon",

dummy: true
},
{
disabled: true, text: "Save & Submit",
handler:
function () {

Ext.MessageBox.alert("Submit", "Submitting");

}
,

icon: "icons/fam/application_go.png",
cls: "x-btn-text-icon",

dummy: true
},
{
disabled: true, text: "Approve",
handler:
function () {

Ext.MessageBox.alert("Approve", "Approving");

}
,

icon: "icons/fam/add.gif",
cls: "x-btn-text-icon",

dummy: true
},
{
disabled: true, text: "Decline",
handler:
function () {

Ext.MessageBox.alert("Decline", "Declining...");

}
,

icon: "icons/fam/delete.gif",
cls: "x-btn-text-icon",

dummy: true
} ],
dummy: true
}), listeners: {
"rowclick" : {

fn:
function(grid, rowIndex, e) {
var row = grid.getStore().getAt(rowIndex);

Ext.getCmp("sid").setValue(row.data.inv_file_sid);
Ext.getCmp("CurrAllegSubj").setValue(row.data.curr_alleg_subj_text);
Ext.getCmp("investigative_number").setValue(row.data.investigative_number);
Ext.getCmp("investigative_title").setValue(row.data.investigative_title);

//Enable buttons
Ext.getCmp("btnReports").setDisabled(false);

// Enable tabs
Ext.getCmp("pnPriorText").setDisabled(false);
Ext.getCmp("pnCurrAllegSubj").setDisabled(false);
Ext.getCmp("pnCurrtext").setDisabled(false);
Ext.getCmp("pnInvestInfo").setDisabled(false);
Ext.getCmp("pnInternalInfo").setDisabled(false);

//Load panels with content
//Send request via AJAX to load content on demand...
Ext.Ajax.request({
waitMsg: 'Loading...',
url : 'tigertabdatacontent5.cfm' ,
params : { investigative_number : Ext.getCmp("investigative_number").getValue() },
method: 'GET',
scope: this,
success: function ( result, request) {
jsonData = Ext.util.JSON.decode(result.responseText);
//Ext.MessageBox.alert('Ok', result.responseText); //For debugging only
//Ext.MessageBox.alert('Ok', jsonData.query.data[0].inv_file_sid); //For debugging only

//Update tabs
Ext.getCmp("priorText").setValue(jsonData.query.data[0].prior_text);
Ext.getCmp("CurrAllegSubj").setValue(jsonData.query.data[0].curr_alleg_subj_text);
Ext.getCmp("Currtext").setValue(jsonData.query.data[0].current_text);
//Ext.getCmp("investInfo").setValue(jsonData.query.data[0].prior_text);
//Ext.getCmp("internalInfo").setValue(jsonData.query.data[0].prior_text);
//window.document.getElementById("internalInfo").innerHTML = jsonData.query.data[0].prior_text;
Ext.getCmp("pnPriorText").html = (jsonData.query.data[0].prior_text);
return jsonData.data;
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'Successfully posted form: '+result.date);
}
});

document.getElementById("investigation_no").innerHTML = row.data.investigative_number;
}
,

dummy: true
}
,
"select" : {

fn:
function(combo, value) {
var row = grid.getStore().getAt(rowIndex);

Ext.getCmp("investigative_number").setValue('');
row.store.filter('sid', combo.getValue());
}
,

dummy: true
}
},

dummy: true
}) ,
{
id: "ino1",
name: "ino1",
xtype: "hidden"
} ],

border: false,
layout: "fit"
},
{
columnWidth: 1.0,
items: [
{
xtype: "box",
autoEl: { cn: "<b>Your are reviewing investigation:</b> #<b id=\"investigation_no\"></b><br /><br />" }
} ],

border: false,
layout: "fit"
} ],
border: false,
layout: "column"
}
,
{
xtype: "tabpanel",
activeTab: "0", autoHeight: false, height: 235, plain: true,
items: [ new Ext.Panel({
bodyStyle: "padding: 10px; ", id: "pnPriorText", layout: "fit", title: "Prior Text", disabled: true, items: [
{
id: "priorText", name: "priorText", value: "N/A", width: 200,

fieldLabel: "Prior Text",
xtype: "textarea"
} ],

dummy: true
}) ,new Ext.Panel({
bodyStyle: "padding: 10px; ", id: "pnCurrAllegSubj", layout: "fit", title: "Subjects/Allegations/Statues", disabled: true, items: [
{
id: "CurrAllegSubj", name: "CurrAllegSubj", value: "N/A", width: 200,

fieldLabel: "Curr Alleg Subj",
xtype: "textarea"
} ],

dummy: true
}) ,new Ext.Panel({
bodyStyle: "padding: 10px; ", id: "pnCurrtext", layout: "fit", title: "Current Text", disabled: true, items: [
{
enableSourceEdit: false, name: "Currtext", value: "N/A",


id: "Currtext",
xtype:"htmleditor"
} ],

dummy: true
}) ,new Ext.Panel({
bodyStyle: "padding: 10px; ", id: "pnInvestInfo", layout: "fit", title: "Investigation Information", disabled: true, items: [
{
enableSourceEdit: false, name: "investInfo", value: "N/A",


id: "investInfo",
xtype:"htmleditor"
} ],

dummy: true
}) ,new Ext.Panel({
bodyStyle: "padding: 10px; ", id: "pnInternalInfo", layout: "fit", title: "Internal Information Page", disabled: true, items: [
{
xtype: "box",
autoEl: { cn: "<b id=\"internalInfo\" ></b>" }
} ],

dummy: true
}) ],



defaults: { autoHeight: false },

dummy: true



}
], tbar:
new Ext.Toolbar({
id: "toolbar1", items: [
{
text: "Exit",
handler:
function () {

Ext.MessageBox.confirm("Exiting", "Exit button clicked!");

}
,


dummy: true
},
{
text: "Save", handler: myHandler,

dummy: true
},
{
text: "File",
menu: {

items: [
{

text: "Exit"
} ]

}
}
,
{
disabled: true, id: "btnReports", text: "Reports",
menu:
new Ext.menu.Menu({
items: [
{
handler: myDetailReport,
text: "Detailed Report"
},
{
handler: myIndividualReport,
text: "Individual"
} ],
dummy: true
}),


dummy: true
},
new Ext.Toolbar.Fill()
,
{
xtype: "box",
autoEl: { cn: "<b>Logged in as:</b>&nbsp; Full Name" }
} ],
dummy: true
}),

defaults: {

dummy: true
}
});
function myHandler() {

if (myForm.getForm().isValid())
{
myForm.getForm().submit({

success: function (f, a) {

Ext.MessageBox.alert("Success", a.result.message);

},


waitMsg:'Saving...'
});
}
else
{

Ext.MessageBox.alert("Validation Error", "Please correct the errors on the form and try again");
}

}

function myHandler2() {

Ext.MessageBox.alert("Detail Status Report", "Running Report...");

}

function myDetailReport() {

//Ext.MessageBox.alert('Ok', Ext.getCmp("investigative_number").getValue()); //For debugging only
window.open("http://igemsdev.epa.gov/aps/tiger/StatusRpt/epa_status_reports_detail.cfm?pid=" + Ext.getCmp("investigative_number").getValue());

}

function myIndividualReport() {

//Ext.MessageBox.alert('Ok', Ext.getCmp("investigative_number").getValue()); //For debugging only
window.open("http://igemsdev.epa.gov/aps/tiger/StatusRpt/epa_status_reports_individual.cfm?pid=" + Ext.getCmp("investigative_number").getValue());

}

function myHandler3() {

Ext.MessageBox.alert("Individual Status Report", "Running Report...");

}

function myHandler4() {

Ext.MessageBox.alert("Button Clicked", "Action would be performed...");
win.show();

}


});
</script>


</body>

</html>


Thanks in advance.

~Calvert

jsakalos
28 Apr 2008, 1:43 PM
Sorry, but I really do not have enough time to debug clients' applications. Or you believe it is a bug in CellActions?

calverte
29 Apr 2008, 6:23 AM
Sorry, but I really do not have enough time to debug clients' applications. Or you believe it is a bug in CellActions?


No disrepect, but I never asked you to debug my application. I asked:



Where did you put your cellactions vars in your code?


I am trying to add my cellactions config to my grid?

I also stated that:


I've tried to place my var before my grid so that I can reference it in by gridcolumn's plugins attribute without success.

Which is the way most of the other plugins work.

I do not believe that it is a bug in CellActions. However, my application works perfectly fine without the CellActions integration, and I only provided the initial and subsequent extract of my application's code to avoid this type of negative and even a little insulting response.:(

That said, this brings me to another question. Isn't CellActions more of an extension rather than a plugin?

mjlecomte
29 Apr 2008, 6:46 AM
avoid this type of negative and even a little insulting response.:(
I suggest you reconsider your approach. Keep in mind this is an international forum and you may misconstrue what someone is trying to say based on language differences.

People provide plugins/extensions/examples out of good faith usually. You'll find few people who support said works better than Saki.


That said, this brings me to another question. Isn't CellActions more of an extension rather than a plugin?Case in point, see another tutorial Saki posted recently: http://extjs.com/forum/showthread.php?t=34021


Where did you put your cellactions vars in your code?
Many of saki's plugins/extensions are on his site http://extjs.eu. All of the code is there. You can see where he put his vars in his code yourself, can't you?

It makes it much easier for people to help you if you post a MINIMALISTIC example so someone doesn't have to weed through superfluous code that has no bearing on the point at hand. If you make a single file example of your attempt then sometimes people will even cut/paste it locally so they can make an easier inspection.

jsakalos
29 Apr 2008, 7:04 AM
@calverte,

as far as I know you are alone with that problem what infers that the problem is outside of CellActions; they proven to work at http://cellactions.extjs.eu

About placing variables: I've written somewhere that you have that many approaches that many developers are there, so there is only one rule: it must work. If you want to see where I have placed variables take a look at http://cellactions.extjs.eu/source.php?file=cellactions.js.

If I was to analyze why it doesn't work in your app I'd need to download it, install it to my server, see how you instantiate and render components, check if scope is correct, step into the code with Firebug, etc. - this I call debugging.

calverte
29 Apr 2008, 7:49 AM
@mjlecomte and @jsakalos

I have great respect and appreciation for forums like this, I utilize them frequently through out the hundreds of applications that I have developed and/or managed the development for. Saki's work is top rate. There is no doubt about that, I've seen it and I know it is. I only wanted to see if CellActions would fit into what we are trying to accomplish without any significant amount of rewrite on our part at this point.

I had already reviewed the "cellactions.js (http://cellactions.extjs.eu/source.php?file=cellactions.js)" before I even made my first post here. I appreciate your time and support with this, and now that I have the answers to my questions, I will continue working on my Proof of Concept without CellActions, since it can not really be implemented as a plugin (http://extjs.com/learn/Manual:Component:Extension_or_Plugin#Plugin) to the grid and continue my search.

Thanks,

Calvert

jsakalos
29 Apr 2008, 7:54 AM
BTW, it the problem must be some simple thing, most likely scope. There is not too much difference if CellActions object is the grid object variable or if it stands out of it...

calverte
29 Apr 2008, 9:36 AM
BTW, it the problem must be some simple thing, most likely scope. There is not too much difference if CellActions object is the grid object variable or if it stands out of it...

Thanks. That's all I needed to now.

I have attached an example built using the Array to Grid example as well as CellActions without using Ext.extend.

Here is an excerpt from my code:

Config code:



//example CellAction implementation

var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction:function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-undo':function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});


Grid:



// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company' },
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'
,cellActions:[{
iconIndex:'Price'
,iconCls:'icon-email'
,qtipIndex:'qtip1'
,style:'background-color:#f0f0f0;'
}]

},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'
,cellActions:[{
iconCls:'icon-key'
,qtip:'Click to Unlock'
,hide:true
,hideMode:'display'
},{
iconCls:'icon-email'
,qtip:'Send E-mail'
}]
},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
view: gridView, // added new grid view
title:'Array Grid'
,plugins:[cellActions]
});



Thanks,

~Calvert

jsakalos
29 Apr 2008, 9:44 AM
The only real problem I see in zip you posted is that line 163 is outside of onReady function. If I comment that line everything works fine here.

Still problems there?

calverte
29 Apr 2008, 9:51 AM
The only real problem I see in zip you posted is that line 163 is outside of onReady function. If I comment that line everything works fine here.

Still problems there?

No problems the zip has been updated.

jsakalos
29 Apr 2008, 9:57 AM
That's fine, so is your problem solved now?

calverte
29 Apr 2008, 10:38 AM
Yes. Once I found out that I could implement CellActions without using Ext.extend I was able to quickly mock up the related example above.:)B)

Thanks,

~Calvert

bmf1972
8 May 2008, 1:44 PM
Hi all,

I am trying to add several cell actions to my grid and I do not understand how to correctly bind each one to its callback handler :(

I tried to bind through the column model, hoping that the right handler will called:


{header: "Company", width: 160, sortable: true, dataIndex: 'company', cellActions:[{
iconCls: "icon-open",
tooltip: "Open",
hide: true,
hideMode: "display",
callback: function(grid, record, action, value, row, col) {
Ext.ux.Toast.msg('[Company]Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>, @{2}:{3}', value, action, row, col);
}
}]},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', cellActions:[{
iconCls: "icon-open",
tooltip: "Open",
hide: true,
hideMode: "display",
callback: function(grid, record, action, value, row, col) {
Ext.ux.Toast.msg('[Price]Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>, @{2}:{3}', value, action, row, col);
}
}]},
Unfortunately (for me), the second handler overrides the first, and the same message appears in both cases :(

Now, I am thinking how can I dispatch to the right handler?
By action? I can't, because both have the same action. By row/column combination? I can't, because these change as the grid gets sorted or columns rearranged :(

I still don't understand why are there callback properties available on each column of the column model, if these cannot be used to bind to different handlers.

What do I miss?
How should I achieve this effect?

TIA,
Adrian.

jsakalos
8 May 2008, 1:51 PM
Preferred method is listen to events. Event is called with this signature:


this.fireEvent('action', this.grid, record, action, value, dataIndex, row.rowIndex, col);

bmf1972
10 May 2008, 4:31 AM
Hmmm... This requires a switch in order to dispatch to the right handler :( I think that it would be easier to bind the handlers through the column model.

jsakalos
10 May 2008, 5:41 AM
What's difficult about switch?

bmf1972
10 May 2008, 5:52 AM
When I saw that I can specify "callback" properties on the column model, the first thing I thought was "my handlers will be called for the specified column". But it didn't happen.

I think that this is a more natural way of binding handlers instead of doing the dispatching myself through a generic handler.

I have extended your CellActions class by overriding one of your "private" methods (hate to do this, but had no simpler option):



CellActionsEx = function(config) {
Ext.apply(config);

//this.colListeners hook them to the generic action listener

this.listeners = this.listeners || {};
this.listeners.action = this.actionHandler;

this.callbackx = this.callbackx || {};

CellActionsEx.superclass.constructor.call(this, config);
}
Ext.extend(CellActionsEx, Ext.ux.grid.CellActions, {
callbackx: null,

actionHandler: function(grid, record, action, value, dataIndex, row, col) {
this.callbackx[dataIndex][action](grid, record, action, value, row, col);
//Ext.ux.Toast.msg("[actionHandler]", "dataIndex: {0}", dataIndex);
},

processActions: function(column) {
var dataIndex, retval;

retval = CellActionsEx.superclass.processActions.call(this, column);

dataIndex = column.dataIndex;

// cellActions loop
Ext.each(column.cellActions, function(action, index) {
// save the extended callback
if(action.iconCls && 'function' === typeof (action.callbackx)) {
this.callbackx[dataIndex] = this.callbackx[dataIndex] || {};
this.callbackx[dataIndex][action.iconCls] = action.callbackx;
}
}, this); // eo cellActions loop

return retval;
}
});
Now the user can specify the following column model:


{header: "Company", width: 160, sortable: true, dataIndex: 'company', cellActions:[{
iconCls: "icon-open",
tooltip: "Open",
callbackx: function(grid, record, action, value, row, col) {
//debugger;
Ext.ux.Toast.msg("[company open handler]", "company: {0}", value);
}
},
{
iconCls: "icon-minus",
tooltip: "Remove",
callbackx: function(grid, record, action, value, row, col) {
//debugger;
Ext.ux.Toast.msg("[company remove handler]", "company: {0}", value);
}
}]},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', cellActions:[{
iconCls: "icon-open",
tooltip: "Open",
callbackx: function(grid, record, action, value, row, col) {
//debugger;
Ext.ux.Toast.msg("[price open handler]", "price: {0}", value);
}
}]},
What do you think?
Please comment,
Adrian.

jsakalos
10 May 2008, 9:55 AM
I understand that you want to use same iconCls in different columns. I was playing a bit with to find out how could it be done easily in the existing code but the problem is that iconCls is not mandatory config option but it can be bound to dataIndex.

So stick with your extension if it works for you.

Note: I'd solve it by creating classes like: icon-open-xxx, icon-open-yyy, icon-open-zzz with same images; no extension would be needed in this case. Nothing against it, just additional code adds to complexity and makes it more difficult to solve issues.

bmf1972
10 May 2008, 4:25 PM
It would be nice if your class would provide a callback method for additional action processing; e.g. processActionsEx(column, action). This would prevent me from overriding your "private" processActions() method and traversing the column.cellActions again :)

I haven't thought before about creating additional CSS classes, however this approach does not seem appropriate if you need to create them programmatically.

jsakalos
11 May 2008, 1:32 AM
Yeah, a userProcessing is the good idea - I've added it, re-download the code and tell me if it's fine for you.

bmf1972
11 May 2008, 1:42 AM
I saw that you have added it outside of the "cellActions loop" -- any special reason not to put it inside the loop?

jsakalos
11 May 2008, 1:45 AM
Just not to call it many times - most user's won't need it. I thought that you can create your own loop, if needed, as you (should) have all data available, right?

jsakalos
11 May 2008, 1:49 AM
Looking at it again, it wouidn't make big difference if it would be called inside loop with signature: (c, data, o) - is this going to be easier for you?

bdbusch
16 May 2008, 11:11 AM
Saki - a wonderful plugin! It's almost exactly what I was looking for. However, I'm fearfully new to Ext.

We have a simple app that has data in a grid. Today, when you select a row in it, the toolbar at the bottom has a button that, when clicked, runs an Ajax call to return some text about why the article is there - this "explain" feature (tied to Lucene) is expensive, so we only do it when the user requests.

I'd like to do a hover over (quick tip) like I've done in another grid. The other one simply shows existing data in the record that didn't "fit" on the grid based on available real estate.

I can't figure out how to simply add a hover over (quick tip) to CALL an ajax to get a string (whatever), and display that text. I'd even be happy to add a special icon of some sort (much like this plugin) that, when hovered over, calls ajax and displays the text.

Any help or pointers would be appreciated - scoured the forums. Landed here. Ext has an "ajax" quicktip, but not in a grid cell.

jsakalos
16 May 2008, 1:54 PM
If you're already aware of Ext having a dynamic (loaded from store) quick tip then you only need to change actionEvent of cellactions to mouseover and load that quick tip from the action event handlers.

Cannot be simpler....

Eric24
22 May 2008, 11:05 AM
Saki,

Kudos on your CellActions extension! I was wondering if it might be possible to use it or extend it to allow a similar function in a grid header? Essentially, add icons to selected header(s) in the grid and trigger appropriate on-click events.

Regards,
Eric

jsakalos
23 May 2008, 1:29 AM
Most likely yes. Of course I'd first consider using header menus that are already there and you can add custom items to them. Only if that wouldn't do I'd go into a plugin/extension.

illuminum
1 Jun 2008, 1:48 AM
i really can't stand your code
. it's super ugly
. do you know what I mean
? sorry if that offends
. I just can't stand looking at code like this
, but your code is super useful so i have to
. sucks for me
. bye
.

jsakalos
1 Jun 2008, 2:32 AM
I understand.

If you cannot stand it, don't read it, don't use it.

BTW, post some your code, I'd like to learn what's beautiful.

PS: My nick is jsakalos, my last name is Sakalos and not saklos, as you write. Don't you miss some letters also when you read my code? Then I really believe it must be ugly...

bmf1972
1 Jun 2008, 2:33 AM
:)

Eric24
9 Jun 2008, 8:19 PM
I've tried everything I can think of, and reviewed every relevant post I could find, but no luck making the cellActions plugin work after reconfiguring the grid. The reconfigure call works as expected and the grid refreshes just fine with the new cm and ds, but my cellActions icons are missing from the "new" grid. If I go back to the "original" configuration (via another call to reconfigure), the cellAction icons show up again. So that seems to tell me that the plugin has applied itself to the cm or the ds, not the grid, but if that's the case, it still makes no sense (both cm's contain the cellactions configuration on the appropriate column definitions). I'm sure there's something simple I'm missing--any ideas?

Thanks!
Eric

PS - It has been brought to my attention that a plug-in is only called on the initial create (or render?) of the "host" component, which explains the effect I'm seeing. I suppose it might be possible to call cellActions' init method after I call reconfigure on the grid, but: 1) that might cause leaks in cellActions, if it wasn't written to be init'able twice; and 2) it seems like a better approach for a grid plug-in (which has a reconfigure option) would be for it to support the reconfiguring (in the sense that it should either listen for the reconfigure event from the grid or possibly override the reconfigure option--or provide one of its own--that would allow the plug-in to "re-init" after the grid reconfigure.

MichaelOstrovsky
18 Jun 2008, 12:08 PM
Thanks for the great plugin.
Hope i can get help with my little problem: i want to show ajax ToolTip when user clicks the cell action ( i have info action icons on some columns , and when user clicks it he should see more detailed info about that entity - for example computer - location - organization columns, with info icons near them, that shows contact info on click ). the only thing missing to acomplish that is the icon's element, that i cant figure out how to get it.

by the way, getting mouse coordinates will also solve the problem, but i could not find how to do it in ext outside of some event like mousemove etc. sorry i know that is offtopic

Thanks in advance

jsakalos
18 Jun 2008, 3:41 PM
I'm not quite sure if I fully understand but isn't it something like this: http://examples.extjs.eu/?ex=one2many ?

MichaelOstrovsky
19 Jun 2008, 12:04 AM
The idea is almost the same, but i need a clear and intuitive ui, so i put the info buttons. i need to respond to mouseover or mouseclick on the icon itself- thats not a problem thanks to you Saki. then i need to show AJAX ToolTip targeted only on the icon ( or on the cell ). so my problem is how to get the icon's element .
having the event itself would solve the problem too, because i could determine the element that fired the event, or the mouse coords passed with the event. but i dont have this info in the callbacks.

thanks

jsakalos
19 Jun 2008, 10:47 AM
If you want click, you just need to listen to plugin's action event - that is the basic purpose of it. If you need mouseover then you can set actionEvent:'mouseover' and again listen to the action event. If you need both simultaneously you need to extend or change it. Use DomQuery to get the icon element in such case.

Joche
1 Jul 2008, 6:18 AM
This is a great piece of work, and I got it up running very easy thanks to excellent documentation.

I do have a question though: I want my cellActions in the absolute rightmost column in my grid and the column next to the left are hidden during certain circumstances. I learned that the 'dataindex' is mandatory otherwise the actions seems to not be thrown. Is there a way in cellactions or the regular columnmodel to render an empty cell in a way that still would be honored by cellactions?

//Joachim

jsakalos
1 Jul 2008, 11:15 AM
Well, if store contains empty column or '' column then it's no problem. You just configure cm as usually, with cellActions and your sql can read: select '' as Actions from ... This way you're sure that field Actions will always contain ''.

hiral
2 Jul 2008, 1:59 AM
I want to call function "onGridCellClick" with parameter like record,grid,value & action which is in my main namespace Example.Grid1 in this.cellActions listner actions. I past my complete code here

[code]
// vim: sw=4:ts=4:nu:nospell:fdc=4
/**
* Ext.ux.grid.RecordForm Plugin Example Application
*
* @author Ing. Jozef Sak

jsakalos
2 Jul 2008, 2:11 AM
And what is question? (Sorry, I have no time to read or debug lengty codes.)

kerbo
7 Jul 2008, 2:38 PM
Small little issue in configuration. If you configure cellActions with a basic object:


cellActions:
{
iconCls:'myIcon'
,qtip:'Show'
}

the icon in the cell will sit on top of the cell text. If you configure as an array:


cellActions:
[{
iconCls:'myIcon'
,qtip:'Show'
}]

everything works ok. It took me a while to figure this one out.

jsakalos
7 Jul 2008, 11:40 PM
Well, documentation clearly states that cellActions has to be array.

kerbo
8 Jul 2008, 11:36 AM
Yes, but it seems the normal convention in config objects is to accept both, that's why I made the mistake.

I suspect others will make the same mistake, that's why I posted.

Anyway, great extension - much needed. Thanks.

Shogun
15 Jul 2008, 2:13 AM
First of all this is a great extension.
But it seems that i'm unable to render my grid to a tabpanel.:((

For creating the grid I used your code at http://cellactions.extjs.eu/

In my application I have a checkbox. This checkbox realize the tab creation:


var allCountryBox = new Ext.form.Checkbox({
id: 'allCountry-checkbox',
boxLabel: 'all countries',
inputType: 'checkbox',
renderTo: 'all_country_checkbox'
});

// Event Handler
allCountryBox.on('check', function() {
handleAllCountryBox(this);
});

function handleAllCountryBox(checkbox) {
// if tabpanel AND gridtab already exist, return
if(myTabPanel && myTab)
{
myTab.show();
return;
}

var allCountryGrid = createAllCountryGrid();

myTabPanel.add({
title: 'All country features',
id: 'all-feature-tab',
closable:true,
autoScroll:true,
iconCls: 'all-feature-tab',
layoutOnTabChange: true
// either like this: rendering the returned grid
items:[allCountryGrid],
// or: rendering the registered (grid) component
// items: {xtype:'allCountryFeatureGrid',id:'all-feature-grid'},
// both isn't working
}).show();
}
Grid creation with your cellaction-extension:


var myColumnModel = new Ext.grid.ColumnModel([
{
id: 'feName',
header:'Feature',
sortable: true,
dataIndex: 'feName',
autoWidth: true
}, {
header:'Country',
sortable: false,
dataIndex: 'coItem'
}, {
header:'Contact-Person',
sortable: false,
dataIndex: 'feContactName',
cellActions:[{
iconCls:'icon-email'
,qtip:'Send E-mail'
}]
}
]);
var myGrid = Ext.extend(Ext.grid.EditorGridPanel, {
initComponent:function() {
this.cellActions = new Ext.ux.grid.CellActions({
listeners:{
//like your code
}
,align:'left'
});
// configure the grid
Ext.apply(this, {
store:featureAllStore,
cm: myColumnModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),

plugins:[this.cellActions],
view: new Ext.grid.GroupingView({
autoFill: true,
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
emptyText: "No data available"
}),
autoExpandColumn: 'feName',
autoHeight: true,
border: false,
enableColLock: false,
loadMask: true,
stripeRows:true
}); // eo apply

// add paging toolbar
this.bbar = new Ext.PagingToolbar({
// like your code
});

// call parent
myGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
//like your code
} // eo function onRender
// }}}

}); // eo extend

// register component
Ext.reg('allCountryFeatureGrid', myGrid);

return myGrid;
}
I also tested your code at http://examples.extjs.eu/?ex=gridintab for realizing grid output within a tab. The difference to my application is, that my tabpanel already exists when I'd like to create my grid tab. And I can't get it done.

When I render the grid into a window, like in your code in cellaction.js, its working. But my tabpanel still stays empty.

I would really appreciate if you can help me. THX

suzie
15 Jul 2008, 3:06 AM
Hi everybody,

I tried to put a Ext.data.GroupingStore in hte Ext.ux.grid.CellActions plugin example and I have a strange display when grouping by the column that have cell actions.

See attachment..

Could be a bug ?

Thanx for help

jsakalos
15 Jul 2008, 6:22 AM
What happens if you remove the plugin?

Shogun
17 Jul 2008, 2:39 AM
sry saki - are you talking with me?
Have you already read my reply?
I'm unable to show my grid within a tab.

jsakalos
17 Jul 2008, 1:08 PM
sry saki - are you talking with me?
Have you already read my reply?
I'm unable to show my grid within a tab.

What if you remove CellActions plugin? Does the grid render well? If not, your problem is not related to the plugin.

BTW, have you seen http://examples.extjs.eu/?ex=gridintab ?

emredagli
21 Jul 2008, 2:30 AM
Dear Saki,
Firstly, thanks for cellactions plugin.
I think my problem is simple but I couldn't manage.
My problem is,
Reviews image is long and it clips my image like that:
http://exttest.ashop.com.au/problem3.bmp

Even I change actionWidth property it doesn't changed.
I want Special column images remains (they are short).
My code is,
Extend Part:


Ext.grid.ProductMainGrid = Ext.extend(Ext.grid.EditorGridPanel,{

initComponent: function(){

this.action = new Ext.ux.grid.RowActions({
header: 'Actions',
align: 'center',
actions:[{
iconCls: 'icon-edit-record',
tooltip: 'View Details'
},{
iconCls: 'icon-clone-record',
tooltip: 'Clone Product'
},{
iconCls: 'icon-minus',
tooltip: 'Delete Product'
}]
});

this.cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {

switch(action){
case 'product-categoryspecial-active':
record.set( 'CategorySpecialToolTip', 'Activate Category Special');
record.set( 'CategorySpecialIconIndex', 'product-categoryspecial-deactive');
record.set( 'Products.CategorySpecial', '0');
break;
case 'product-categoryspecial-deactive':
record.set( 'CategorySpecialToolTip', 'Deactivate Category Special');
record.set( 'CategorySpecialIconIndex', 'product-categoryspecial-active');
record.set( 'Products.CategorySpecial', '1');
break;
case 'product-homepagespecial-active':
record.set( 'HomepageSpecialToolTip', 'Activate Homepage Special');
record.set( 'HomepageSpecialIconIndex', 'product-homepagespecial-deactive');
record.set( 'Products.HomepageSpecial', '0');
break;
case 'product-homepagespecial-deactive':
record.set( 'HomepageSpecialToolTip', 'Deactivate Homepage Special');
record.set( 'HomepageSpecialIconIndex', 'product-homepagespecial-active');
record.set( 'Products.HomepageSpecial', '1');
break;
case 'product-review-exist':
// Review sayfasina yonlendirilecek.
break;
case 'product-review-notexist':
// birsey yapilmayacak.
break;
}
record.set( 'Dummy', '1');
record.set( 'Dummy', '');
}
},
align:'left'
//actionWidth: 50
});


this.action.on({
action:function(grid, record, action, row, col){
switch(action){
case 'icon-edit-record':
myApp.editEntry(grid, record, action, row, col); //record.id
break;
case 'icon-clone-record':
myApp.cloneEntry(grid, record, action, row, col); //record.id
break;
case 'icon-minus':
myApp.deleteEntry(grid, record, action, row, col);
break;
}
}
});

Ext.apply(this, {
columns: this.columns.concat(this.action),
plugins:[this.action, this.cellActions]
});

Ext.grid.ProductMainGrid.superclass.initComponent.apply(this, arguments);

},

onRender: function(){
Ext.grid.ProductMainGrid.superclass.onRender.apply(this, arguments);
}
});

Usage:


{
id:'cmReviews',
header: "Reviews",
hidden :false,
dataIndex: 'ReviewCount',
width: 60,
sortable: true,
cellActions:[{
iconIndex:'ReviewCountIconIndex',
qtipIndex:'ReviewCountToolTip',
//style:'width:60;'
//actionWidth: 50
}]
},


Thanks for your attention.

jsakalos
21 Jul 2008, 8:08 AM
Set actionWidth low enough 15-16 or so and use align:'left'.

emredagli
21 Jul 2008, 9:36 AM
Dear Saki,
I found the problem.
changing the code,
style:'width:60;' --> style:'width:60px;'
I know that there must be simple way to do that.

is there a way to make it automatically. I mean getting the image size and adjusting it.

jsakalos
21 Jul 2008, 12:09 PM
It is done that way. Take a look at the source code, especially comments.

emredagli
22 Jul 2008, 2:27 AM
Dear Saki,
thanks for your reply, you are right.

I couldn't make images align center. How can I manage this?

thanks.

jsakalos
24 Jul 2008, 2:35 AM
You need to adjust some css. Use Firebug and explore rendered html to see which css rule(s) to override.

roberthenniger
29 Jul 2008, 8:39 AM
Hi, is it possible that the plugin is not working as expected when the column model is updated.
I wrote a class (based on the autogrid class) which reconfigures the columnModel itself after finishing the ajax.
The cellActions are not working then.
I saw that another user had the same problem but i saw no reply to uts message.

Thanks in advance.
Robert

roberthenniger
29 Jul 2008, 8:51 AM
Hi, Sorry.
I know that i posted already my problem but i thought it would be good to have the description from eric24 also associated with my description.

Best regards

Robert


I've tried everything I can think of, and reviewed every relevant post I could find, but no luck making the cellActions plugin work after reconfiguring the grid. The reconfigure call works as expected and the grid refreshes just fine with the new cm and ds, but my cellActions icons are missing from the "new" grid. If I go back to the "original" configuration (via another call to reconfigure), the cellAction icons show up again. So that seems to tell me that the plugin has applied itself to the cm or the ds, not the grid, but if that's the case, it still makes no sense (both cm's contain the cellactions configuration on the appropriate column definitions). I'm sure there's something simple I'm missing--any ideas?

Thanks!
Eric

PS - It has been brought to my attention that a plug-in is only called on the initial create (or render?) of the "host" component, which explains the effect I'm seeing. I suppose it might be possible to call cellActions' init method after I call reconfigure on the grid, but: 1) that might cause leaks in cellActions, if it wasn't written to be init'able twice; and 2) it seems like a better approach for a grid plug-in (which has a reconfigure option) would be for it to support the reconfiguring (in the sense that it should either listen for the reconfigure event from the grid or possibly override the reconfigure option--or provide one of its own--that would allow the plug-in to "re-init" after the grid reconfigure.

jsakalos
29 Jul 2008, 1:30 PM
I also have a reconfigurable grid and I needed to code a special plugin support into it. Sorry I won't publish this grid nor its code fragments. I personally don't use cell actions with it but row actions work very well with that support. Plugins config is delivered from the server as part of the metaData.

tfrugia
4 Aug 2008, 1:20 PM
Saki,

This plugin is fantastic. I do have one issue I hope you can help me with.

I have a grid inside of a tab panel using cell actions, and it works great. If I close the panel that contains the grid, and try and reopen the panel, I get the following errors:



too much recursion
[Break on this error] Ext={version:"2.1"};window["undefined"]=...|new Date()).getTime()-this.getTime())};
ext-base.js (line 9)
too much recursion
[Break on this error] var val = c.origRenderer(value, cell, record, row, col, store);
CellAction.js (line 231)


When I comment out the plugin line on the grid, it works fine. Here are some short snippets that I hope will help.



if(!cellActions)
cellActions = new Ext.ux.grid.CellActions({
//id: 'cellActionsID',
listeners:{
action:function(grid, record, action, value) {

}
}
});

......

if(!attendanceByMonthGrid){
attendanceByMonthGrid = new Ext.grid.GridPanel({
//id: 'attendanceByMonthGrid1',
title: 'Attendance by Month',
store: dsAttendanceByMonth,
cm: new Ext.grid.ColumnModel(cmGridAttendanceByMonth),
plugins: cellActions,
enableNoGroups: false,
autoHeight: true
});
}

......

return new Ext.TabPanel({
activeTab: 0,
defaults: {
hideMode: 'offsets'
},
height: 720,
items: [{
xtype: 'panel',
title: 'Attendance by Month',
layout: 'form',
labelWidth: 185,
items: [attendanceByMonthMap,attendanceByMonthGrid]
},{
...
}
});


I can put together a simple test app if needed, but I am sure it is something simple. These errors only occur when I close the tab and then reopen it.


Thanks!

jsakalos
5 Aug 2008, 12:33 AM
Could be that sth is not destroyed properly. A showcase is needed in this case...

Krzysztof
26 Aug 2008, 4:08 AM
Hello,

Thank you for the great plugin. I have a question. Is it possible to change the icon in the cell when the user hits the icon. I want something like a disabled button after user clicks it. How to do that?

One more thing. The doc for the plugin says that callback takes 7 parameters like action event but in the code the callback is invoked with 6 parameters:




//call callback if any
if(this.callbacks && 'function' === typeof this.callbacks[action]) {
this.callbacks[action](this.grid, record, action, value, row.rowIndex, col);
}


There is no dataIndex variable. Is it ok. I mean it works but is dataIndex an important variable? What I can use it for?

Thanks

deepti
26 Aug 2008, 4:12 AM
Lucian here...this is what I want, thank you very much. I also added support for mouseover/mouseout events by modifying the main file. Anybody interested?...~o)


Although its quite old of a post bt I urgently require this. Can u post this solution

deepti
26 Aug 2008, 5:37 AM
I need mouseover/mouseout events for cellActions. Can anyone post it.

Krzysztof
26 Aug 2008, 6:13 AM
I need mouseover/mouseout events for cellActions. Can anyone post it.

You will find the solution in this thread. You need to change actionEvent from default 'click' in CellAction to the event you want or something like that, but the exact solution is in this thread on previous pages.

jsakalos
26 Aug 2008, 11:50 AM
@Krzysztof, icon effects can be achieved by css if you don't need any other logic behind it. The callback signature was bug - I've fixed it now. Thank you for pointing out.

Krzysztof
27 Aug 2008, 2:34 AM
@jsakalos

Thank you for the suggestion. But is it possible to swap the icons when user clicks on them? I need something like connected/disconnected icons to show when user clicks on them. A user is able to connect to an item and I need to show disconnected icon indicating that the item is not connected but when the user connects then the icon should change to connected icon. Is it possible to do that after the grid is rendered? Or maybe I should use dynamic icons and change the underlying store object when user clicks then the new value in store will change the icon?

In addition to that some items may be disconnected only, so after clicking on disconnect the icon should be disabled, but this is not so important I can just not react to user clicks after disconnection event.

deepti
27 Aug 2008, 3:56 AM
You will find the solution in this thread. You need to change actionEvent from default 'click' in CellAction to the event you want or something like that, but the exact solution is in this thread on previous pages.


Thanx for the reply. I got it working bt there is another problem I'm facing now.
I changed 'click' in CellAction to 'mouseover' and thus used it in displaying a menu when i mouseover the icon.
Now, I need to hide that menu when user mouseouts from menu. If i try to add 'mouseout' listener to 'menu', then it gets called even when i move mouse from one menu-item to other.
Instead it should be called when user moves out of the entire menu..
Bt this is how it is impelmented in ExtJs.
How can I make it work the way I want.

jsakalos
27 Aug 2008, 6:25 AM
@jsakalos

Thank you for the suggestion. But is it possible to swap the icons when user clicks on them? I need something like connected/disconnected icons to show when user clicks on them. A user is able to connect to an item and I need to show disconnected icon indicating that the item is not connected but when the user connects then the icon should change to connected icon. Is it possible to do that after the grid is rendered? Or maybe I should use dynamic icons and change the underlying store object when user clicks then the new value in store will change the icon?

In addition to that some items may be disconnected only, so after clicking on disconnect the icon should be disabled, but this is not so important I can just not react to user clicks after disconnection event.
If the icon is linked to the store it should be enough to change the value in the store and the icon changes automatically.

Krzysztof
27 Aug 2008, 1:07 PM
@jsakalos
Thanks I will try it that way.

@deepti
I am a newbee to ExtJs as well but based on the description, you may check if you set the listener to the menu container not the menu items, you can also set the right 'scope' parameter and other configuration options. You will find all configuration parameters in the docs for these objects.

deepti
27 Aug 2008, 8:32 PM
@Krzysztof (http://extjs.com/forum/member.php?u=46522)

Thanx for the help, I got another thread which deals with the same problem.
I don't know abt other events bt for mouseout, even if you set the Listener on menu container, it gets triggered while u mouseout of the menu Items.
Lot of people have faced the same problem, so that seems to be a known issue with Ext and there is some work around to get it working.

tfrugia
9 Sep 2008, 8:26 AM
Could be that sth is not destroyed properly. A showcase is needed in this case...

I was able to solve this (although might not be the best solution). Below is the change:



,init:function(grid) {
this.grid = grid;
// grid.on({scope:this, render:this.onRenderGrid});
grid.afterRender = grid.afterRender.createSequence(this.onRenderGrid, this);

var cm = this.grid.getColumnModel();
Ext.each(cm.config, function(c, idx) {
if('object' === typeof c.cellActions) {
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);


} // eo function init


Change to:



,init:function(grid) {
this.grid = grid;
// grid.on({scope:this, render:this.onRenderGrid});
grid.afterRender = grid.afterRender.createSequence(this.onRenderGrid, this);

var cm = this.grid.getColumnModel();
Ext.each(cm.config, function(c, idx) {
if('object' === typeof c.cellActions) {
if(c.renderer != null){
c.renderer = null;
}
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);


} // eo function init

jsakalos
9 Sep 2008, 10:41 AM
Have you tested it also with a custom renderer together with CellActions in one column?

tfrugia
15 Sep 2008, 9:56 AM
:) - I was coming back here to report this exact problem, and yes the renderer is not called. I guess I didn't think that all the way through.

Does this provide any insight into the 'too much recursion' issue? Here is the line of code:



c.origRenderer = cm.getRenderer(idx);


I get this if I create a tab that has the grid inside, close the tab, and then open it again. I know it is something not getting destroyed properly. We are not using autoDestroy: false. Can you suggest anything to look for? If not, I will work on getting you that showcase.

tfrugia
15 Sep 2008, 10:39 AM
I was building a showcase and discovered the issue (my code, of course). It was an object design issue on my end.

Thanks for the help

jsakalos
15 Sep 2008, 10:43 AM
Hmm, this recursion problem doesn't make sense to me. getRenderer is as simple as:

getRenderer : function(col){
if(!this.config[col].renderer){
return Ext.grid.ColumnModel.defaultRenderer;
}
return this.config[col].renderer;
},

JeffBurr
10 Oct 2008, 7:24 AM
Saki -

If you have decided to give up on IE, I can sympathize, but did you know that your web site - at least the example pages for this and other plugins - throws an error in IE?

It is: "Line 1118... Exception thrown and not caught"

jsakalos
11 Oct 2008, 1:34 AM
Yes, something must have changed in Ext, I suspect early onReady. I'll try to fix it but it has quite low priority. Examples are for developers and I cannot imagine that sbdy develops in IE.

vizcano
22 Oct 2008, 12:13 AM
Hi

I'm having a little problem with this extension, where is <link rel="shortcut icon" href="../img/extjs.ico"> file? I do not have it anywere... The extension seems to work but i'm sure i'm doing something wrong with the icons, i mean, i can see a blank square in the cell, and if i rollover it i see the qtip i've setted, but i can't see the icon i've defined in the iconIndex property and there is no error in firebug... I've defined a couple of styles in icon.css they are refering where the images are from the css file (i'm posting them below), and the don't work, but the pre-defined styles don't work too.



.icon-fm_seleccion {
background-image:url(../../../images/fm_seleccion.png) ! important;
}

.icon-fm_noseleccion {
background-image:url(../../../images/fm_noseleccion.png) ! important;
}

.icon-cm_seleccion {
background-image:url(../../../images/cm_seleccion.png) ! important;
}

.icon-cm_noseleccion {
background-image:url(../../../images/cm_noseleccion.png) ! important;
}


I've seen that in your example the css takes the name of the iconIndex as "ux-cell-action icon disk" but i only get "ux-cell-action" Can you help me? Thank u so much

jsakalos
22 Oct 2008, 1:15 AM
Check if the icon/action name is contained in the store filed pointed to by iconIndex. If you set iconIndex it is expected that icon names are in the store.

vizcano
22 Oct 2008, 1:40 AM
Thanks for the solution :)

smartinec
29 Oct 2008, 4:15 PM
I am also seeing the "too much recursion" error with the cellactions. Can you describe how you eventually solved this issue? I have a Grid that links to a "detail" Grid that opens in a Ext Window. The first time, the detail grid renders fine with cellactions. If I close the detail window and then click to open it again, I get the error befor the grid is rendered. This process works fine w/o cellactions plugin. Firebug is pointing to this line in cellactions code:


var val = c.origRenderer(value, cell, record, row, col, store);
I was building a showcase and discovered the issue (my code, of course). It was an object design issue on my end.

Thanks for the help

MJFox
1 Nov 2008, 6:23 AM
I can't get it to run :-?

here's my code:

[code]
Ext.onReady(function(){

title = "Kommentare mit Erinnerungen";
alias = "comments_with_reminder";

document.title = title;

Ext.menu.RangeMenu.prototype.icons = {
gt: 'grid/img/greater_then.png',
lt: 'grid/img/less_then.png',
eq: 'grid/img/equals.png'
};
Ext.grid.filter.StringFilter.prototype.icon = 'grid/img/find.png';

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var ds = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url:'grid/get_list_data.php?type=' + alias
}),

reader: new Ext.data.JsonReader({
id: 'id',
totalProperty: 'total',
root: 'data'
}, Ext.data.Record.create([
{name:'ID'},
{name:'object'},
{name:'objectID'},
{name:'name'},
{name:'user'},
{name:'remind_user'},
{name:'remind_date',type: 'date', dateFormat: 'timestamp'},
{name:'date',type: 'date', dateFormat: 'timestamp'},
{name:'comment'}])),

sortInfo: {field: 'remind_date', direction: 'DESC'},
remoteSort: true
});

var filters = new Ext.grid.GridFilters({
filters:[
{type: 'numeric', dataIndex: 'ID'},
{type: 'string', dataIndex: 'object'},
{type: 'string', dataIndex: 'name'},
{type: 'string', dataIndex: 'user'},
{type: 'string', dataIndex: 'remind_user'},
{type: 'date', dataIndex: 'remind_date'},
{type: 'date', dataIndex: 'date'},
]});

function renderObject(value, p, record){
var typ = "";
switch(record.data.object)
{
case "contact":
typ = "Kontakt";
break;
case "contact_person":
typ = "Ansprechpartner";
break;
case "campaign":
typ = "Kampagne";
break;
case "campaign_wave":
typ = "Kampagnen-Welle";
break;
case "product":
typ = "Seiete";
break;
default:
typ = record.data.object;
}
return String.format(
'<b>{0}</b>',
typ);
}

function renderLink(value, p, record){
var id = record.get('objectID');
return String.format(
'<b><a href="{0}.php?id={1}" target="_blank">{2}</a></b>',
record.data.object, id, record.data.name);
}

function renderRemindeDate(value, p, record) {
if (Ext.util.Format.date(value,'Y')>1970)
return Ext.util.Format.date(value,'d.m.Y');
else
return "-";
}

var cm = new Ext.grid.ColumnModel([
{dataIndex: 'object', header: 'Objekt', renderer: renderObject},
{dataIndex: 'name', header: 'Name', renderer: renderLink, sortable: false},
{dataIndex: 'user', header: 'Von'},
{dataIndex: 'date',header: 'Am', renderer: Ext.util.Format.dateRenderer('d.m.Y')},
{dataIndex: 'remind_user', header: 'Erinnerung f&uuml;r'},
{dataIndex: 'remind_date',header: 'Erinnerung am', renderer: renderRemindeDate, cellActions: {
iconCls:'icon-minus',
qtip:'l

jsakalos
2 Nov 2008, 2:00 AM
First, try to render the grid from store load event. If it doesn't help compare your code with the example at http://cellactions.extjs.eu and find the difference that may cause the problem.

emredagli
26 Nov 2008, 12:20 PM
Hii Mr. Saki,
I am using your cell action plugins,
And In one of the my column there are only 4 icons without any text. Like that:


{
id:'cmStatus',
header: "Status",
dataIndex: 'dummy',
width: 150,
sortable: false,
cellActions:[{
iconIndex:'StatusIconIndex',
qtipIndex:'StatusToolTip',
align:'left',
paddingLeft: 5
},{
iconIndex:'PrioirtyIconIndex',
qtipIndex:'PrioirtyToolTip',
align:'left'
},{
iconIndex:'PinIconIndex',
qtipIndex:'PinToolTip',
align:'left'
},{
iconIndex:'AttachmentIconIndex',
qtipIndex:'AttachmentToolTip',
align:'left'
}]
}

To do this I have to give another dataIndex field like 'dummy',
And I set dummy field in store like that:


{name: 'dummy', mapping: 'dummy', defaultValue:''},


If user clicks the this column header I want to sort by another field which is 'status'.
If I define dataIndex as 'status', cell actions plugin shows status value placed right of the icons. I don't want to be showed this value. I try to write renderer function But I couldn't manage this. Like that:


renderer: function(data) {
return '';
},

But it is not looked good.
What should I do?

Thanks for your advance...

jsakalos
26 Nov 2008, 1:30 PM
To tell truth, I'm not quite sure what problem are you trying to solve. Sorting?

emredagli
27 Nov 2008, 12:47 AM
Dear Saki,
Origin of my problem is:
I don't want to show value which is comes from dataIndex. I only want to show icons, not text values...
To do this, I try this:


renderer: function(data) { return '';},

But if I do this My columns becomes:
http://dev.ashopcommerce.com/ExtJS-Forum-Questions/problem9.jpg
Bottom of the icons are erased...

Thanks for your advance.

jsakalos
27 Nov 2008, 2:21 AM
You don't need your renderer then. Do it just as in example http://rowactions.extjs.eu - icons there come from store.

emredagli
27 Nov 2008, 4:04 AM
Dear Saki,
Thanks for your reply, You opened my eyes.
I do not have to use cell actions to do this. You are right.
But what is the main difference between row actions and cell actions?

Thank you.

jsakalos
27 Nov 2008, 4:11 AM
RowActions operate on rows, CellActions on cells.

Luxy
26 Feb 2009, 9:59 AM
Vertically? Really? You can try to play with templates and css rules. It should be feasible and not that difficult.

Can you please let me know how to change css/template files to have
multiple vertically stacked cell actions in a single grid cell.

jsakalos
26 Feb 2009, 10:13 AM
Yeah, I might have answered that, I admit, nevertheless, I have no clue what are you asking.

Luxy
26 Feb 2009, 10:23 AM
This is the conversation you had
https://extjs.com/forum/images/statusicon/post_old.gif 04-18-2008, 03:00 PM
Chris in Cambridge (https://extjs.com/forum/member.php?u=5803) https://extjs.com/forum/images/statusicon/user_offline.gif vbmenu_register("postmenu_155274", true);
Ext JS Premium Member
Join Date: Jun 2007
Posts: 18
https://extjs.com/forum/images/reputation/reputation_pos.gif


https://extjs.com/forum/images/icons/icon1.gif
Saki,

Great work, thanks. Very useful.

How would you gauge the difficulty of having multiple (vertically stacked) cell actions in a single grid cell.

Thanks!

https://extjs.com/forum/images/buttons/quote.gif (https://extjs.com/forum/newreply.php?do=newreply&p=155274) https://extjs.com/forum/images/buttons/multiquote_off.gif (https://extjs.com/forum/newreply.php?do=newreply&p=155274) https://extjs.com/forum/images/buttons/quickreply.gif (https://extjs.com/forum/newreply.php?do=newreply&p=155274)

Chris in CambridgeView Public Profile (https://extjs.com/forum/member.php?u=5803)Send a private message to Chris in Cambridge (https://extjs.com/forum/private.php?do=newpm&u=5803)Find all posts by Chris in Cambridge (https://extjs.com/forum/search.php?do=finduser&u=5803)Add Chris in Cambridge to Your Buddy List (https://extjs.com/forum/profile.php?do=addlist&userlist=buddy&u=5803)
#42 (https://extjs.com/forum/showthread.php?p=155328#post155328) https://extjs.com/forum/images/buttons/reputation.gif (https://extjs.com/forum/reputation.php?p=155328) vbrep_register("155328") https://extjs.com/forum/images/buttons/report.gif (https://extjs.com/forum/report.php?p=155328)
https://extjs.com/forum/images/statusicon/post_old.gif 04-18-2008, 04:39 PM
https://extjs.com/forum/image.php?u=2178&dateline=1182686579 (https://extjs.com/forum/member.php?u=2178)jsakalos (https://extjs.com/forum/member.php?u=2178) https://extjs.com/forum/images/statusicon/user_online.gif vbmenu_register("postmenu_155328", true);
Ext JS - Support Team
Join Date: Apr 2007
Location: Slovakia
Posts: 10,272
https://extjs.com/forum/images/reputation/reputation_pos.gif
http://mystatus.skype.com/smallicon/jsakalos (https://extjs.com/forum/showthread.php?t=30411&page=5#)

https://extjs.com/forum/images/icons/icon1.gif
Vertically? Really? You can try to play with templates and css rules. It should be feasible and not that difficult.
__________________
Jozef Sakalos, aka Saki



And I want to have same grid cell. In your cellactions plugin it creates icon actions side by side. I want to have them vertically.

jsakalos
26 Feb 2009, 10:25 AM
Has Cambridge somehow solved it? 'Cause I haven't. You just need to patch CellActions internal templates and/or css - I cannot say off hand which ones and how.

Luxy
26 Feb 2009, 10:28 AM
I am not sure about Cambridge. I am going to try by myself.Thanks.

Luxy
26 Feb 2009, 11:05 AM
I found a way to do this. But I am not sure that is the right way or not.
I changed Ext.ux.grid.CellActions.js code in tpl Template to this -

,tpl:'<div class="ux-cell-value" style="padding-left:2px">'
+'<tpl if="\'left\'!==align">{value}</tpl>'
+'<br><div class="ux-cell-actions<tpl if="\'left\'===align"> ux-cell-actions-left</tpl>" style="width:{width}px">'
+'<tpl for="actions"><div class="ux-cell-action {cls}" qtip="{qtip}" style="{style}">&#160;</div></tpl>'
+'</div>'
+'<tpl if="\'left\'===align">{value}</tpl>'
+'<div>'


Now it is loading side by side.

jsakalos
26 Feb 2009, 12:34 PM
Isn't it enough if you drop float:left from the css? You need to have higher grid rows too.

Luxy
27 Feb 2009, 7:34 AM
This ia whole different topic.
How to make grid headers as link

jsakalos
27 Feb 2009, 10:09 AM
Start please a new thread for that topic. BTW, I've read this question before - search forums please.

Luxy
27 Feb 2009, 10:36 AM
I have created a new thread. http://extjs.com/forum/showthread.php?p=295724#post295724


Yes I found that old thread about header links. It was not very helpful.
http://extjs.com/forum/showthread.php?p=295575

Thanks

MD
26 May 2009, 9:33 AM
Saki, I saw that you've already updated RowActions for 3.x -- will you also be doing the same for CellActions?

MD

jsakalos
26 May 2009, 11:33 AM
Could you test if same adjustments as for RowActions help in the case of CellActions? The RowActions thread (the end of) contains modifications with explanations.

MD
26 May 2009, 6:56 PM
Could you test if same adjustments as for RowActions help in the case of CellActions? The RowActions thread (the end of) contains modifications with explanations.

Sure thing. I planned to integrate both into my current project during this week, so I'll let you know how I fare with applying the same mods to CellActions.

MD

jsakalos
26 May 2009, 11:50 PM
Good. If there will be anything outstanding after your patches, I'll take a look.

Chods
5 Jun 2009, 12:41 AM
Hi Saki

This is a great extension, exactly what i was looking for. I now have 4 actions in the 1 column. i had to create a renderer which returned nothing as i did not want to display the data for the column, just some icons.


renderer: function(){ return }, This is fine. I have an issue though as on my grid I have a tbar with a reset button, this clears the the state and rebuilds the column model to return the grid to its default state.

This worked until i implmented cell actions. For some reason the cell actions do not re-render at all. The column is completely blank after reset. Do you know whay this might be?



// Clear saved settings
Ext.state.Manager.clear(that.grid.stateId);
Ext.state.Manager.set("ViewAll", true);

// Paging bar override as there is no public setPageSize method that I could find???
that.pagingBar.setPageSize(that.store.getTotalCount());

// Refresh the column model
that.columnModel.setConfig(that.columns());
Regards

Chods

jsakalos
5 Jun 2009, 12:15 PM
No idea from the code you posted. BTW, I guess that RowActions are better for your purpose, judging from your description.

humble
9 Jun 2009, 12:19 PM
Saki,
Thank you for sharing all of your hard work. You are an exemplary master and a great leader in the community and we all learn faster and better because of you. I have CellActions working and what a great plugin. After quite a bit of testing, I created some new classes and
finally see how the grouping is working. And in turn this makes the qtips very useful. I have searched all cell/rowaction posts and can’t find much on
‘click’ action into a Managed Iframe. I have a MIF working well with CellActions from the store or in the grid from (<a>html text) but,
I still have not found the correct way to use:
href=”anyPage.html” and hrefTarget or just target=”MIFframeName” - on a cell
in the store on a cell , or in the cellactions config.
I am trying to click a cell or iconCls and have a page load in a separate MIF.
This is some of what I have tried so far:


,cellActions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,style:'background-color:#f0f0f0'
,renderer: this.cellclickRender.createDelegate(this)cellclickRender: function(val, cell, record) {return '<a href="anyPage.html" target="mifName"</a>';}


and



action:function(grid, record, action, row, col, iconCls){
alert('You clicked an ICON '+row); }
(this works great but what do I use in place of alert to target the MIF?)
or in the store(json reader)?


I am using the CellActions example as my working showcase with the MIF in a a second panel.

humble

jsakalos
9 Jun 2009, 12:27 PM
Hmm, it doesn't seem to me like a route to take. I'd just create MIF in handler, set its source to that other page and I wouldn't touch the renderer. Or, am I missing something?

humble
10 Jun 2009, 5:13 PM
Hmm, it doesn't seem to me like a route to take. I'd just create MIF in handler, set its source to that other page and I wouldn't touch the renderer. Or, am I missing something?

Saki,
I have already created the mif in a panel(win) and it has a default page: Page1.html.
Click on cell (iconCls) and change the mif to: Page2.html.
-------------------------
hendricd - Doug Hendricks:
Or if you have a fancy link handler, this would do it via script:
Ext.getCmp('centerFrame').setSrc('http://www.google.com');
-------------------------


,{header: "Industry", width: 20, sortable: false, dataIndex: 'industry'
,cellActions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,style:'background-color:#f0f0f0'
,listeners:{
onClick: function(grid, record, action, row, col, iconCls){
Ext.getCmp('mifName').setSrc('Page2.html'); // not working yet
}
}
},{
iconIndex:'action2'
,qtipIndex:'qtip2'
,style:'background-color:#6699ff;'
}]
// the id and name of the target mif are set to 'mifName'
// any click on a cell that is field (action1) should get a new page ?

jsakalos
10 Jun 2009, 10:43 PM
Does Ext.getCmp('mifName') return correct reference? If yes, then it is a problem in MIF.

jsakalos
10 Jun 2009, 10:45 PM
BTW, I guess that your listener is never executed. onClick event doesn't exist. CellActions implement action and beforeaction events.

humble
11 Jun 2009, 3:53 PM
BTW, I guess that your listener is never executed. onClick event doesn't exist. CellActions implement action and beforeaction events.

Saki,
Thank you for your patience; sorry about the onClick it was a typo.
I fixed the ‘not defined’ by placing all the code of the second window first;
no errors of any kind in firebug (have all checkboxes in FB checked)

If you would be so kind, why does this listener work when up at the top of the code (same as example) but not
In the cellAction config ?


,{header: "Industry", width: 20, sortable: false, dataIndex: 'industry'
,cellActions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,style:'background-color:#f0f0f0'
,listeners:{
action:function(grid, record, action, row, col, iconCls){
alert('You clicked an ICON '+row); }}
},{
iconIndex:'action2'
,qtipIndex:'qtip2'

jsakalos
12 Jun 2009, 12:29 AM
Because listeners are initialized upon instantiation of CellActions.

N S B
12 Jun 2009, 4:54 AM
:) - I was coming back here to report this exact problem, and yes the renderer is not called. I guess I didn't think that all the way through.

Does this provide any insight into the 'too much recursion' issue? Here is the line of code:



c.origRenderer = cm.getRenderer(idx);
I get this if I create a tab that has the grid inside, close the tab, and then open it again. I know it is something not getting destroyed properly. We are not using autoDestroy: false. Can you suggest anything to look for? If not, I will work on getting you that showcase.

Hi,

I have an almost identical problem. I am able to load the cellactions plugin initially, but on closing the window containing that grid and opening for the second time, it gives the "too much recursion" error.

I think I am the third person facing this issue. What I think is that there might be some component that is not destroyed. I have a renderer, a column model and a store that I re-use every time. Could these cause any issues with the plugin?

Should I post some kind of a showcase along with this? TIA...

jsakalos
12 Jun 2009, 5:51 AM
I'm afraid that I'v added destroy code only to RowActions, not to CellAction. Can you please take a look and test if adding a similar code to CellActions resolves the issue?

N S B
15 Jun 2009, 5:11 AM
Thanks for the reply. I was not able to solve the problem and still don't know whether it is an issue with my code or the objects not getting destroyed, like you had said. In any case, I have made a (pathetic) workaround by hiding the window on closeAction ;)

Anyway, thanks for the amazing plugin!

jsakalos
15 Jun 2009, 7:24 AM
Hmm, I would consider closeAction:'hide' a valid solution, especially if you can open the same window more times.

N S B
15 Jun 2009, 11:05 PM
I have one more issue related to this plugin. When I click on a cell to edit, the corresponding editor comes up without any problems. But the value inside it is the underlying DOM value. The default value shows up properly before I enter the editing mode. But once the cell becomes editable, the default value shown there is the DOM value.

For example, the whole cell becomes something like (whether it maybe a TextField or Combobox) :

<div class="ux-cell-value" style="padding-left: 20px;"><div class="ux-cell-actions ux-cell-actions-left" style="width: 20px;"><div class="ux-cell-action backup-router-icon" qtip="" style="">&nbsp;</div></div>-NIL-<div></div></div>This effect disappears when I remove cellactions. I hope there is an answer to this.

Thanks in advance...

jsakalos
15 Jun 2009, 11:17 PM
Check http://cellactions.extjs.eu/ Editing there works w/o any problems.

mystix
15 Jun 2009, 11:19 PM
I have one more issue related to this plugin. When I click on a cell to edit, the corresponding editor comes up without any problems. But the value inside it is the underlying DOM value. The default value shows up properly before I enter the editing mode. But once the cell becomes editable, the default value shown there is the DOM value.

For example, the whole cell becomes something like (whether it maybe a TextField or Combobox) :

<div class="ux-cell-value" style="padding-left: 20px;"><div class="ux-cell-actions ux-cell-actions-left" style="width: 20px;"><div class="ux-cell-action backup-router-icon" qtip="" style="">&nbsp;</div></div>-NIL-<div></div></div>This effect disappears when I remove cellactions. I hope there is an answer to this.

Thanks in advance...
that's often caused by a missing dataIndex. check to make sure none are missing.

N S B
15 Jun 2009, 11:25 PM
Thanks a lot mystix!

Yeah, that was a stupid mistake on my part. My dataIndex read 'backup' My JSON was sending 'backip' :)

mystix
15 Jun 2009, 11:46 PM
Thanks a lot mystix!

Yeah, that was a stupid mistake on my part. My dataIndex read 'backup' My JSON was sending 'backip' :)

you might want to mention this common pitfall in the "Ext.Error - community input" thread, with a reference back to your post.

MD
16 Jun 2009, 6:15 PM
Could you test if same adjustments as for RowActions help in the case of CellActions? The RowActions thread (the end of) contains modifications with explanations.

Saki, I've integrated both RowActions and CellActions, and came across no instances where CellActions required additions or modifications for 3.x compatibility. I did, however, notice that CellActions is missing some useful functionality that RowActions has -- namely the ability to hide icons (hide, hideIndex, hideMode).

I found though, that in your code for the CellActions example, you did in fact make reference to that, but the actual code to make use of those options is absent:

From cellactions.js:

...
,cellActions:[{
iconCls:'icon-key'
,qtip:'Click to Unlock'
,hide:true
,hideMode:'display'
},{
iconCls:'icon-email'
,qtip:'Send E-mail'
}]
...

In my particular case, I'd very much like to have the ability to hide icons. While I'm now going to proceed to make an attempt on my own to migrate over that functionality from RowActions, I also want to ask if you'd consider "officially" updating it to incorporate the hide code, as I think it would be beneficial to all the others using the plugin.

*UPDATE*
The hide/hideIndex/hideMode-related code pretty much carries over directly from RowActions, as does support for text/textIndex with a few minor changes to the tpl and addition of some associated css classes.

MD

Smeraldo
16 Jun 2009, 7:43 PM
Hi, thanks a lot for this plugin, it's very useful for me!

I have the CellAction plugin in a cell that has a ComboBox for editor.

Is it possible to change the CellAction icon according to the ComboBox value?


Little Example:

My ComboBox (in a cell of the editor grid panel) has 2 possible values:

1) Email
2) Skype

In the first case (1) I need to display Email Icon to click (to send email).
In the second case (2) I need to display the Skype icon to click (to make a call).

Is it possible to do that?

Thanks in advance!

jsakalos
16 Jun 2009, 11:57 PM
No need for CellActions if you only need to change icon. IconCombo (see tutorials section) would do in this case.

If you do need an action on clicking the icon mind please that you can use iconIndex and thus change the icon depending of the underlying value in the store.

jsakalos
17 Jun 2009, 12:00 AM
@MD, when 3.0 final will be out, I'll take my extensions and port them. That would be good time to add any functionalities. However, I cannot guarantee that it will be immediately after Ext 3.0 release neither that CellActions will be at the top of the list (I have ~30+ extensions/plugins).

MD
17 Jun 2009, 10:50 AM
@MD, when 3.0 final will be out, I'll take my extensions and port them. That would be good time to add any functionalities. However, I cannot guarantee that it will be immediately after Ext 3.0 release neither that CellActions will be at the top of the list (I have ~30+ extensions/plugins).

No worries, Saki, I completely understand. I'm happy just knowing it'll be on the radar after 3.0 final ;)

MD

sjanani
25 Jun 2009, 1:46 AM
Hi,
In my code i used the grid rowclick to open the popup.In that grid each row contains one icon.When i click the icon i want to delete the particular record from the grid.I wrote the code but for both requirements.but rowclick function only work.icon click is not working.. Any ideas if u know please share with me... Thanks in Advance.........

My code is below:



{
xtype: 'grid',
id:'doument_grid_myselection',
title:title_grid_myselection,
height:200,
autoScroll:true,
layout: 'fit',
store: new Ext.data.SimpleStore({
data:[],
fields: [{name:'documentauto'},{name: 'locationtype'},{name: 'documenttype'},
{name: 'document'},{name: 'printwo'},
{name:'sendemail'}]
}),
columns: [
{id:'delete_notes', header:'',width:30,dataIndex: 'note_auto',
renderer:function(value){
return '<img src="'+USER_IMAGE_PATH+'refresh-icon-small.gif" title="Delete" onclick="fun_delete(\'doument_grid_myselection\')" />';
}
},
{id:'locationtype',header: "Location Type", sortable: true, dataIndex: 'locationtype', width:200},
{id:'documenttype',header: "Document Type", sortable: true, dataIndex: 'documenttype', width:150},
{id:'document',header: "Document", sortable: true, dataIndex: 'document', width:150},
{id:'printwo',header: "Print with WO", sortable: true, dataIndex: 'printwo', width:150},
{id:'sendemail',header: "Send with Email", sortable: true, dataIndex: 'sendemail', width:150} ],
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
stripeRows: true,
listeners: {
//render:function(grid){this.store.load();},
rowclick :function(grid, row){
var record = this.getSelectionModel().getSelected();
var document_id=record.get('documentauto');
fn_document_grid_pop(document_id,'doument_grid_myselection');
}
}
}

jsakalos
25 Jun 2009, 10:23 AM
I do not see any reference to CellActions in your code. If it is a general help query post it please to Help Forum.

jsakalos
30 Jun 2009, 10:28 AM
Are you sure that this is the right thread for your post? You can see tons of my coding almost anywhere on the net.

mystix
30 Jun 2009, 11:09 AM
Are you sure that this is the right thread for your post? You can see tons of my coding almost anywhere on the net.

you can ignore that post. it was a spambot. :)

MichaelOstrovsky
9 Jul 2009, 7:32 AM
cellActions:[{
iconCls:'info_icon',
ajaxTTurl:'index.php/org/get_inf/',
ajaxTTvalue:'id'
}]

in this case, if the field 'id' have value 777, then the ajax tooltip will load from 'index.php/org/get_inf/777'

:)

i would very recommend adding something like that to the official extension. that saves alot of unnecessary space , database calculations, and request times ( f.e, if trying to preload few hundred record descriptions with 'qtipIndex' )

* NOTE: updated :
- positioning bug solved ( when tooltip loaded, it repositions itself one more time to adjust for its new height )
- an important optimization/bugfix :unneeded previous tooltips completelty destroyed.
- tooltip loading cancelled when mouse exits the cellaction.
- cellaction AJAX tooltips are buffered to not bomb with requests on fast mouse-over over many of them
- maybe more fixes. dont remember exactly.


* NOTE: updated once more.. :
- another positioning bug solved
- memory leaks solved. now only one ajax-tooltip reused over the whole app.


the modified code:


var CATT=null; //Cell Actions single ajax tooltip ( reused )

// Duplicated in manager & ui

// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* CellActions plugin for Ext grid
*
* Contains renderer for an icon and fires events when icon is clicked
*
* @author Ing. Jozef
* @dateMarch 2008
* @version $Id: Ext.ux.grid.CellActions.js 253 2008-05-11 09:31:48Z jozo $
*
* @license Ext.ux.grid.CellActions is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/**
* The following css is required:
*
* .ux-cell-value {
* position:relative;
* zoom:1;
* }
* .ux-cell-actions {
* position:absolute;
* right:0;
* top:-2px;
* }
* .ux-cell-actions-left {
* left:0;
* top:-2px;
* }
* .ux-cell-action {
* width:16px;
* height:16px;
* float:left;
* cursor:pointer;
* margin: 0 0 0 4px;
* }
* .ux-cell-actions-left .ux-cell-action {
* margin: 0 4px 0 0;
* }
*/

/*global Ext */

Ext.ns('Ext.ux.grid');

// constructor and cellActions documentation
// {{{
/**
* @class Ext.ux.grid.CellActions
* @extends Ext.util.Observable
* @constructor
*
* CellActions plugin causes that column model recognizes the config property cellAcions
* that is the array of configuration objects for that column. The documentationi follows.
*
* THE FOLLOWING CONFIG OPTIONS ARE FOR COLUMN MODEL COLUMN, NOT FOR CellActions ITSELF.
*
* @cfg {Array} cellActions Mandatory. Array of action configuration objects. The following
* configuration options of action are recognized:
*
* - @cfg {Function} callback Optional. Function to call if the action icon is clicked.
* This function is called with same signature as action event and in its original scope.
* If you need to call it in different scope or with another signature use
* createCallback or createDelegate functions. Works for statically defined actions. Use
* callbacks configuration options for store bound actions.
*
* - @cfg {Function} cb Shortcut for callback.
*
* - @cfg {String} iconIndex Optional, however either iconIndex or iconCls must be
* configured. Field name of the field of the grid store record that contains
* css class of the icon to show. If configured, shown icons can vary depending
* of the value of this field.
*
* - @cfg {String} iconCls. css class of the icon to show. It is ignored if iconIndex is
* configured. Use this if you want static icons that are not base on the values in the record.
*
* - @cfg {String} qtipIndex Optional. Field name of the field of the grid store record that
* contains tooltip text. If configured, the tooltip texts are taken from the store.
*
* - @cfg {String} tooltip Optional. Tooltip text to use as icon tooltip. It is ignored if
* qtipIndex is configured. Use this if you want static tooltips that are not taken from the store.
*
* - @cfg {String} qtip Synonym for tooltip
*
* - @cfg {String} style Optional. Style to apply to action icon container.
*/
Ext.ux.grid.CellActions = function(config) {
Ext.apply(this, config);

this.addEvents(
/**
* @event action
* Fires when user clicks a cell action
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record containing data of clicked cell
* @param {String} action Action clicked (equals iconCls);
* @param {Mixed} value Value of the clicke cell
* @param {String} dataIndex as specified in column model
* @param {Number} rowIndex Index of row clicked
* @param {Number} colIndex Incex of col clicked
*/
'action'
/**
* @event beforeaction
* Fires when user clicks a cell action but before action event is fired. Return false to cancel the action;
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record containing data of clicked cell
* @param {String} action Action clicked (equals iconCls);
* @param {Mixed} value Value of the clicke cell
* @param {String} dataIndex as specified in column model
* @param {Number} rowIndex Index of row clicked
* @param {Number} colIndex Incex of col clicked
*/
,'beforeaction'
);
// call parent
Ext.ux.grid.CellActions.superclass.constructor.call(this);

}; // eo constructor
// }}}

Ext.extend(Ext.ux.grid.CellActions, Ext.util.Observable, {

/**
* @cfg {String} actionEvnet Event to trigger actions, e.g. click, dblclick, mouseover (defaults to 'click')
*/
actionEvent: 'click' /**
* @cfg {Number} actionWidth Width of action icon in pixels. Has effect only if align:'left'
*/
,
actionWidth: 20 /**
* @cfg {String} align Set to 'left' to put action icons before the cell text. (defaults to undefined, meaning right)
*/
/**
* @private
* @cfg {String} tpl Template for cell with actions
*/
,
tpl: '<div class="ux-cell-value" style="padding-left:{padding}px">' +
'<tpl if="\'left\'!==align">{value}</tpl>' +
'<div class="ux-cell-actions<tpl if="\'left\'===align"> ux-cell-actions-left</tpl>" style="width:{width}px">' +
'<tpl for="actions"><div class="ux-cell-action {cls}" ext:qtip="{qtip}" ext:dismissDelay="60" style="{style}" ajaxtt="{ajaxtt}">&#160;</div></tpl>' +
'</div>' +
'<tpl if="\'left\'===align">{value}</tpl>' +
'<div>' /**
* Called at the end of processActions. Override this if you need it.
* @param {Object} c Column model configuration object
* @param {Object} data See this.processActions method for details
*/
,
userProcessing: Ext.emptyFn // {{{
/**
* Init function
* @param {Ext.grid.GridPanel} grid Grid this plugin is in
*/
,
init: function(grid){
this.grid = grid;
// grid.on({scope:this, render:this.onRenderGrid});
grid.afterRender = grid.afterRender.createSequence(this.onRenderGrid, this);

var cm = this.grid.getColumnModel();
Ext.each(cm.config, function(c, idx){
if ('object' === typeof c.cellActions) {
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);

this.showAjaxTTTask=new Ext.util.DelayedTask(this.showAjaxTT_, this);

} // eo function init
// }}}
// {{{
/**
* grid render event handler, install actionEvent handler on view.mainBody
* @private
*/
,
onRenderGrid: function(){

// install click event handler on view mainBody
this.view = this.grid.getView();
var cfg = {
scope: this
};
cfg[this.actionEvent] = this.onClick;

this.view.mainBody.on(cfg);
this.view.mainBody.on('mouseover',this.showAjaxTT,this);

} // eo function onRender
// }}}
// {{{
/**
* Returns data to apply to template. Override this if needed
* @param {Mixed} value
* @param {Object} cell object to set some attributes of the grid cell
* @param {Ext.data.Record} record from which the data is extracted
* @param {Number} row row index
* @param {Number} col col index
* @param {Ext.data.Store} store object from which the record is extracted
* @returns {Object} data to apply to template
*/
,
getData: function(value, cell, record, row, col, store){
return record.data ||
{};
} // }}}
// {{{
/**
* replaces (but calls) the original renderer from column model
* @private
* @param {Mixed} value
* @param {Object} cell object to set some attributes of the grid cell
* @param {Ext.data.Record} record from which the data is extracted
* @param {Number} row row index
* @param {Number} col col index
* @param {Ext.data.Store} store object from which the record is extracted
* @returns {String} markup of cell content
*/
,
renderActions: function(value, cell, record, row, col, store){

// get column config from column model
var c = this.grid.getColumnModel().config[col];

// get output of the original renderer
var val = c.origRenderer(value, cell, record, row, col, store);

// get actions template if we need but don't have one
if (c.cellActions && !c.actionsTpl) {
c.actionsTpl = this.processActions(c);
c.actionsTpl.compile();
}
// return original renderer output if we don't have actions
else
if (!c.cellActions) {
return val;
}

// get and return final markup
var data = this.getData.apply(this, arguments);
data.value = val;
return c.actionsTpl.apply(data);

} // eo function renderActions
// }}}
// {{{
/**
* processes the actions configs from column model column, saves callbacks and creates template
* @param {Object} c column model config of one column
* @private
*/
,
processActions: function(c){

// callbacks holder
this.callbacks = this.callbacks ||
{};

// data for intermediate template
var data = {
align: this.align || 'right',
width: this.actionWidth * c.cellActions.length,
padding: 'left' === this.align ? this.actionWidth * c.cellActions.length : 0,
value: '{value}',
actions: []
};

// cellActions loop
Ext.each(c.cellActions, function(a, i){

// save callback
if (a.iconCls && 'function' === typeof(a.callback || a.cb)) {
this.callbacks[a.iconCls] = a.callback || a.cb;
}

// data for intermediate xtemplate action
var o = {
cls: a.iconIndex ? '{' + a.iconIndex + '}' : (a.iconCls ? a.iconCls : ''),
qtip: a.qtipIndex ? '{' + a.qtipIndex + '}' : (a.tooltip || a.qtip ? a.tooltip || a.qtip : ''),
style: a.style ? a.style : ''
};
if(a.ajaxTTurl) o.ajaxtt=a.ajaxTTurl+'{'+a.ajaxTTvalue+'}';
data.actions.push(o);

}, this); // eo cellActions loop
this.userProcessing(c, data);

// get and return final template
var xt = new Ext.XTemplate(this.tpl);
return new Ext.Template(xt.apply(data));

} // eo function processActions
// }}}
// {{{
/**
* Grid body actionEvent event handler
* @private
*/
,
onClick: function(e, target){

// collect all variables for callback and/or events
var t = e.getTarget('div.ux-cell-action');
var row = e.getTarget('.x-grid3-row');
var col = this.view.findCellIndex(target.parentNode.parentNode);
var c = this.grid.getColumnModel().config[col];
var record, dataIndex, value, action;
if (t) {
record = this.grid.store.getAt(row.rowIndex);
dataIndex = c.dataIndex;
value = record.get(dataIndex);
action = t.className.replace(/ux-cell-action /, '');
}

// check if we've collected all necessary variables
if (false !== row && false !== col && record && dataIndex && action) {

// call callback if any
if (this.callbacks && 'function' === typeof this.callbacks[action]) {
this.callbacks[action](this.grid, record, action, value, row.rowIndex, col,e);
}

// fire events
if (true !== this.eventsSuspended && false === this.fireEvent('beforeaction', this.grid, record, action, value, dataIndex, row.rowIndex, col)) {
return;
}
else
if (true !== this.eventsSuspended) {
this.fireEvent('action', this.grid, record, action, value, dataIndex, row.rowIndex, col,e);
}

}
} // eo function onClick
// }}}
,

repositionCATT:function(){
if(this.TTCancelled) return;
try {
var bottom=CATT.getEl().getBottom();
var bodyHeight=Ext.getBody().getHeight();
if((bottom+5)>bodyHeight) CATT.showAt(this.ttXY)
}catch(e){}
},

showAjaxTT_:function(url,xy,t){
this.TTCancelled=false;
this.ttXY=xy;
var autoLoad={
url: url,
callback:this.repositionCATT,
scope:this,
noDefend:true
};
if (CATT) {
CATT.autoLoad = autoLoad;
CATT.doAutoLoad();
}
else {
CATT = new Ext.ToolTip({
dismissDelay: 0,
showDelay: 0,
target: t,
width: 200,
autoLoad:autoLoad
});
}

autoLoad=null;

CATT.clearTimer('hide');
CATT.targetXY =xy;
CATT.delayShow();
xy=null;
},

cancelTTTask:function(){
this.showAjaxTTTask.cancel();
this.TTCancelled=true;
if (CATT) {
CATT.body.update('');
CATT.hide();
}
},

//Michael
showAjaxTT: function(e, target){

var t = e.getTarget('div.ux-cell-action');
if (t) {
var url = t ? t.getAttribute('ajaxtt') : '';
if (url.length)
this.showAjaxTTTask.delay(300, this.showAjaxTT_, this, [url, e.getXY(), t]);
Ext.fly(t).on('mouseout',this.cancelTTTask, this);
url=null;
}
t=null;
}

});

// register xtype
Ext.reg('cellactions', Ext.ux.grid.CellActions);

// eof

jsakalos
9 Jul 2009, 1:44 PM
Looks good. I'll probably include it in the next release.

axpa
17 Jul 2009, 12:07 AM
Hi,
Thanks for a great plugin,
I'm trying to get the icons to align to center (I have my column set to align to center) and I would like to get the icon/icons to align to the text from value.
I'm trying with Firebug to fix the css and looking into tweaking the template, just wanted to know if someone had this working already,
Cheers
AxPa

This is my first try faaar from good.



tpl:'<div class="ux-cell-value<tpl if="\'center\'===align"> ux-cell-value-center</tpl>" style="padding-left:{padding}px">'
+'<tpl if="\'right\'===align">{value}</tpl>'
+'<tpl if="\'\'===align">{value}</tpl>'
+'<div class="ux-cell-actions<tpl if="\'left\'===align"> ux-cell-actions-left</tpl><tpl if="\'center\'===align"> ux-cell-actions-center</tpl>" style="width:{width}px">'
+'<tpl for="actions"><div class="ux-cell-action {cls}" qtip="{qtip}" style="{style}"> </div></tpl>'
+'<tpl if="\'center\'===align">{value}</tpl>'
+'</div>'
+'<tpl if="\'left\'===align">{value}</tpl>'
+'<div>'.ux-cell-value-center {
height:16px;
left:40%;
position:relative;
text-align:center;
}
.ux-cell-actions-center {
left:0;
top:-2px;
}

jsakalos
17 Jul 2009, 11:31 AM
Cannot you just set column width to the sum of widths of icons? Or you use also text?

axpa
19 Jul 2009, 10:59 PM
Cannot you just set column width to the sum of widths of icons? Or you use also text?

I do use both text from value and the actions, adjusting column width would unfortunately not look so crisp in my layout, thanks for the tip anyways.

MichaelOstrovsky
20 Jul 2009, 4:34 AM
you can add a new 'blank_action' style with width=0 (in css), and assign it using iconIdx. so, in every row, the actions would be adjusted ...

* sorry, ignore this. i thought you have to show different actions each time, something i recently solved.

SamuraiJack1
22 Jul 2009, 2:50 AM
If the cell, holding the cell actions contain no text (its column has dataIndex : 'dummyField' in my case), I have to add this small css adjustment for correct rendering:


/** vim: ts=4:sw=4:nu:fdc=4:nospell
*
* Ext.ux.grid.CellActions.css
*
* Style sheets for Grid CellActions Plugin
*
* @author Ing. Jozef Sakáloš
* @date 27. March 2008
* @version $Id: Ext.ux.grid.CellActions.css 105 2008-03-27 19:57:00Z jozo $
*
* @license Ext.ux.grid.CellActions.css is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

.ux-cell-value {
height : 11px;

position:relative;
zoom:1;
}
.ux-cell-actions {
position:absolute;
right:0;
top:-2px;
}
.ux-cell-actions-left {
left:0;
top:-2px;
}
.ux-cell-action {
width:16px;
height:16px;
float:left;
cursor:pointer;
margin: 0 0 0 4px;
}
.ux-cell-actions-left .ux-cell-action {
margin: 0 4px 0 0;
}

/* eof */
Thanks for this ux anyway.

SamuraiJack1
22 Jul 2009, 3:22 AM
Probably better and more general solution will be:


,renderActions:function(value, cell, record, row, col, store) {

// get column config from column model
var c = this.grid.getColumnModel().config[col];

// get output of the original renderer
var val = c.origRenderer(value, cell, record, row, col, store) || '&nbsp;';

// get actions template if we need but don't have one
if(c.cellActions && !c.actionsTpl) {
c.actionsTpl = this.processActions(c);
c.actionsTpl.compile();
}
// return original renderer output if we don't have actions
else if(!c.cellActions) {
return val;
}

// get and return final markup
var data = this.getData.apply(this, arguments);
data.value = val;
return c.actionsTpl.apply(data);

} // eo function renderActions

jsakalos
22 Jul 2009, 4:35 AM
Yes, that helps with no text. Adding it to the main code.

WBarnie
24 Jul 2009, 6:29 AM
CellAction
I am trying to use the plugin cellAction. I need to display a grid in a tabPanel. The data in the grid is grouped by offices with users under the office where they work. I added the cellAction plugin as I need to have 3 functions for the office object: delete, update and add user and I also need the similar functionally for the users add user, update user and delete user. For each of these actions I want a popup dialog. So looking at the example, I believe I can do this with different icon in the cell. When I click the office tab, the display is rather messed up and there are 2 errors:

Ct is null this.el = ct.createChild({ \r\n on line (ext.all-debug.js line 16499)


Gs[i].childNodes[1] is undefined ext-all-debug.js line 33838

I have set break point on these line, however the call stack does not point back to my code so I do not know what I am doing wrong. The first error, ct is null occurs whenever I click any tab. The second error only occurs when I click the office tab.

I also just noticed that I am getting an error in CellAction.js on line 327, row is null.

Below is a copy of the javaScript file. I have comments where the code begins for each tab. I would appreciate any help.
<code>
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.grid.CellActions Plugin Example Application
*
* @author Ing. Jozef Sakáloš
* @date 22. March 2008
* @version $Id: cellactions.js 24 2008-04-24 23:10:45Z jozo $
*
* @license cellactions.js is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext, Example, Web, console */

Ext.BLANK_IMAGE_URL = './js/ext2.2.1/resources/images/default/s.gif';
Ext.ns('Example');
Example.version = 'Beta 2';

// create pre-configured grid class
Example.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
initComponent:function() {
this.cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction:function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-undo':function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});

// configure the grid
Ext.apply(this, {
store:new Ext.data.Store({
reader:new Ext.data.JsonReader({
id:'company'
,totalProperty:'totalCount'
,root:'rows'
,fields:[
{name: 'company'}
,{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
,{name: 'industry'}
,{name: 'action1', type: 'string'}
,{name: 'action2', type: 'string'}
,{name: 'action3', type: 'string'}
,{name: 'qtip1', type: 'string'}
,{name: 'qtip2', type: 'string'}
,{name: 'qtip3', type: 'string'}
]
}) // eo JsonReader
,proxy:new Ext.data.HttpProxy({url:'get-grid-data.php'})
,groupField:'industry'
,sortInfo:{field:'company', direction:'ASC'}
}) // eo Store
,columns:[
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'
,cellActions:[{
iconCls:'icon-key'
,qtip:'Click to Unlock'
,hide:true
,hideMode:'display'
},{
iconCls:'icon-email'
,qtip:'Send E-mail'
}]
,editor:new Ext.form.TextField()
}
,{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'
,cellActions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,style:'background-color:#f0f0f0;'
}]
,editor:new Ext.form.TextField()
}
,{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
,plugins:[this.cellActions]
,viewConfig:{forceFit:true}
,stripeRows:true
}); // eo apply

// add paging toolbar
this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:10
});

// call parent
Example.Grid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
// }}}
// {{{
,onRender:function() {

// call parent
Example.Grid.superclass.onRender.apply(this, arguments);

// start w/o grouping
// this.store.clearGrouping();

// load the store
this.store.load({params:{start:0, limit:10}});

} // eo function onRender
// }}}

}); // eo extend

// register component
Ext.reg('examplegrid', Example.Grid);

// application entry point
Ext.onReady(function() {
Ext.QuickTips.init();

var adsenseHost =
'cellactions.localhost' === window.location.host
|| 'cellactions.extjs.eu' === window.location.host
;
var page = new WebPage({
version:Example.version
,westContent:'west-content'
,centerContent:'center-content'
,adRowContent:adsenseHost ? 'adrow-content' : undefined
});

var ads = Ext.getBody().select('div.adsense');
if(adsenseHost) {
ads.removeClass('x-hidden');
}
else {
ads.remove();
}

// window with grid
var win = new Ext.Window({
width:600
,id:'cawin'
,height:400
,layout:'fit'
,border:false
,plain:true
,closable:false
,title:Ext.get('page-title').dom.innerHTML
,items:{xtype:'examplegrid',id:'cagrid'}
});
win.show();
});

// eof

</code

jsakalos
24 Jul 2009, 1:11 PM
Well, what do you expect me to do?

http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly
http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase

WBarnie
28 Jul 2009, 4:04 AM
I am trying to use the cellAction plugin with a gridPanel and GroupingStore on a tabPanel. The GroupingStore intercepts mouse clicks as does cellAction. The grouping grid worked fine and then I added in cellAction and the display became distorted. The display consists of Offices, the group and users that work at that office. What I want to accomplish is to have 3 icons next to the Office for 3 actions, add, delete and update and likewise next to the user Id. When the icons are clicked I want to popup a window to carry out the operation. Can this be done?

I am only going to post the section of JavaScript that has to do with the office tab. I hope this is enough. I would appreciate any help. I have already reviewed the post for cellAction.



Ext.BLANK_IMAGE_URL = './js/ext2.2.1/resources/images/default/s.gif';
///Ext.ns('userProfile');
Ext.onReady(function(){
var win;
var companyWindow;

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";


// Office tab
var reader = new Ext.data.ArrayReader({}, [
{name: "office"},
{name: "lastName"},
{name: "fullName"},
{name: "userId"},
{name: "role"},
{name: "status"},
{name: 'action1'},
{name: 'action2'},
{name: 'action3'},
{name: 'qtip1'},
{name: 'qtip2'},
{name: 'qtip3'}
]);

var userGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
this.cellActions = new Ext.ux.grid.CellActions({
listeners:{
action: function(grid, record, action, value) {
Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction: function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-delete': function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});

Ext.apply(this, {
store: new Ext.data.GroupingStore({
reader: reader,
data: Ext.grid.dummyData,
sortInfo:{field: "lastName", direction: "ASC"},
groupField:"office"
}), // eo GroupingStore
columns: [
{id:'office',header: "Office", width: 80, sortable: true, hidden: false, dataIndex: 'office',
cellActions:[{
iconCls:'icon-key',
qtip: 'Click to Update an Office'
//hide:false,
//hideMode:'display'
},{
iconCls:'icon-add',
qtip:'Click to Add an Office'
},{
iconCls:'icon-delete',
qtip:'Click to Delete an Office'
}],
},
{header: "Name", width: 20, sortable: true, renderer: function userNameAbbreviator(value, metadata, dataRecord) {
if (value.length > 10 ) {
metadata.attr = 'ext:qtip="' + value + '"';
return value.substring(0,10) + "...";
} else {
return value;
}
}, dataIndex: "fullName"},
{header: "User Id", width: 20, sortable: true, dataIndex: "userId",
cellActions:[{
iconCls:'icon-key',
qtip:'Click to Update a User',
hide:false,
hideMode:'display'
},{
iconCls:'icon-add',
qtip:'Click to Add a User'
},{
iconCls:'icon-delete',
qtip:'Click to Delete a User'
}],
},
{header: "Role", width: 20, sortable: true, dataIndex: "role"},
{header: "Status", width: 20, sortable: true, dataIndex: "status"}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}), // eo GroupingView
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: "Offices",
iconCls: "icon-grid",
plugins: [this.cellActions]
}); // eo apply
// call parent
userGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender: function() {
// call parent
userGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
}); // eo extend

// register component
Ext.reg('userGrid', userGrid);
/*
Ext.override(Ext.grid.GroupingView, {
interceptMouse : Ext.emptyFn
});
*/
function officeUpdate() {
if(!win){
win = new Ext.Window({
applyTo : "updateOffice-dlg",
modal: true,
center: true,
layout : "fit",
width : 700,
height : 80,
closeAction :"hide",
plain : false,
buttons: [{
text : "Submit",
handler : function(){
win.hide();
}
},{
text : "Cancel",
handler : function(){
win.hide();
}
}]
});
}
win.show();
}


// Array data for the grids
Ext.grid.dummyData = [
["Home Office","Barnie","Walter Barnie","wbarnie","I/A Admin","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Home Office","Robertson","Ray Robertson","rrobert","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Home Office","Palanisamy","Jayalakshm Palanisamy","jpalan","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Home Office","Tuttle","Michell Tuttle","mtuttle","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Home Office","Hatch","Mary Hatch","mhatch","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Home Office","Miszkiewicz","Matthew Miszkiewicz","mmiszki","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Home Office","Austin","Mark Austin","maustin","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Home Office","Coyle","Lisa Coyle","lcoyle","I/A Admin","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Boston Office","Piere","Janet Piere","jpiere","I/A Admin","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Boston Office","Swanson","Kevin Swanson","kswanso","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Boston Office","Matthews","Ruth Matthews","rmetthe","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Boston Office","Walker","Jeff Walker","jwalker","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Boston Office","Carmody","Ed Carmody","ecarmod","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Boston Office","Churchhill","Mark Churchhill","mchurch","IA Appraiser","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Worcester Office","Capriol","Michael Capriol","mcaprio","I/A Admin","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Worcester Office","Mikucki","Michael Mikucki","mmikuck","I/A Admin","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"],
["Worcester Office","Johanssen","Thersa Johanssen","tjohans","I/A Admin","Active","icon-key", "icon-add", "icon-delete", "Update Office", "Add Office", "Delete company"]
];

jsakalos
31 Jul 2009, 12:03 AM
I've tested it and yes, there is a problem with CellActions + GroupingGrid. Cannot you use RowActions?

anjelika
5 Aug 2009, 12:00 AM
Any advice on how to implement something similar (Ajax tolltips) to Trees?
Thanks

jsakalos
5 Aug 2009, 12:03 AM
Is the question related to CellActions?

mystix
20 Aug 2009, 10:04 PM
just found out the wrapper <div class="ux-cell-value"> inserted by the CellActions plugin prevents all QuickTips from the underlying grid cell from showing (unless you manage to place the cursor on the tiny gap between the wrapper and the grid cell), simply because this wrapper <div> covers a large portion of the grid cell.

to work around this, i used the following config to override the CellActions defaults when instantiating the plugin:
(important bits highlighted in red)


{
tpl: [
'<div class="ux-cell-value" style="padding-left:{padding}px" ext:qtitle="{{["cellQtitle"]}}" ext:qtip="{{["cellQtip"]}}">',
'<tpl if="\'left\'!==align">{value}</tpl>',
'<div class="ux-cell-actions<tpl if="\'left\'===align"> ux-cell-actions-left</tpl>" style="width:{width}px">',
'<tpl for="actions"><div class="ux-cell-action {cls}" ext:qtip="{qtip}" style="{style}"> </div></tpl>',
'</div>',
'<tpl if="\'left\'===align">{value}</tpl>',
'<div>'
],
getData:function(value, cell, record, row, col) {
return Ext.apply({}, {
cellQtitle: 'Some Title', // copy your grid cell's qtitle here
cellQtip: Ext.util.Format.htmlEncode(value) // copy your grid cell's qtip here
}, record.data || {});
}
}

all it does is clone the underlying grid cell's qtip and qtitle so the same qtip appears when the cursor is over any part of the cell.
hope this helps.

p.s. is there any possibility of adding something to the plugin code to handle this automatically?
i realise it's a bit tough since a grid cell's renderer can poke any valid HTML attribute into the underlying cell via the attr metaData.
i.e.


renderer: function(v, cellParams) {
cellParams.attr = 'ext:qtip="hello world"';

return v;
}

WBarnie
21 Aug 2009, 4:29 AM
Thank you so much for you help and suggestion. When I posted the question, I was building prototype for and up coming project. I finally had to go the a grouping gride and placing icons in the cell and associate and action when they are clicked. It works fine the only missing piece is the ttip.. Perhaps when I do the development, I will be able to get the cellPlugin to work. Thank yo so much for reaching out.

-Walter Barnie

cginzel
18 Sep 2009, 8:05 AM
I have an editable grid field where I want to allow users to add rows. I'm using both your RowActions and the CellActions on the same grid. When I insert the new row, the field values are empty and where I have a cellAction icon, only the top half of the icon is being shown (see attachment below). If I initialize the cell value with some dummy text, the whole icon does appear. Is this a bug or user error? The row action icon is being displayed completely. I'm using these plug-ins with Ext 3.

jsakalos
18 Sep 2009, 3:18 PM
I'm not sure about CellActions in Ext 3, but a workaround could be to create new record with a space or &nbsp; initially to force the icon height. Or tweak a css.

s.m.srinivas
24 Sep 2009, 3:23 PM
I have requirement, wherein the ICONS has to be replaced with hyper link text. & actions should be separated by a Vertical Separator or image. Can I achieve that using Cell Actions? if yes could you please provide me sample or example

Regards
Srinivas

jsakalos
24 Sep 2009, 4:27 PM
Do not cross-post please. I've replied to this very same question in another thread.

s.m.srinivas
24 Sep 2009, 7:43 PM
I didn't mean to cross post. Sorry. I was just trying to see if I can get some help. Anyways thanks for the reply & help. By the way nice plugin.

oddy
8 Oct 2009, 2:14 AM
Good day.
Is there any way I can rid of an icon (and so, any actions connected with it) when the cell contains no data? Thanks.

jsakalos
8 Oct 2009, 5:34 AM
You would need to supply your own renderActions function for that.

ericliang
27 Oct 2009, 2:36 AM
I've tested it and yes, there is a problem with CellActions + GroupingGrid. Cannot you use RowActions?
Saki, you know you do very good when a hobby developer uses your rowactions, cellactions, recordform and groupinggrid connected to his MySQL via PDO.

Ah yes... after some hours of starting to play with extjs for the first time ;)

Thank you so very much!

PS Pity that CellActions + GroupingGrid gets mixed - it's how I came to read this thread and say thank you! To overcome this, I added an href before the value (it's a lookup field so real value id and value to show are 2 different fields).

kinchyle
31 Oct 2009, 9:06 PM
I know you said you haven't tested compatibility in 3.0 but wanted to let you know when I run a
grid.reconfigure(store, createColModel());

All the cell icons in the grid go away.

Having to do a
function reloadWin() {
window.location.reload();
}

Couldn't figure out how to do a listener and destroy the grid and then reload.
Tried doing reload() but doesn't bring the icons back.

kinchyle
20 Nov 2009, 12:33 AM
Is there a way to disable the icon in the grid, based on an index value ?
I have iconIndex pulling a blank icon but it still leaves a gap and it has the hand icon.
I think because the actionEvent is still taking effect.

I'm new to exts is it possible to put the cellActions: in an if statement or function and only show it if column data is a certain value.

Or maybe cellActions: if (blah) { # then show [{}] } else { #show the code to display }

jsakalos
20 Nov 2009, 11:06 AM
See if you cannot use RowActions, they support also hideMode (visibility or display). In display hide mode the space wouldn't be taken. CellActions do not support it - space is always taken.

kinchyle
20 Nov 2009, 11:20 AM
ah I'll give that a shot thanks. Was banging my head trying to get it working:) Saw this in the example for cellactions.js
,hide:true
,hideMode:'display'

I'll just live with the space, maybe someday it can make the roadmap. Rowactions won't work for me because I'm using cellactions next to comboboxes (3 per row).
Cellactions works great with extjs comboboxes since a grid won't show a combo as editable until you click on it.


I have a grid that has like 10 columns with 3 combo boxes and depending on role access it will allow you to only edit certain combo boxes in the row(displaying an icon if you can).

If you click the icon it expands the combobox.
Trying to make comboboxes look/act like html comboxes but the rendering power of extjs. Seems a pretty popular concept :)

countdown
4 Jan 2010, 6:35 AM
Hello all!
First of all, I would like to thank you saki for all your great plugins, they are all very useful, easy implementable and very adjustable!

I've implemented the cellActions with their default align (right) and had one issue with rows that had too long text in them! In FF and chrome you could see the text behind the icons (not such a big deal), but in IE the icons where moved after the text and outsite the visible area of the cell.

I've changed the tpl in the CellActions, so that it encloses the value in another div with width = 100% and overflow = hidden, and added a right-padding in case of align !== 'left'.
The new tpl :

tpl:'<div class="ux-cell-value" <tpl if="\'left\'===align">style="padding-left:{padding}px;"</tpl> <tpl if="\'left\'!==align">style="padding-right:{padding}px;"</tpl> >'
+'<tpl if="\'left\'!==align"><div style="width:100%;overflow:hidden;">{value}</div></tpl>'
+'<div class="ux-cell-actions<tpl if="\'left\'===align"> ux-cell-actions-left</tpl>" style="width:{width}px">'
+'<tpl for="actions"><div class="ux-cell-action {cls}" qtip="{qtip}" style="{style}"> </div></tpl>'
+'</div>'
+'<tpl if="\'left\'===align"><div>{value}</div></tpl>'
+'<div>'


I've also changed line 282

,padding:'left' === this.align ? this.actionWidth * c.cellActions.length : 0

to

,padding:this.actionWidth * c.cellActions.length

Since padding occurs in both cases but on diff sites.

This works in the 3 mentioned browsers, but I would still like to know what do you think of this solution, since I'm not an expert in extJS!
Anyway, hope this helps anyone who's having the same problem
Bye

jsakalos
4 Jan 2010, 8:36 AM
Thank you for sharing your knowledge.

feanor91
21 Jan 2010, 6:33 AM
Hi

I have a strange behavior. Look :

http://img44.imageshack.us/img44/1183/capture01rf.jpg

Here the code :

first the cellActions creation


var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
App.setAlert(App.STATUS_NOTICE, 'Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction:function() {
App.setAlert(App.STATUS_NOTICE, 'Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-undo':function(grid, record, action, value) {
App.setAlert(App.STATUS_NOTICE, 'Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});
Second my column cellaction creation :


tColonnes[1].cellActions=[{
iconCls:'icon-zoom-in',
qtip:'Voir détails'
}]And off course I have plugin cellaction in my plugin grid.

tColonnes is an array that contains all my columnmodel

So, what happend? It works but no as I expected it to.

And, I want to say something else : I use the grid extension gridlock and if cellactions (or rowactions too) element are in a locked cell, then events are not raised. An idea to raise them?

jsakalos
22 Jan 2010, 1:17 PM
All required css files included? Any conflicting custom css?

feanor91
25 Jan 2010, 1:49 AM
All required css files included? Any conflicting custom css?

euh...No...and No.

Ok I put the good css in (=;)

It's good. But about the locking grid problem?

jsakalos
25 Jan 2010, 2:28 AM
What's "locking grid problem"?

feanor91
25 Jan 2010, 2:40 AM
Well

First I'm on Ext 3.0.3.

Second, I use a grid extension that permit to lock/unlock columns (found on this forum : ColumnLock v1.7.1 for Ext 3 http://www.extjs.com/forum/showthread.php?t=17942&highlight=ColumnLock for V2 and http://www.extjs.com/forum/showthread.php?t=76324 for V3) so locked column are'nt move when you use the botom scroll bar to see all grid columns.

So my first three columns are locked. If I put a cellaction (or rowaction, it's the same) in a locked column, events are'nt fired, if I unlock the column where the action is in, events are fired.

jsakalos
25 Jan 2010, 2:56 AM
I've never used that extension. Try to find out with Condor if he doesn't stop some events in the ux.

feanor91
25 Jan 2010, 2:59 AM
Sorry I did not understand your answer. You will say you will try to find out or you want me to find with Condor what happen?

jsakalos
25 Jan 2010, 3:00 AM
No, I advise YOU to contact Condor to find out if his extension blocks/stops some events.

feanor91
25 Jan 2010, 3:04 AM
OK

Condor
25 Jan 2010, 3:40 AM
To answer your question:
No, LockingGridView doesn't block any events, but it does have 2 separate elements for the locked and the scrolling section.

This plugin only attaches a click event handler to the mainBody element (which contains the scrolling section of the LockingGridView), but it doesn't attach an event handler to the locked section (lockedBody).

You could fix this by attaching the click event handler to 'el' instead of 'mainBody'.

ps. I briefly looked at the code for CellActions and noticed that the onClick handler really should specify the stopEl as the second argument to the getTarget calls (otherwise it will look for the action element outside the grid!).

feanor91
25 Jan 2010, 4:13 AM
Thanks a lot, it works fine.

isit.gd
16 Feb 2010, 4:13 AM
hi

is there an known issue with having more than one grid with cellactions on one page?

mine keeps coming back witha stack overflow error when i configure 2 grids with cellactions.

w://

jsakalos
16 Feb 2010, 4:24 AM
Do you use same instance of something (grid, cellactions object)? Are your ids unique?

feanor91
17 Feb 2010, 11:54 PM
Hello

I have a little problem with cell action plugin while reconfiguring a grid.

First, I want my users to save their own grid configuration of the grid (order, width, lock...) to be reuse from session to session.

I get the key information of fhe colmodel to save in database, this part is ok

Second, I permit users to load their config from database, then I build a new columns array that I pass to the setconfig method. My collumns are well restored bu I lost the cellaction configuration icons are not redrawn

Here the base grid config :

http://img7.imageshack.us/img7/394/basesy.jpg

and after setconfig :

http://img688.imageshack.us/img688/179/setconfig.jpg

As you can see icons of name columns are not visible.

Before using setconfig, I used grid.reconfigure and found that code on forum that is a modification of the init function :


,init:function(grid) {
this.grid = grid;
// grid.on({scope:this, render:this.onRenderGrid});
grid.afterRender = grid.afterRender.createSequence(this.onRenderGrid, this);
grid.reconfigure = this.reconfigure.createDelegate(this);
this.initColModel(this.grid.getColumnModel());
},

reconfigure: function(store, colModel) {
this.initColModel(colModel);
Ext.grid.GridPanel.prototype.reconfigure.apply(this.grid, arguments);
},

initColModel: function(cm) {
Ext.each(cm.config, function(c, idx) {
if('object' === typeof c.cellActions) {
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);
}
Problem with this method is that I lost my list columns filters, all were replaced with text filter....but cel actions icons are OK

So I thinked in myself thar I have just to do that :


,init:function(grid) {
this.grid = grid;
// grid.on({scope:this, render:this.onRenderGrid});
grid.afterRender = grid.afterRender.createSequence(this.onRenderGrid, this);
grid.reconfigure = this.reconfigure.createDelegate(this);
grid.getColumnModel().setConfig = this.setConfig.createDelegate(this);
this.initColModel(this.grid.getColumnModel());
},

reconfigure: function(store, colModel) {
this.initColModel(colModel);
Ext.grid.GridPanel.prototype.reconfigure.apply(this.grid, arguments);
},

setConfig: function(store) {
var colModel = this.grid.getColumnModel();
this.initColModel(colModel);
Ext.grid.ColumnModel.prototype.setConfig.apply(this.grid.getColumnModel(), arguments);
this.grid.view.refresh(true)
//Ext.grid.GridPanel.prototype.reconfigure.apply(this.grid, arguments);
},

initColModel: function(cm) {
Ext.each(cm.config, function(c, idx) {
if('object' === typeof c.cellActions) {
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);
}
But it did'nt work. the code is well executed, all pass by the right place in debug but icons aren't redrawned. And I don't understand why since two days I work on this.

A little help will be apreciated.

jsakalos
18 Feb 2010, 11:49 AM
CellActions were written for Ext 2.0 and it has never been truly ported to Ext 3.x infrastructure. I'm planning in the very new future to revise all my extensions, including CellActions, and port them to Ext 3.x. However, I do not want to stop you in your effort. As to the problem itself, I do not know w/o deeper analysis of the code.

Anyway, stay tuned, new extensions and new ports of my existing extensions are to come soon.

feanor91
18 Feb 2010, 10:36 PM
Argh! It's not the reponse that I wanted to hear....Well, I will continue to dig into. For now, I have choice ever to lost list filter, or to lost cell action....A cornelian choice.

jsakalos
19 Feb 2010, 2:10 AM
I understand. I'm currently at the beginning of a bigger project that will include the extensions porting as well. If I went deep int "pieces" now, I couldn't work on the "whole". I'd like to ask you for patience, CellActions are on the list.

feanor91
19 Feb 2010, 2:55 AM
Well, OK, wait and see

andreidiego
5 Mar 2010, 11:40 AM
Hi Saki, at first congratulations by your amazing work with RowActions and CellAction.

I tried RowActions and it looks very very nice. Regarding CellActions, I am getting something odd when it comes to a grouping grid. Is CellActions prepared to work with grouping? Look at the images below:

Before grouping:
19137

After grouping:
19138

Source Code:
19139

Any clue of what can be wrong? Thanks in advance.

jsakalos
5 Mar 2010, 12:47 PM
I've never fully tested it. CellActions were more requested by users than needed by myself so I have no production grade application of them. Also, it can be Ext version issue.

In any case, I'm now working hard on new site and porting, or re-writing if necessary, of all my key extensions to the current Ext version. CellActions won't be first but I think they are popular so I won't drop them. I think a complete rewrite will be done of both Row and Cell Actions.

udalaitz
8 Mar 2010, 2:56 AM
Hi Saki,

First of all, thanks for the extension and for the effort you are putting in all of them.
I'm using the cellactions pluging with a couple of functions that Condor created to addColumns and fields dynamically to the grid (http://www.extjs.com/forum/showthread.php?t=53009)

The problem is that the columns and fields are added to the grid later than the config state.
What is happening to me is that the init function from the plugin is called before the new column model is set.

I've tried to add the following code to the "beforrender" listener of the grid:


var dif = 14;
...
for (var i=0; i<dif; i++){
grid.store.addField({name: i, type: 'int'});
grid.store.addField({name: 'action'+i, type: 'string'});
grid.store.addField({name: 'qtip'+i, type: 'string'});

grid.colModel.addColumn({header: i, dataIndex: i, width:20,
cellActions:[{
iconIndex:'action'+i,
qtipIndex:'qtip'+i,
style:'background-color:#f0f0f0;'}]
}, 2);
}

Ext.each(grid.colModel.config, function(c, idx) {
if('object' === typeof c.cellActions) {
c.origRenderer = grid.colModel.getRenderer(idx);
c.renderer = cellActions.renderActions.createDelegate(cellActions);
}
}, cellActions);

return true;

The last bit of the code is taken from the init function of the Ext.ux.Grid.Cellactions.js file:



,init:function(grid) {
this.grid = grid;
// grid.on({scope:this, render:this.onRenderGrid});
grid.afterRender = grid.afterRender.createSequence(this.onRenderGrid, this);

var cm = this.grid.getColumnModel();
Ext.each(cm.config, function(c, idx) {
if('object' === typeof c.cellActions) {
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);
I'm having the following error:
too much recursion
http://localhost/tm/lib/ext-3.1.1/adapter/ext/ext-base.js
Line 7

Any ideas? How can I link the new columns and fields to the cellaction plugin?

Thanks in advance.

My grid is defined like:


var cm = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(),
{id : 'cl_res_stb_scriptName_id', header : 'Test Name', width: 300, sortable: true, dataIndex: 'scriptName',cellActions:[{
iconIndex:'action1',
qtipIndex:'qtip1',
style:'background-color:#f0f0f0;'}]}
]
});

var cellActions = new Ext.ux.grid.CellActions({
listeners:{
action:function(grid, record, action, value) {
Ext.ux.Toast.msg('Event: action', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
,beforeaction:function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
,callbacks:{
'icon-undo':function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', value, action);
}
}
,align:'left'
});

this.grid = {
xtype : 'grid',
name : 'grid_res_stb',
id : 'grid_res_stb_id',
loadMask: true,

store : new Ext.data.JsonStore({
url : './actions/get-results-stb.php',
root : 'data["results"]',
total : 'data["totalCount"]',
autoDestroy: true,
id : 'store_stbs_on_schedule_id',
fields : [
{name: 'scriptName', type: 'string'},
{name: 'action1', type: 'string'},
{name: 'qtip1', type: 'string'}
]
}),
cm : cm,
stripeRows : true,
minHeight : 100,
maxHeight : 400,
height : 350,
autoScroll : true,
anchor : '100%',
collapsible : false,
border : true,
plugins :[cellActions],
listeners :{
'beforerender': function(grid) {
var difDays = Math.round((grid.store.baseParams.sectoDt - grid.store.baseParams.secfromDt)/(60*60*24));
for (var i=0; i<difDays ; i++){
grid.store.addField({name: i, type: 'int'});
grid.store.addField({name: 'action'+i, type: 'string'});
grid.store.addField({name: 'qtip'+i, type: 'string'});

grid.colModel.addColumn({header: i, dataIndex: i, width:20,
cellActions:[{
iconIndex:'action'+i,
qtipIndex:'qtip'+i,
style:'background-color:#f0f0f0;'}]
}, 2);
}

Ext.each(grid.colModel.config, function(c, idx) {
if('object' === typeof c.cellActions) {
c.origRenderer = grid.colModel.getRenderer(idx);
c.renderer = cellActions.renderActions.createDelegate(cellActions);
}
}, cellActions);

return true;
}
}
};

jsakalos
8 Mar 2010, 12:10 PM
I have ideas but it would mount to complete re-writing. CellActions were not designed for dynamically adding/removing in the first place.

SimoAmi
17 Mar 2010, 12:40 PM
In your implementation, can you think of a way to enable mouseover per icon? possibly through the use of addClassOnOver() in the renderer.

I find it tricky to do so. I was thinking to add a "refresh" listener on the grid.view and access icon nodes for each cell to add events. But then since cells are more likely to be refreshed, I'd need to destroy old events to prevent memory leaks.

Can you share some ideas?

jsakalos
17 Mar 2010, 2:50 PM
The plan is to rewrite the extension completely with the support of all new methods of Ext 3.x; I only need to finish my new extensions site first.

SimoAmi
18 Mar 2010, 6:50 AM
I would like for the framework to support assessment of the renderer's return value and enable dom element as an alternative return value type.

This would enable cells with dynamic behavior, e.g. mouse over, click event set on the renderer, rather than rendering the view and adding event in different calls.

I also see this reduce your extension's code significantly.
Agree?

jsakalos
18 Mar 2010, 9:11 AM
I would be interesting to see the concept working in a showcase. I like the idea, could be nice feature.

mf-p.GoD
9 Apr 2010, 12:24 AM
I load grid columns dynamically and after the grid methods:
this.getColumnModel().setConfig(columns);
this.reconfigure(this.getStore(), this.getColumnModel());
that reconfigure the column model, cell actions fields do not render.
I made such overrides:

(function() {
var originalInit = Ext.ux.grid.CellActions.prototype.init;
Ext.override(Ext.ux.grid.CellActions, {
onReconfigure: function(store, colModel) {
var cm = this.grid.getColumnModel();
Ext.each(cm.config, function(c, idx) {
if ('object' === typeof c.cellActions) {
c.origRenderer = cm.getRenderer(idx);
c.renderer = this.renderActions.createDelegate(this);
}
}, this);
this.grid.getView().refresh();
},
init: function(grid) {
//call the original init function
originalInit.apply(this, arguments);
//add one more event listener
grid.reconfigure = grid.reconfigure.createSequence(this.onReconfigure, this);
}
});
})();

So i propose to improve the cell action plug in with my code.

ShaliniOsd
30 Apr 2010, 7:46 AM
Hi

Does anyone here know how to format a text in a gridpanel cell that has image in it. I am using cellaction but the problem is if the text is to large it over laps on other columns.

Thanks in advance

jsakalos
30 Apr 2010, 2:21 PM
Post please a screenshot of that. Cells are normally overflow:hidden so that shouldn't happen.

ATK1337
3 May 2010, 7:19 AM
Hi

Does anyone here know how to format a text in a gridpanel cell that has image in it. I am using cellaction but the problem is if the text is to large it over laps on other columns.

Thanks in advance

Any fix for this? I have the same problem.

jsakalos
3 May 2010, 1:21 PM
Guys, you must have something wrong. This is screencast of my example running agains Ext 3.2.1: http://www.screencast.com/t/MDg3ZDkxYzA

ShaliniOsd
4 May 2010, 7:40 AM
I cant see the link you sent. Also is there a way I could send you my file to see whats wrong. I am doing exactly what that example does. I am not including the Webpage.js is that a problem?

ShaliniOsd
4 May 2010, 8:35 AM
I have posted my code. Please review this and let me know. Thursday it will go into production and I need this working so please help.


I haven't used Webpage.js do you think that is causing a problem. The text and image over follows into other cells.

Thank you


var filterBy = "";
function convertDate1(v) {
if (v != null) {
returnnew Date(parseFloat(v.slice(6, 19))).dateFormat('m/d/Y H:i:s');

}
}
actionRecord = Ext.data.Record.create
([
{ name: 'ActionId', type: 'int' },
{ name: 'ADMId', type: 'int' },
{ name: 'UserId', type: 'string' },
{ name: 'StatusId', type: 'string' },
{ name: 'AssignedOrgCode', type: 'string' },
{ name: 'AssignedOrgDesc', type: 'string' },
{ name: 'DefOversightOrgCode', type: 'string' },
{ name: 'DefOversightOrgDesc', type: 'string' },
{ name: 'OversightOrgDesc', type: 'string' },
{ name: 'admSubject', type: 'string' },
{ name: 'ActionName', type: 'string' },
{ name: 'ADMDeadlineDate', type: 'date', dateFormat: 'Y-m-d H:i:s', convert: convertDate },
{ name: 'DeadlineDetails', type: 'string' },
{ name: 'CurrentDeadlineDate', type: 'date', dateFormat:'Y-m-d H:i:s',convert: convertDate},
{ name: 'LastupdateDate', type: 'date', dateFormat: 'Y-m-d H:i:s', convert: convertDate1 },
{ name: 'StatusDesc', type: 'string' },
{ name: 'ActionComment', type: 'string' },
{ name: 'OversightOrgCode', type: 'string' },
{ name: 'ApprovalOrgCode', type: 'string' },
{ name: 'ApprovalOrgDesc', type: 'string' },
{ name: 'ApprovalDate', type: 'date', dateFormat: 'Y-m-d H:i:s', convert: convertDate },
{ name: 'admName', type: 'string' },
{ name: 'admComment', type: 'string' },
{ name: 'ExceptionSubject', type: 'string' },
{ name: 'OrgList', type: 'string' },
{ name: 'PocName', type: 'string' },
{ name: 'Icon', type: 'string' },
{ name: 'Edit', type: 'string' },
{ name: 'Pdf', type: 'string' },
{ name: 'ActionComment', type: 'string' }, // data for qtip1
{ name: 'StatusComment', type: 'string' }, // data for qtip1
{ name: 'ActionDesc', type: 'string' }, // data for qtip2
{ name: 'admSubject', type: 'string' },
{ name: 'POCDetails', type: 'string' },
{ name: 'ADMDetails', type: 'string' },
{ name: 'SignedAdmDoc', type: 'string' },
{ name: 'EditTooltip', type: 'string' },
{ name: 'TotalItemCount', type: 'int' },
{ name: 'edit', type: 'string'},
{ name: 'del', type: 'bool'}// data for qtip3
]);


var actionReader = new Ext.data.JsonReader({ root: 'Action', totalProperty: 'total',
id: 'ActionId'}, actionRecord);
var actionGridStore = new Ext.data.Store({ sortInfo: { field: 'PocName', direction: 'ASC' }, id: 'actionGS', proxy: new Ext.data.HttpProxy({ url: sVirtualDirectoryPath + '/Actions/GetActionItems', method: 'POST' }),
baseParams: { userId: userName, start: 0, limit: 100, dir: 'ASC', sort: 'CurrentDeadlineDate' }, reader: actionReader, remorteSort:true
});

Ext.ns('ToolTipActionsGrid');
ToolTipActionsGrid.version = 'AAT 1.0';
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
var Checkbox = new Ext.grid.CheckColumn({ header: 'Del', sortable: false, hideable: false, hidden: ReadOnly, menuDisabled: true, filterable: false, width: 10, dataIndex: 'del'
});
var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: true,
filters:
[{
type: 'string',
dataIndex: 'admSubject'
}, {
type: 'list',
dataIndex: 'AssignedOrgDesc',
options: arrOrganizationFilter,
phpMode: true
}, {
type: 'list',
dataIndex: 'DefOversightOrgDesc',
options: arrOrganizationFilter
}, {
type: 'string',
dataIndex: 'ActionName'//,
// disabled: true
}, {
type: 'date',
dataIndex: 'ADMDeadlineDate'
, renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
type: 'date',
dataIndex: 'CurrentDeadlineDate'
, renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
type: 'list',
dataIndex: 'StatusDesc',
options: ['Pending', 'Complete', 'Overdue', 'OBE', 'Deferred', 'Retracted']//,
// phpMode: true
}, {
type: 'string',
dataIndex: 'admName'
}, {
type: 'list',
dataIndex: 'PocName',
options: arrPOCFilter
}, {
type: 'date',
dataIndex: 'LastupdateDate'
}]

});

ToolTipActionsGrid.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
this.cellActions = new Ext.ux.grid.CellActions({
listeners: {
action: function(grid, record, action, value) {
var rec = grid.getSelectionModel().getSelected();
if (rec.data.DefOversightOrgDesc == value) {
Ext.ux.Toast.msg('Oversight Organization', '<b>{0}</b> <b>{1}</b>', rec.data.OversightOrgDesc, '');
}
elseif (rec.data.PocName == value) {
Ext.ux.Toast.msg('POC', '<b>{0}</b> <b>{1}</b>', rec.data.POCDetails, '');
}
elseif (rec.data.admName == value) {
Ext.ux.Toast.msg('ADM Signed Document', '<b>{0}</b> <b>{1}</b>', rec.data.SignedAdmDoc, '');
}
elseif (rec.data.StatusDesc == value) {
Ext.ux.Toast.msg('Status Comment', '<b>{0}</b> <b>{1}</b>', rec.data.StatusComment, '');
}
elseif (rec.data.CurrentDeadlineDate == value) {
Ext.ux.Toast.msg('Current Deadline Details', '<b>{0}</b> <b>{1}</b>', rec.data.DeadlineDetails, '');
}
elseif (rec.data.edit == value) {
selActionRecordStore = record
SelectedActionRow(selActionRecordStore);
}
}
, beforeaction: function() {
// Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
}
, callbacks: {
'icon-undo': function(grid, record, action, value) {
Ext.ux.Toast.msg('Callback: icon-undo', 'You have clicked: <b>{0}</b>, action: <b>{1}</b>', record.data.qtip1, action);
}
}
, align: 'right'
});


// configure the grid
Ext.apply(this, {
border: false,
store: actionGridStore,
columns: [Checkbox,
{
dataIndex: 'edit',
header: 'Edit',
width: 5,
sortable: false,
hideable: false,
hidden: ReadOnly,
menuDisabled: true,
filterable: false,
cellActions:
[{
iconIndex: 'Edit',
hidden: ReadOnly,
qtipIndex: 'EditTooltip'
}]
}, {
dataIndex: 'admSubject',
header: 'Subject',
sortable: true,
width: 40,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
}, {
dataIndex: 'AssignedOrgDesc',
header: 'Assigned Org',
sortable: true,
width: 30,
id: 'assignedorg'
}, {
dataIndex: 'DefOversightOrgDesc',
header: 'Oversight Org',
sortable: true,
width: 30,
cellActions: [{ iconIndex: 'Icon', qtipIndex: 'OversightOrgDesc'}]
}, {
dataIndex: 'ActionName',
sortable: true,
header: 'Action',
width: 100,
cellActions: [{ iconIndex: 'Icon', qtipIndex: 'ActionComment'}]
}, {
dataIndex: 'ADMDeadlineDate',
header: 'ADM Deadline',
width: 40,
hidden: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'CurrentDeadlineDate',
sortable: true,
header: 'Current Deadline',
width: 40,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
cellActions: [{ iconIndex: 'Icon',
qtipIndex: 'DeadlineDetails'
}]
}, {
dataIndex: 'StatusDesc',
sortable: true,
width: 30,
header: 'Status',
cellActions: [
{iconIndex: 'Icon', qtipIndex: 'StatusComment'}]
},
{
dataIndex: 'admName',
sortable: true,
header: 'ADM',
width: 80,
hidden: true,
cellActions:
[{
iconIndex: 'Icon',
qtipIndex: 'ADMDetails'
},
{
iconIndex: 'Pdf',
qtipIndex: 'SignedAdmDoc'}]

},
{
dataIndex: 'PocName',
sortable: true,
header: 'POC',
width: 50,
cellActions: [
{ iconIndex: 'Icon', qtipIndex: 'POCDetails'}]
}, {
dataIndex: 'LastupdateDate',
sortable: true,
header: 'Last Updated',
renderer: Ext.util.Format.dateRenderer('m/d/Y H:i:s'),
width: 40
}],
plugins: [this.cellActions, filters, Checkbox],
autoExpandColumn: 'action',
viewConfig: { forceFit: true },
stripeRows: true,
loadMask: true,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true//,
}),
clicksToEdit: 1,
bbar: new Ext.PagingToolbar({
id: 'actionPagingBar',
pageSize: 100,
store: actionGridStore,
// displayInfo: true,
// displayMsg: 'Displaying Items {0} - {1} of {2}',
// emptyMsg: "No items to display",
plugins: filters
})
});
// call parent
ToolTipActionsGrid.Grid.superclass.initComponent.apply(this, arguments);
}
,
initEvents: function() {
ToolTipActionsGrid.Grid.superclass.initEvents.call(this);
} // eo function initComponent
, onRender: function() {
// call parent
ToolTipActionsGrid.Grid.superclass.onRender.apply(this, arguments);
filters.clearFilters();
Ext.getCmp('gridActions').getColumnModel().setHidden(6, true);
Ext.getCmp('gridActions').getColumnModel().setHidden(9, true);
if (userName == "ALL")
{
Ext.getCmp('gridActions').getColumnModel().setHidden(0, true);
Ext.getCmp('gridActions').getColumnModel().setHidden(1, true);
}
else
{
Ext.getCmp('gridActions').getColumnModel().setHidden(0, false);
Ext.getCmp('gridActions').getColumnModel().setHidden(1, false);
}
if (filterBy == "ALL") {
filters.clearFilters();
filters.getFilter('StatusDesc').setActive(true, true);
filters.getFilter('StatusDesc').setValue(['OBE', 'Overdue', 'OBE', 'Deferred', 'Pending', 'Retracted']);
}
else {

filters.getFilter('PocName').setActive(true, true);
filters.getFilter('PocName').setValue(filterBy);
filters.getFilter('StatusDesc').setActive(true, true);
filters.getFilter('StatusDesc').setValue(['OBE', 'Overdue', 'OBE', 'Deferred', 'Pending', 'Retracted']);
actionGridStore.sortInfo.field = "CurrentDeadlineDate";
actionGridStore.sortInfo.direction = "ASC";
}
} // eo function onRender
}); // eo extend
actionGridStore.sortInfo.field = "CurrentDeadlineDate";
actionGridStore.sortInfo.direction = "ASC";
// register component
Ext.reg('toolTipActionsGrid', ToolTipActionsGrid.Grid);
// add some buttons to bottom toolbar just for demonstration purposes
actionGridStore.on('load', function(s, r) {
Ext.each(r, function(rec) { rec.data.UserId = unescape(rec.data.UserId); { if (userName == "ALL") { filterBy = "ALL" } else { filterBy = currentUser } }; });
});
filters.bindStore(actionGridStore);
actionGridStore.load({ params: { userId: userName, start: 0, limit: 100, dir: 'ASC', sort: 'userId'} });
//actionGridStore.load();

jsakalos
4 May 2010, 8:38 AM
I cant see the link you sent It is screencast video that (most likely) uses flash so you may need to install flash plugin for your browser. Or try another computer.

Also is there a way I could send you my file to see whats wrong.I don't know what exactly you mean. I can do something about it only if I can reproduce the issue.

jsakalos
4 May 2010, 8:43 AM
You posted the code meanwhile... Anyway, I need a showcase (http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase) that I can save to my server and run w/o change. The best would be zip file with all necessary files.

ShaliniOsd
4 May 2010, 9:09 AM
Please let me know if these are the only js files I need

1. Ext.ux.grid.CellActions.js
2. Ext.ux.grid.CellActions.css
3. Ext.ux.Toast.js

Other than that I am displaying the image on the right which is a little different from your example but not a major difference. Also I have a regular grid Panel and not an editor grid panel

I compared your cellActions.js file and my code they are similar. I dont have the code in webpage.js. I just didnt think it was required.

Unfortunately because of the security reasons I cant send more files.

If you could tell me the required files for cellactions to work I think that will be a good start. If you could review my code and see if I have missed a property or just about anything it will be greatly appreciated

Thank you

P.S I have several plugins filter and checkbox

I am not sure if that could cause a problem

jsakalos
4 May 2010, 10:00 AM
Well, I cannot tell what you need for creating the showcase. To fix it, if there is anything to fix, I need files(s) that show the problem and that I can copy/run/debug/edit/fix locally.

ShaliniOsd
7 May 2010, 8:06 AM
Hi

I didnt add the extjs files I tried in 3.2.1 as well I have the same issue. The only think you need to add is the Extjs library. With the extjs library that sample app is too large and your server is rejecting it.

Thanks
Shalini

ShaliniOsd
7 May 2010, 9:13 AM
Hi

I just realised that it happens only in a .aspx page and not .html page. The exact same code and the cell data us overflowing into other cells in only a .aspx page. Is there a fix for this.

Thanks

ShaliniOsd
7 May 2010, 10:12 AM
Please include the extjs library under scripts folder for this to work. I noticed it does not work with .aspx. I am trying to send you a .NET sample application but the upload says file too large. So I am unable to do this.


Thanks

jsakalos
7 May 2010, 11:16 PM
What is "aspx" and ".NET"? Yes, I'm kidding, anyway, I have no chance to run anything M$ related except IE. I use Linux and Mac.

ShaliniOsd
8 May 2010, 5:55 AM
So you are telling that your plugins don't support Microsoft .NET applications. This is very disappointing. Extjs proclaims compatability with all platforms. Our company was impressed with your plugins and I was even going to donate using your pay pal option but I will make sure I avoind your site in future for any plugins

jsakalos
9 May 2010, 3:20 PM
You must have misunderstood something. ExtJS is client side library and my extensions and plugins are for ExtJS, thus, they are also client side. Neither ExtJS nor my extensions/plugins care what's running on the server. I personally do not support any server-side platform/software.

ShaliniOsd
10 May 2010, 5:58 AM
In Ext.ux.grid.CellActions.js I replaced the tpl with


tpl:'<div class="ux-cell-value" <tpl if="\'left\'===align">style="padding-left:{padding}px;"</tpl> <tpl if="\'left\'!==align">style="padding-right:{padding}px;"</tpl> >'
+'<tpl if="\'left\'!==align"><div style="width:100%;overflow:hidden;">{value}</div></tpl>'
+'<div class="ux-cell-actions<tpl if="\'left\'===align"> ux-cell-actions-left</tpl>" style="width:{width}px">'
+'<tpl for="actions"><div class="ux-cell-action {cls}" qtip="{qtip}" style="{style}"> </div></tpl>'
+'</div>'
+'<tpl if="\'left\'===align"><div>{value}</div></tpl>'
+'<div>'


This resolved my issue.

Thanks