PDA

View Full Version : [1.0] Grid RowActions Plugin



Pages : [1] 2 3 4

jsakalos
19 Mar 2008, 3:26 PM
MAJOR UPDATE

I have updated RowAction to RowActions (plural) that provides much more features. See http://rowactions.extjs.eu for details. See also Grid CellActions Plugin (http://extjs.com/forum/showthread.php?t=30411) to get the full concept of grid actions.

Cheers,
Saki

Note: You don't need RowAction + RowActions, use only RowActions. I keep RowAction here only as a reference for users who already used it.

-------- Original post follows -------

Hi folks,

this plugin has been around (http://extjs.com/forum/showthread.php?p=117186) on the Premium Help Forum for some time and I'm keeping referencing it in some of my answers so I thought that it would deserve it's own thread.

What is it for? Imagine you need some icons in a grid that you want to bind some actions to: delete row, edit row, whatever. That is exactly what this plugin makes easy. It displays an icon and fires two events: beforeaction (return false to cancel) and action (here you put the action you want to execute). Arguments to event contain reference to grid, record of store of row being clicked and index of row.

Code of plugin:


// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
* RowAction plugin for Ext grid
*
* Contains renderer for an icon and fires events when icon is clicked
*
* @author Ing. Jozef Sakalos <jsakalos at aariadne dot com>
* @date December 29, 2007
* @version $Id: Ext.ux.grid.RowAction.js 126 2008-01-31 03:33:50Z jozo $
*
* @license Ext.ux.grid.RowAction 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
*/

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

/**
* @class Ext.ux.grid.RowAction
* @extends Ext.util.Observable
*
* Creates new RowAction plugin
* @constructor
* @param {Object} config The config object
*
* @cfg {String} iconCls css class that defines background image
*/
Ext.ux.grid.RowAction = function(config) {
Ext.apply(this, config);

this.addEvents({
/**
* @event beforeaction
* Fires before action event. Return false to cancel the subsequent action event.
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record corresponding to row clicked
* @param {Integer} rowIndex
*/
beforeaction:true
/**
* @event action
* Fires when icon is clicked
* @param {Ext.grid.GridPanel} grid
* @param {Ext.data.Record} record Record corresponding to row clicked
* @param {Integer} rowIndex
*/
,action:true
});

Ext.ux.grid.RowAction.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.RowAction, Ext.util.Observable, {
header:''
,sortable:false
,dataIndex:''
,width:20
,fixed:true
,lazyRender:true
,iconCls:''

// private - plugin initialization
,init:function(grid) {
this.grid = grid;
var view = grid.getView();
grid.on({
render:{scope:this, fn:function() {
view.mainBody.on({
click:{scope:this, fn:this.onClick}
});
}}
});
if(!this.renderer) {
this.renderer = function(value, cell, record, row, col, store) {
cell.css += (cell.css ? ' ' : '') + 'ux-grid3-row-action-cell';
var retval = '<div class="' + this.getIconCls(record, row, col) + '"';
retval += this.style ? ' style="' + this.style + '"' : '';
retval += this.qtip ? ' ext:qtip="' + this.qtip +'"' : '';
retval += '> </div>';
return retval;
}.createDelegate(this);
}
} // eo function init

// override for custom processing
,getIconCls:function(record, row, col) {
return this.boundIndex ? record.get(this.boundIndex) : this.iconCls;
} // eo function getIconCls

// private - icon click handler
,onClick:function(e, target) {
var record, iconCls;
var row = e.getTarget('.x-grid3-row');
var col = this.grid.getView().getCellIndex(e.getTarget('.ux-grid3-row-action-cell'));

if(false !== row && false !== col) {
record = this.grid.store.getAt(row.rowIndex);
iconCls = this.getIconCls(record, row.rowIndex, col);
if(Ext.fly(target).hasClass(iconCls)) {
if(false !== this.fireEvent('beforeaction', this.grid, record, row.rowIndex)) {
this.fireEvent('action', this.grid, record, row.rowIndex, e);
}
}
}
} // eo function onClick
});

// eof
You need also css:


.ux-grid3-row-action-cell .x-grid3-cell-inner {
padding: 1px 0 0 0;
}
.ux-grid3-row-action-cell .x-grid3-cell-inner div {
background-repeat:no-repeat;
width:16px;
height:16px;
cursor:pointer;
}
And an example usage would be:



var action = new Ext.ux.grid.RowAction({iconCls:'xxx',qtip:'yyy'});
var grid = new Ext.grid.GridPanel({
columns:[action, ....],
plugins:[action, ....]
});
action.on('action', function(grid, record) {...});

vendiddy
19 Mar 2008, 7:15 PM
Thanks! I had some hacked-together code to accomplish something like this, but this is much better.

I tried it and it works without any issues. :D

sfwalter
21 Mar 2008, 11:48 AM
I tried creating two instances but the my action listener seems to get called for all the instance. For example if I have 2 instances (a delete and a rollback button). When I click on the "rollback" button the delete action gets executed and vice versa.

any thoughts?

jsakalos
21 Mar 2008, 11:59 AM
You need to have one instance per column. I'd suspect there some mismatch there - I use several row actions in one grid w/o troubles.

jsakalos
21 Mar 2008, 12:02 PM
Some code that illustrates that:


,initComponent:function() {

this.actionOpen = new Ext.ux.grid.RowAction({
iconCls:'icon-go-tab'
,qtip:this.openSetText
});
this.actionDelete = new Ext.ux.grid.RowAction({
iconCls:'icon-trash-closed'
,qtip:this.deleteText
});
Ext.apply(this, {
......
,plugins:[
new Ext.ux.grid.Search({position:'top'})
,this.actionDelete
,this.actionOpen
]
.....

jerrybrown5
21 Mar 2008, 3:20 PM
Saki,
It looks really nice, but out of curiosity how difficult would it be to allow multiple actions to be in the same column? To take it to the final wish list step would it be possible to put an action item in the middle of a field while using a custom renderer on a grid column?

Best regards,
Jerry Brown

jsakalos
21 Mar 2008, 5:03 PM
Saki,
It looks really nice, but out of curiosity how difficult would it be to allow multiple actions to be in the same column? To take it to the final wish list step would it be possible to put an action item in the middle of a field while using a custom renderer on a grid column?

Best regards,
Jerry Brown

Something like on screenshot? I'll take a look ;)

jerrybrown5
21 Mar 2008, 5:47 PM
Thanks Saki. That is part of what I'm looking for. Also, I was thinking if you can put an action in a custom renderer (of course I would have to put a certain class name around the action button div) then I'll be able to put an action button in a grid grouping row.

Best regards,
Jerry Brown

jsakalos
21 Mar 2008, 6:31 PM
You can set your renderer from outside even in the current version. Take a look at the code.

jerrybrown5
21 Mar 2008, 7:17 PM
Saki,
I guess I wasn't specific enough on my last question. After thinking about it more there are no troubles since (on my renderer) I can easily mimic the div structure on your renderer without having to add a new column.

Thanks again.

Jerry Brown

jsakalos
22 Mar 2008, 4:05 PM
MAJOR UPDATE

I have updated RowAction to RowActions (plural) that provides much more features. See http://rowactions.extjs.eu (http://rowactions.extjs.eu/) for details.

Cheers,
Saki

jerrybrown5
22 Mar 2008, 5:22 PM
Saki,
This is really nice. I like how you are showing multiple action buttons on the same row. I also like you are you consolidating the number of plugins loaded when there are multiple actions. This will minimize the number of times the click event will be handled.

* I have a few quick questions though. I see that you are modifying the store in the demo. Is that required? This would cause a problem with me since I centrally load and share stores across my applications.

* I also need to put an action button in the header template of a grouped Grid. This causes an issue since the current onClick handler on pursuit of a record can not go back to a row from the header template click that will expose the rowIndex. Perhaps, the best thing to get back to the record on a groupingView click (test if the row and col return null) is to do something like this:



,onClick:function(e, target) {
...
var groupingRow=e.getTarget('.x-grid-group');
if (groupingRow){

var recordNo=this.grid.store.data.findIndex('_groupId',groupingRow.id);
if (recordNo!=-1) { record=this.grid.store.getAt(recordNo)}
}

Also, you can back to the col in a safer way by using the following. It is more flexible that it doesn't require the ux css class to be loaded at the cell level.



var col = this.grid.getView().findCellIndex(e.target);
One more thing is it possible to have a function that returns the necessary span html for a given action. This will more easily enable these actions items to be dispersed within different fields.


Thanks again for developing such a nice add on.

Best regards,
Jerry Brown

jsakalos
22 Mar 2008, 6:00 PM
* I have a few quick questions though. I see that you are modifying the store in the demo. Is that required? This would cause a problem with me since I centrally load and share stores across my applications.

No, store is not modified, it's used in read-only fashion by the extension.


* I also need to put an action button in the header template of a grouped Grid. This causes an issue since the current onClick handler on pursuit of a record can not go back to a row from the header template click that will expose the rowIndex. Perhaps, the best thing to get back to the record on a groupingView click (test if the row and col return null) is to do something like this:
I'm not sure if I'm getting this fully (a working example would be best) but clicks are handled by the listener installed on the grid's body so it shouldn't be difficult to identify click anywhere in the body. If that what you need is general enough (e.g. supporting grouping stores/grids) post an example I can work with and I'll take a look a it to see what can be done about it.


[Also, you can back to the col in a safer way by using the following. It is more flexible that it doesn't require the ux css class to be loaded at the cell level.



var col = this.grid.getView().findCellIndex(e.target);
You're right I've updated the code.

One more thing is it possible to have a function that returns the necessary span html for a given action. This will more easily enable these actions items to be dispersed within different fields.I'm not sure if I want to open it in this direction. Now the plugin works fine cross browser and I think that current functionality is more than enough.

jsakalos
22 Mar 2008, 6:05 PM
Sorry, posted too fast. findCellIndex doesn't work.

jerrybrown5
22 Mar 2008, 6:16 PM
It worked on the last version. I believe by default it goes up three levels to check for the grid cell class. You may want to increase it. [update three levels was the issue..I upped the limit on my version]

jerrybrown5
23 Mar 2008, 5:18 AM
Saki,
In appreciation of your last update, I took it where you left off and have incorporated my two cents.

Among list of changes:
* Individual actions are separate objects
* Events are setup at the individual action level.
* Supports inline rendering. Although you can, you do not need dedicated column(s) anymore to actions. Just as a combox does, inline rendered actions will use a blank image to make sure it displays properly on all browsers.
* Fully supports actions that are rendered on the grouped view's header. It gives you the first grouped row on the handler. Also, it cancels out the toggleGroup command which normally gets fired before the action buttons are processed.

Best regards,
Jerry Brown

jsakalos
23 Mar 2008, 6:10 AM
Hi Jeff,

I've been playing (very briefly) with your changes and I'm still not getting what problem are you trying to solve. My opinions follow, sorry if they don't match yours:

One of the main design principles I used when creating RowActions was simplicity. Grid is quite heavy component by itself and plugging anything heavy into it would do no good. Therefore, I wouldn't use separate classes/object for actions.

Also, I miss the purpose of individual listeners for actions. The more events and more listeners the more complexity of code that leads to decreased performance and code maintainability in the long run.

Therefore, I liked very much your idea of putting more actions to one column, what original RowAction didn't allow, because it decreased number of objects, number of listeners and simplified the whole thing a lot. Introducing new objects, new listeners, changing the original grid routines (GroupingView, findCell routine, etc.) just doesn't fit to my K.I.S.S. attitude.

I do not get the concept of "inline button" that I see on your example. If it is really going to be button the question is why would I need button if I already have icon the (except of look) works like button. If it's going to be text then question is why would I need any changes if original RowActions support text besides icons (boundable to the store).

What would be best is to combine your ideas with my KISS attitude. Post please some mockup image with a description of what do you want to achieve that I can understand and I'll implement it. What I understand so far is that you want some support for grouping store/grid, I still don't have a clear concept of what it should be.

Let's use our different opinions and approaches for good of all. ;)

franklt69
23 Mar 2008, 7:07 AM
Saki I am agreed with keep RowAction simple because the grid is quite heavy component, but RowAction could be add very useful functionality and save more time to developer, not only add an icon with this event to do some action, it is wonderful but for instance,

I was wasting many time using a grid where I need when the user do dblclick on a row show a dialog to edit, and if the cell is for instance an email, or phone or an url show other dialog, the same done for RowAction, but don't working to me, so with RowAction now we can add an icon and get the action when the user click on it, why don't extend to do the same when we have other case (email, phone, url, ect) maybe RowAction with a renderer allow format the value in cell and get the action the user want. RowAction to me work ok using dbClick in the grid ect.

In other thread you explain me that I can do that using somethink like it:


{header: "Email", dataIndex: "Email", width: 150, sortable: true, renderer: this.emailRender.createDelegate(this) },

emailRender: function(val, cell, record) {
return '<a href="' + record.get('href') + '">' + val + '</a>';
},

but it don't work well to me, I stopped the research that to do other code in my app but now I am watching the community want to enhancement RowAction and again I would like that you consider this request.

regards
Frank

jsakalos
23 Mar 2008, 7:48 AM
If I understand well Frank, you're calling for something like "CellAction" because RowActions was meant to invoke an action on row of the grid. Dialing a phone or starting a mail client when clicking on a cell containing the corresponding value would need only cell to operate, right?

franklt69
23 Mar 2008, 8:37 AM
You are right Saki, I think CellAction will be right, it work like RowAction but on a cell or field in the grid, the point is in other thread I read about the tricks when is necessary to use dbclick, click or cellclick in a grid, it have interactions, so the basic idea of RowAction could be do some action (starting a mail client, Dialing a phone) when the user click on a cell it could be a field or an icon.

regards
Frank

jsakalos
23 Mar 2008, 8:55 AM
What you can test with current RowActions is to install an action event handler that would take data from other fields and it would, for example, started mail client. action event handler receives record as one of the arguments so it should be easy.

jsakalos
23 Mar 2008, 9:35 AM
Jeff,

take a look at the demo page now. It looks same as before when it loads but you can turn on grouping form Industry column menu.

Is that what you need? (Only UI is there at present, clicks do default actions of collapsing/expanding group.)

jerrybrown5
23 Mar 2008, 12:04 PM
Saki,
My name is Jerry btw (not Jeff). :)

I think you took the module very far. However, to be honest I was disappointed when you said that I couldn't do this or do that. My users needed more buttons and truthfully they don't care about technology methodologies. They need buttons on grouped header rows(perhaps a delete all button), buttons on individual columns on rows (which your first version did), buttons after text on a row (eg more info) and of course grouped add/mod/del buttons (which your second version supports) buttons. Look at html tables on websites. There are buttons everywhere. Why do I have to give this up because I use Ext?

I am a big fan of the KISS programming approach but I am a bigger fan of end user perspective and complete programmatic UI control. The end user does not care about programming/technology requirements. Buttons are the user's best way to communicate their intent back to the system. They need to be everywhere! :)

The biggest argument that you mentioned is that you have a single event handler for all buttons. This could easily be accomplished on my version in fact it was taken off at the end. Also, you mentioned that your version is simpler to the programmer. I'm not sure that is true either since I did not eliminate the feature to have all of the buttons in one row (the simple implementation). I only added the features to place an inline button and custom button handlers.

From within a text sting output of a custom renderer, this is the how you can now place a button:


rowActions.getInline('open')
Easy as pie. Since the config actions go into a MixedCollection, you don't even need to reference an array index--but you could if you want.

You should update my library where you see that you could make something more simple, but lets only add functionality and not take it away. Let's build upon each other to put this button issue behind us once and for all.

Best regards,
Jerry Brown

jerrybrown5
23 Mar 2008, 12:52 PM
For comparison purposes..I've enclosed screenshots and the sample implementation of Saki's last version (a single column of multiple buttons) and my enhanced version (it is the one with buttons everywhere). As you can see they are both very good and easy to implement.

Here is my implementation


var rowActions = new Ext.ux.grid.RowActions({
header:'Actions'
,autoWidth:false
,width:20
,actions:[{
name:'open',
iconCls:'icon-open'
,style:'width:15px'
,tooltip:'Open'
,listeners:{
action:function(rowActions2, grid, record, action, row, col, iconCls){
alert('You clicked the open button on row '+row);
}
}
},{
iconCls:'icon-wrench'
,style:'width:15px'
,tooltip:'Configure'
,listeners:{
action:function(rowActions2, grid, record, action, row, col, iconCls){
alert('You clicked the wrench button on row '+row);
}
}
},{
iconCls:'icon-user'
,tooltip:'User'
,style:'width:15px'
,listeners:{
action:function(rowActions2, grid, record, action, row, col, iconCls){
alert('You clicked the user button on row '+row);
}
}
}]
});




var grid = new xg.GridPanel({
plugins:rowActions,
...
columns: [
rowActions,
{
header: 'test', width: 30,
renderer:function(value, cell, record, row, col, store){
var button=rowActions.getInline('open', value, cell, record, row, col, store);
return 'inline button'+button;
}
},
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'}
...
],

view: new Ext.grid.GroupingView({
delayToggleGroup:true, /*special mode to reduce the flicker when clicking a header button*/
forceFit:true,
groupTextTpl:'The wonderful industry of {[values.rs[0].data.industry]}'+ rowActions.getInline('open')
}),

...
});
});
And here is Saki's.




Example.Grid = Ext.extend(Ext.grid.GridPanel, {

// {{{
initComponent:function() {

// Create RowActions Plugin
this.action = new Ext.ux.grid.RowActions({
header:'Actions'
,actions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,iconCls:'icon-open'
,tooltip:'Open'
},{
iconCls:'icon-wrench'
,tooltip:'Configure'
,qtipIndex:'qtip2'
,iconIndex:'action2'
},{
iconIndex:'action3'
,qtipIndex:'qtip3'
,iconCls:'icon-user'
,tooltip:'User'
,style:'background-color:yellow'
}]
});

// dummy action event handler - just outputs some arguments to console
this.action.on({
action:function(grid, record, action, row, col) {
//place if statements on the action here
console.info('You have clicked row: ' + row + ', action: ' + action);
}
});

// configure the grid
Ext.apply(this, {
...
,columns:[
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'}
...
,this.action /*this adds the single A/M/D column*/
]
,plugins:[this.action]
,viewConfig:{forceFit:true}
}); // eo apply

...

}
...
}}}

});

jsakalos
23 Mar 2008, 1:52 PM
Hi Jerry,

take a look at demo page now. The group actions are fully supported including event handling.

rekam
23 Mar 2008, 1:54 PM
Hi, and thanks for this little piece of code very useful!

just notice a CSS bug for IE6. The icons appear with a width of 2 pixel... I debugged that by adding a "width: 16px" in the RowActions.css for ux-row-action-item.

I think "min-width" isn't recognized by IE6

Well, I'm quite sure this is not the best option, but at least we can see normal icons on this browser.

Thanks and see ya!
rekam

jsakalos
23 Mar 2008, 1:54 PM
Jerry, sorry for mistake in your name.

jsakalos
23 Mar 2008, 1:59 PM
Hi, and thanks for this little piece of code very useful!

just notice a CSS bug for IE6. The icons appear with a width of 2 pixel... I debugged that by adding a "width: 16px" in the RowActions.css for ux-row-action-item.

I think "min-width" isn't recognized by IE6

Well, I'm quite sure this is not the best option, but at least we can see normal icons on this browser.

Thanks and see ya!
rekam

I'll fix it with ie6 specific css.

Gunmen
23 Mar 2008, 2:04 PM
Hi Saki,

Looks interesting... in IE however... see attachment.

jsakalos
23 Mar 2008, 2:29 PM
Hi Saki,

Looks interesting... in IE however... see attachment.

This has been fixed in css. See the demo now. (Check also group actions - you need to switch the grid to grouping mode.)

jerrybrown5
23 Mar 2008, 4:20 PM
Saki,
Don't worry about it...people call me Jeff all the time. ;)

I think you have made a lot of progress on the latest revision with a special note to the grouping handler. I like how you decided to override the expansion click event. It is cleaner than the way I chose. However, your version still does not have everything that I need.

Three missing items that I view as critical that my "advanced" version has:

*Individual action handlers. I don't want to code an if statement for each action. It does not follow the principals of structured programming.

* On the click handler you are passing back the iconCls class name instead of the action object that created the action. Again, this does not follow the principals of structured programming.

*getInline function on an action so that anyone can place an action anywhere inside a column cell value or grid header. Among many other things, this will allow a send email button next to an email address.

If you can add these items than your tool will meet my requirements. If not then I will continue to support/develop my "advanced" version, which is not my desire but just something that I will need to do since I can not do without this functionality.


Best regards,
Jerry Brown

jsakalos
23 Mar 2008, 4:50 PM
*Individual action handlers. I don't want to code an if statement for each action. It does not follow the principals of structured programming.

What would be possible here would be an optional callback config option. That would still keep the thing lightweight. IMO, switch statement gives the handler the necessary structure. I wouldn't expect that there will be more 10 cases in majority of applications. Linux kernel sources use switches for up to 20-100 cases and kernel works fine.


* On the click handler you are passing back the iconCls class name instead of the action object that created the action. Again, this does not follow the principals of structured programming.
I'll wouldn't go for an "action object"; it's just too much for this simple thing. As far as I can see it wouldn't provide any advantages as the only duty of such object would be to provide a configuration and listener or callback function. I'd use objects for more complex tasks.

*getInline function on an action so that anyone can place an action anywhere inside a column cell value or grid header. Among many other things, this will allow a send email button next to an email address.
This calls for another extension "CellAction" as I've discussed with Frank a couple of posts back. One of my design principles was to create RowActions that would operate on grid row. CellAction requires different approach - if I'll have time I'll take a look at it.

jerrybrown5
23 Mar 2008, 5:17 PM
Saki,
I put in my responses. I think a good technical debate is proper and required to get out the best way of doing things, especially on something as important as grid buttons--which will be used in hundreds if not thousands of applications.


That would still keep the thing lightweight. ... I wouldn't expect that there will be more 10 cases in majority of applications....I'll wouldn't go for an "action object"; it's just too much for this simple thing.


As you mentioned yourself since there won't be more than 10 actions ever on a grid, having each action as a separate object will not add much weight to the utility. It is like comparing the size of two files one being 3.1K and the other being 3.0K. True one is slightly larger but in reality it is negligible.




As far as I can see it wouldn't provide any advantages as the only duty of such object would be to provide a configuration and listener or callback function. ...


On obvious advantage that I'm not sure that you are seeing is that you could have global generic actions..eg delete a row, add a row, delete all items in a section, add item to a section,... . Action objects allow you to have fully encapsulated code from the presentation to the handling. I do not think we should discount this need.




This calls for another extension "CellAction" as I've discussed with Frank a couple of posts back. One of my design principles was to create RowActions that would operate on grid row. CellAction requires different approach - if I'll have time I'll take a look at it.

I am glad that you agree with the need; however, you are now proposing three separate modules (RowActions, RowAction and now CellAction) that all have the same general purpose and which could be handled effectively by a single plugin. IMHO, I think you might be adding to the compexity rather than taking away from it.

I look forward to your response.
Best regards,
Jerry Brown

jsakalos
23 Mar 2008, 5:46 PM
Very briefly Jerry, I must produce much and discuss little:

Lightweight means also maintainability, easy configuration, etc.

Global generic action can be an universal callback function. Doesn't need to be an instantiated class.

RowAction is not needed anymore, it is there only for backward compatibility for users who already used it. RowActions for RowActions, CellActions for CellActions used independently: one, another, or both depending on app.

So, are you interested in callbacks? Do you, or somebody else, want them? I don't so I'll implement them only if there is an interest.

jerrybrown5
23 Mar 2008, 6:24 PM
Saki,
IMO a technical debate is always preferable since 90% of programming is thought and only 10% for the keyboard. Also, thanks for asking but I'm not that interested in a call back function which is too Win32API for me. Plus it adds redundant event handling which muddles code.

Thanks for the clarification on RowAction. I assumed it was long term because it was still included on the download for RowActions. Two plugins (CellActions and RowActions) on the same grid would still cause multiple listeners on the click event which of course would increase the weight of the solution. Also, how are you going to determine where to place the click button inside the cell on the as of yet undeveloped CellActions module if you are not going to expose the inline function for an action. You would have to either put the action button in the back, the front, or would require the user to handcod a complex regex to place it. None of which I feel will be as clean as just grabbing the inline button code and then putting it whereever you want.

I defintely think the Ext community should move closer to real Global Level Actions. If done right they could be used in toolbars, menus and of course grid row actions, with little to no regard to where they are placed. More on this. I think a lot of attention has placed on creating wonderful controls but not enough attention has been placed on how to organize the business code that acts on these controls.

Best regards,
Jerry Brown

jsakalos
24 Mar 2008, 3:08 AM
I just cannot withstand the idea that I have an unimplemented concept... ;)

So I've implemented configurable callbacks and updated the demo page to show them.

jerrybrown5
24 Mar 2008, 3:20 AM
I agree with you. It is too much fun making new features to let something go undone.

franklt69
24 Mar 2008, 12:59 PM
Saki some doubts about RowAction and RowActions

I was using RowAction in this way:

this.actionStatus = new Ext.ux.grid.RowAction();
//override
this.actionStatus.getIconCls = function(record, row, col) {
if (record){
switch(record.data.Status) {

case 'Approved': this.qtip = "Approved";
return 'approved';
break;
case 'Billed': this.qtip = "Billed";
return 'billed'
break;
case 'Pending': this.qtip = "Pending";
return 'pending'
break;
case 'Posted': this.qtip = "Posted";
return 'posted'
break;

}
return 'icon-employeeCenter' ;
}
};
this.actionStatus.on('action', function(grid, record) {
alert('Status');
});


If I understand well, RowActions have more features that RowAction, but I was trying to migrate the code from RowAction to RowActions and don't work, so don't have compatibility
I don't watch the method getIconCls, so are (RowAction and RowActions) differents extensions or in theory RowActions will be the same features of RowAction more others?

now about cellAction you wrote:


What you can test with current RowActions is to install an action event handler that would take data from other fields and it would, for example, started mail client. action event handler receives record as one of the arguments so it should be easy.

could you give more detail because don't understand when wrote: is to install an action event handler

regards
Frank

jsakalos
24 Mar 2008, 4:18 PM
Frank,
if you don't have separate fields for statusIcon and statusTooltip in your store you can override getData method and setup RowActions as follows:


new Ext.ux.RowActions({
actions:[{
iconIndex:'statusIcon'
,qtipIndex:'statusQtip'
}]
,getData:function(value, cell, record) {
var status = record.get('Status');
return {
statusIcon:status ? status.toLowerCase() : 'icon-employeeCenter'
,statusQtip: status ? status : ''
}
}
});


It's written off-hand, I haven't tested it.

franklt69
25 Mar 2008, 12:36 PM
Saki using RowAction with this code the icon in grid appear ok


this.actionStatus = new Ext.ux.grid.RowAction();
//override
this.actionStatus.getIconCls = function(record, row, col) {
if (record){
switch(record.data.Status) {

case 'Approved': this.qtip = "Approved";
return 'approved';
break;
case 'Billed': this.qtip = "Billed";
return 'billed'
break;
case 'Pending': this.qtip = "Pending";
return 'pending'
break;
case 'Posted': this.qtip = "Posted";
return 'posted'
break;

}
return 'icon-employeeCenter' ;
}
};


this.sheetType = new Ext.ux.grid.RowAction();
this.sheetType.getIconCls = function(record, row, col) {

if (record){
//si tiene units, tiene unitprice y hours es 0 debe ser un expense sino tiene q ser un timesheet
if (record.data.ExpenseSheet_Units > 0 && record.data.ExpenseSheet_UnitPrice > 0 && record.data.TimeSheet_Hours == 0)
{
this.qtip = "Expense";
return 'coins';
}
else
{
this.qtip = "Time";
return 'clock';
}

}
};


Using RowActions with this code the icon in the grid appear Cut-out


//using RowActions
this.actionStatus = new Ext.ux.grid.RowActions({
actions:[{
iconIndex:'statusIcon'
,qtipIndex:'statusQtip'
}],
//override
getData : function(value, cell, record) {
var status = record.data.Status;
//debugger;
return {
statusIcon:status ? status.toLowerCase() : 'icon-employeeCenter'
,statusQtip: status ? status : ''
}
}
});


//using rowactions
this.sheetType = new Ext.ux.grid.RowActions({
actions:[{
iconIndex:'statusIcon'
,qtipIndex:'statusQtip'
}],
//override
getData : function(value, cell, record) {

if (record){
//si tiene units, tiene unitprice y hours es 0 debe ser un expense sino tiene q ser un timesheet
if (record.data.ExpenseSheet_Units > 0 && record.data.ExpenseSheet_UnitPrice > 0 && record.data.TimeSheet_Hours == 0)
{
return {
statusIcon:'coins'
,statusQtip: "Expense"
}
}
else
{

return {
statusIcon:'clock'
,statusQtip: "Time"
}
}

}

}
});

watch attachment

The same in FF2 and IE6

regards
Frank

jsakalos
25 Mar 2008, 1:42 PM
Looks like some colliding css. I've put same icons on demo page so you can check it out there. BTW, you need to include Ext.ux.grid.RowActions.css, but I think you've already done so.

franklt69
26 Mar 2008, 4:30 AM
Saki you are right I forget to include ../Lib/Plugin/rowactions/Ext.ux.grid.RowActions.css maybe I was working with rowaction and it don't need css file.

thanks again now is working ok

regards
Frank

jsakalos
27 Mar 2008, 12:12 PM
Beta 2 (http://rowactions.extjs.eu) is out.

Changes:
- code now uses XTemplate resulting in much shorter and cleaner code\
- group actions markup has changed for better cross-browser compatibility

Note: You may need to hard refresh your browser, otherwise it may use the old css.

Enjoy!

border9
28 Mar 2008, 2:37 AM
Ok, so ive been trying to add this to my code for about 2 hours now, and i havent the slightest idea what im doing wrong. This is just the bare code so you can if you wouldnt mind, give me some sort of an idea as to what im doing wrong.


<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'php/JSONQS.php'}),
reader: new Ext.data.JsonReader({
root: 'customers',
totalProperty: 'total'
},
[
{name: 'select', type: 'string' , mapping: 'select'},
{name: 'quote', type: 'string' , mapping: 'quote'},
{name: 'sitesubmit', type: 'string' , mapping: 'sitesubmit'},
{name: 'customertype', type: 'string' , mapping: 'customertype'},
{name: 'timerecieved', type: 'date', dateFormat: 'n/j h:ia' , mapping: 'timerecieved'},
{name: 'phonenum', type: 'string' , mapping: 'phonenum'},
{name: 'email', type: 'string' , mapping: 'email'},
{name: 'flname', type: 'string' , mapping: 'flname'},
{name: 'delquote', type: 'string' , mapping: 'delquote'}
]
)
});
var quotessent = new Ext.grid.GridPanel({
ds: store,
sm: new Ext.grid.RowSelectionModel(),

columns: [
{header: "Select", width: 10 , sortable: true, dataIndex: 'select'},
{header: "Quote Number", width: 28 , sortable: true, dataIndex: 'quote'},
{header: "Website Sumbit", width: 16 , sortable: true, dataIndex: 'sitesubmit'},
{header: "Customer Type", width: 25 , sortable: true, dataIndex: 'customertype'},
{header: "Date Time Recieved", width: 15 , sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d h:i:s a'), dataIndex: 'timerecieved'},
{header: "Phone Number", width: 25 , dataIndex: 'phonenum'},
{header: "Email Address", width: 35 , dataIndex: 'email'},
{header: "First / Last Name", width: 35 , dataIndex: 'flname'},
{header: "Admin Remove", width: 23 , dataIndex: 'delquote' ,cellActions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,style:'background-color:#f0f0f0;'
}]}
],
stripeRows: true,
autoHeight: false,
viewConfig: {
forceFit: true
},
border: false,
bbar:[{
xtype:"button",
text:"Update Quote",
enableToggle: true
},{
xtype:"button",
text:"Email Quote",
enableToggle: true
},{
xtype:"button",
text:"Fax Quote",
enableToggle: true
}, '-', {
xtype:"button",
text:"Insert New Quote",
enableToggle: true

}, '-', {
xtype:"button",
text:"Clear Quote",
enableToggle: true

}]
,
plugins:[new Ext.ux.grid.Search({
mode:'local'
,iconCls:false
,dateFormat:'m/d/Y'
,minLength:2
,align:'right'
})]

});
var tabpanel = new Ext.TabPanel({
border:false,
activeTab:0,
tabPosition:'bottom',
items:[{
title: 'General Quotes',
//autoLoad:'quotesgeneral.php',
autoScroll:true
},{
title: 'Truckload Quotes',
//autoLoad: 'quotestruckload.php',
autoScroll:true
},{
title: 'General Requests',
autoScroll:true
},{
title: 'Residential Quotes Sent',
autoScroll:true
},{
title: 'Truckload Quotes Sent',
autoScroll:true
},{
title:"General Quotes Sent",
layout:"fit",
items: quotessent
}]
});
var viewport = new Ext.Viewport({
layout: 'border',
border: false,
header: false,
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
border: false,
header: false,
height:32
}), {
region:'south',
id:'south-panel',
title:'Quotes Select',
split:true,
height: 200,
minSize: 100,
maxSize: 210,
collapsible: true,
border:false,
margins:'0 0 0 5',
layout:'fit',
pressed:true,
items: tabpanel
},{
region:"west",
title:"Menubar",
width:125,
collapsible:true
},{
region:'center',
deferredRender:false,
autoScroll:true,
header: false,
border: false,
items:[{
title: 'Quote System',
header:true,
closable:false,
autoScroll:true
}]
}
]
});

store.load();

});

</script>

Im attempting to add this code oviously to where the rows are, at the end where it says Admin Remove. Would like to put 3 buttons there. But am so lost, that i cant even begin to figure out what im doing wrong lol, every time i try soemthing it throws an errror saying object is undefined. Thanks

jsakalos
28 Mar 2008, 2:48 AM
It is grid plugin so you have to put it into grid plugins array and it is also column so it needs to be in column model. Take the demo page code as example, it is included in the download package.

Something like:


var ra = new Ext.ux.grid.RowActions({...});
var grid = new Ext.grid.GridPanel({
...
,plugins:[....., ra]
,columns:[....., ra]
...
});

border9
28 Mar 2008, 2:50 AM
thx for the quick responce, so i got it to load, but now im having the issue of where exactly do i get the images that are in the CSS file lol. Thanks.

skhan
31 Mar 2008, 2:25 PM
Hi,
I'm having an issue with the text being cut off for an action.
It works fine in Firefox but no in IE.
See attached screen shots
Any ideas?

Thanks

jsakalos
31 Mar 2008, 3:44 PM
thx for the quick responce, so i got it to load, but now im having the issue of where exactly do i get the images that are in the CSS file lol. Thanks.
http://famfamfam.com

jsakalos
31 Mar 2008, 3:46 PM
Hi,
I'm having an issue with the text being cut off for an action.
It works fine in Firefox but no in IE.
See attached screen shots
Any ideas?

Thanks
To tell you truth, I've never meant that somebody will really use text so I haven't tested it. Some css tweak should fix it...

jsakalos
31 Mar 2008, 4:14 PM
To tell you truth, I've never meant that somebody will really use text so I haven't tested it. Some css tweak should fix it...
skhan,

download rowactions now, they should work with text also in ie...

PTG
1 Apr 2008, 2:23 AM
Nice plugin.

There seems to be a problem when there is no callbacks defined.
It will crash on this line:
this.callbacks[a.iconCls] = a.callback || a.cb;
because this.callbacks is undefined.

jsakalos
1 Apr 2008, 4:57 AM
Thank you for pointing out. It's fixed at http://rowactions.extjs.eu.

skhan
1 Apr 2008, 5:30 AM
Thanks for the quick reply and fix but there seems to be a bit of a problem still.
Now when you include text everything displays fine but the callbacks are never called.

jsakalos
1 Apr 2008, 6:14 AM
Check it out now at http://rowactions.extjs.eu

skhan
1 Apr 2008, 6:41 AM
Thanks but there's still a bit of a problem:


236 +'<div class="ux-row-action-item {cls} <tpl if="text">'
237 +' ux-row-action-text</tpl>" style="{style}" qtip="{qtip}">'




378 action = action.replace(/ ux-row-action-text/, '');


There are two spaces between the iconCls and ux-row-action-text so you either have to add a space to the replace function or remove a space in the class names.

It works once thats done.
Thanks for your quick repsonses

jsakalos
1 Apr 2008, 6:54 AM
And now?

PTG
1 Apr 2008, 7:23 AM
I'm trying to modify the template to hide actions with no cls but without success.

,tplRow:
'<div class="ux-row-action">'
+'<tpl for="actions"><tpl if="cls!=\'\'">'
+'<div class="ux-row-action-item {cls} <tpl if="text"> ux-row-action-text</tpl>" style="{style}" qtip="{qtip}"><tpl if="text"><span>{text}</span></tpl></div>'
+'</tpl></tpl>'
+'</div>'
Any idea why this isnt working ?

I needed this because not all the rows in my grid have all the actions available.
Or maybe there is another way ?

jsakalos
1 Apr 2008, 7:45 AM
Hmmm, we could introduce some kind of disabled or hidden or both. Do you have a mockup picture of the intended result?

PTG
1 Apr 2008, 8:21 AM
http://img233.imageshack.us/img233/3489/sampleno9.jpg

jsakalos
1 Apr 2008, 8:25 AM
Thanks. This is not 5-min job so gimme some time to implement it....

jsakalos
1 Apr 2008, 3:10 PM
Hi all!

Beta 3 (http://rowactions.extjs.eu) is out.

Changes:
Hiding of actions is now supported. See some posts back

Cheers,

PTG
2 Apr 2008, 12:00 AM
Works fine for me so far.
Thank you for your work :)

zxyth
2 Apr 2008, 9:08 AM
I'm trying to add RowActions to my Grid. Here's my RowActions definition:



ACT.ui.deleteRowActions = new Ext.ux.grid.RowActions({
header:'Delete',
autoWidth:false,
actions:[{
iconCls:'ext-mb-error',
tooltip:'Delete Account Code'
}]
});
I've added ACT.ui.deleteRowActions to both the ColumnModel columns array and as a plugin for my EditorGridPanel. But I'm getting the following error in the FireBug console and I'm not seeing the column in my grid.

this.ds.fields.get(i) has no properties
<URL removed>/ext-all-debug.js
Line 30509

I'm pretty sure I'm missing something simple, but not sure what. Any ideas?

jsakalos
2 Apr 2008, 9:11 AM
Does your grid work w/o RowActions?

zxyth
2 Apr 2008, 9:17 AM
Yes, it worked before. On thing I noticed is that you have the actions or parts of actions tied to columns in the store. Is that necessary, or can I have actions with no corresponding data in the store backing the grid?

jsakalos
2 Apr 2008, 9:24 AM
You can use either actions bound to store or static actions or combination of them. Post your grid config.

zxyth
2 Apr 2008, 9:32 AM
I think I figured out part of it. My Record object didn't have a field to correspond to the new column that the RowActions was in. So I've gotten the column to show. I'm posting my code below with the new field for the action in the Record Object:



ACT.data.AccountCode = Ext.data.Record.create([
// the "name" below matches the tag name to read
{name: 'code', type: 'string'},
{name: 'name', type: 'string'},
{name: 'department', type:'string'},
{name: 'region', type: 'string'},
{name: 'status', type: 'string'},
{name: 'action', type: 'string'}
]);

// Account Codes Store

ACT.data.accountCodeXmlReader = new Ext.data.XmlReader({
record: 'accountCode',
id:'code'
}, ACT.data.AccountCode);

ACT.data.accountCodesStore = new Ext.data.Store({
// load using HTTP
url: 'accountCodes.jsp',

// the return will be XML, so lets set up a reader
reader: ACT.data.accountCodeXmlReader,
sortInfo:{field:'code', direction:'ASC'}
});

ACT.ui.deleteRowActions = new Ext.ux.grid.RowActions({
header:'Delete',
autoWidth:false,
actions:[{
iconCls:'ext-mb-error',
tooltip:'Delete Account Code'
}]
});

function deleteGridRow(grid, record, action, row, col) {
ACT.ui.accountCodeGrid.stopEditing();
Ext.Ajax.request({
waitMsg:'Deleting Account Code...',
url:'deleteAccountCode.jsp',
params:{
accountCode:record.data.code,
name:record.data.name,
department:record.data.department,
region:record.data.region
},
success:function(){
ACT.data.accountCodesStore.commitChanges();
ACT.data.accountCodesStore.reload();
ACT.ui.accountCodeGrid.startEditing(0, 0);
},
failure:function(){
ACT.ui.accountCodeGrid.startEditing(0, 0);
Ext.MessageBox.show({
title: 'Error',
msg: 'There was a problem deleting the account code. Please try again later.',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}

ACT.ui.deleteRowActions.on('action', deleteGridRow);

// Edit/Delete Grid
ACT.data.accountCodeGridColumnModel = new Ext.grid.ColumnModel({
columns:[{
id:'code',
header: "Account Code",
dataIndex: 'code'
},{
id:'name',
header: "Account Code Name",
dataIndex: 'name',
width:150,
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id:'department',
header: "Department",
dataIndex: 'department',
width:200,
editor: new Ext.form.ComboBox({
store: ACT.data.departmentsStore,
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'No Department',
selectOnFocus:true,
width:'auto'
})
},{
id:'region',
header: "Region",
dataIndex: 'region',
width:200,
editor: new Ext.form.ComboBox({
store: ACT.data.regionsStore,
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'No Region',
selectOnFocus:true,
width:'auto'
})
},
{
id:'status',
header: "Status",
dataIndex: 'status'
}, ACT.ui.deleteRowActions
],
isCellEditable: function(col, row) {
var record = ACT.data.accountCodesStore.getAt(row);
if (record.get('status').trim() != 'InService') {
return false;
}
else if (col == 0 || col == 4) {
//Column Movement is disabled, so this equates to code and status
return false;
}
else {
return true;
}
}
});
ACT.data.accountCodeGridColumnModel.defaultSortable=true;
ACT.data.accountCodesStore.load();

// create the editor grid
ACT.ui.accountCodeGrid = new Ext.grid.EditorGridPanel({
autoScroll:true,
clicksToEdit:1,
enableColumnMove:false,
id:'aed-editor-grid',
store: ACT.data.accountCodesStore,
cm: ACT.data.accountCodeGridColumnModel,
frame:true,
height:400,
stripeRows:true,
plugins:[ACT.ui.deleteRowActions],
tbar: [{
text: 'Refresh',
handler : function(){
ACT.ui.accountCodeGrid.stopEditing();
ACT.data.accountCodesStore.reload();
ACT.ui.accountCodeGrid.startEditing(0, 0);
}
}]
});

function updateGridRow(gridEvent) {
ACT.ui.accountCodeGrid.stopEditing();
Ext.Ajax.request({
waitMsg:'Updating Account Code...',
url:'updateAccountCode.jsp',
params:{
accountCode:gridEvent.record.data.code,
name:gridEvent.record.data.name,
department:gridEvent.record.data.department,
region:gridEvent.record.data.region
},
success:function(){
ACT.data.accountCodesStore.commitChanges();
ACT.data.accountCodesStore.reload();
ACT.ui.accountCodeGrid.startEditing(0, 0);
},
failure:function(){
ACT.ui.accountCodeGrid.startEditing(0, 0);
Ext.MessageBox.show({
title: 'Error',
msg: 'There was a problem updating the account code. Please try again later.',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}

ACT.ui.accountCodeGrid.on('afteredit', updateGridRow);

I know some of it's ugly, but I've only been using Ext JS for about 4 days now. :) Thanks for the help.

ibaniski
3 Apr 2008, 7:39 AM
Hey there,

I've been fiddling with RowActions for few hours now, and I can't seem to get it to work. When I load the grid, this is the error displayed in firebug:

hide is not defined
[Break on this error] fn = new Function('values', 'parent', 'xindex', 'xcount', 'with(v...
ext-all-debug.js (line 6851)

Here is my definition of the actions:

this.actions = new Ext.ux.grid.RowActions({
header:''
,actions:[{
iconCls: 'icon-start'
,qtip:'The warning tip tool'
,hideIndex: 'hide-start'
},{
iconCls:'icon-stop'
,qtip:'The error tip tool'
,hideIndex: 'hide-stop'
},{
iconCls:'icon-restart'
,qtip:'The error tip tool'
,hideIndex: 'hide-restart'
},{
iconCls:'icon-force'
,qtip:'The error tip tool'
,hideIndex: 'hide-force'
}]
,callbacks:{
'icon-force':function(grid, record, action, row, col) {
Ext.ux.Toast.msg('Callback: icon-plus', 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>', row, action);
}
}
});
And here are my store and colModel (though if I understand properly the store shouldn't matter much as I am using iconCls instead of iconIndex in the properties of each action):

store:new Ext.data.IMonitorStore({
fields: [
{ name: 'group' },
{ name: 'interface' },
{ name: 'instance' },
{ name: 'status' },
{ name: 'hide-start' , type: 'boolean' },
{ name: 'hide-stop' , type: 'boolean' },
{ name: 'hide-restart', type: 'boolean' },
{ name: 'hide-force' , type: 'boolean' }
]
})
,cm : new Ext.grid.ColumnModel([
{ width: 20, header: '', dataIndex: 'critical' },
{ header: '', dataIndex: 'instance' },
{ width: 60, header: '', dataIndex: 'status' },
this.actions
])
,plugins:[this.actions]

One thing I noticed, when the following line is executed (in the case when the exception is thrown), c.name == 'status' (and that is the column before it), and so instead of the icon class the renderer is passed something useless (in this case the value of status for that record)

p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);

Any ideas on what have I done wrong? The grid worked well with CellActions, but I realized that i actually need RowActions, and I haven't been able to make the transition.

Thanks,
ibaniski

jsakalos
3 Apr 2008, 7:58 AM
I do not see anything obviously wrong with your code. Can you post a runnable showcase?

ibaniski
3 Apr 2008, 8:26 AM
You can see the example here:
http://baniski.com/extjs2/app/monitor/

Thanks...

zxyth
3 Apr 2008, 9:55 AM
Ok, so using the code I posted earlier I've gotten the column that is to hold the RowActions to show, but I'm showing no icons in the column. I see no errors in FireBug either. Any ideas what I'm missing? Thanks.

zxyth
3 Apr 2008, 11:45 AM
I discovered that my iconCls was invalid, so that's why my icon wasn't showing up. Now the column is too narrow and the icon isn't centered in the column. I've tried changing the width, autoWidth, and changing the alignment, but it doesn't seem to to be working. Any ideas on how to center the icon in the column?

jsakalos
3 Apr 2008, 11:58 AM
Have you included css file? It's mandatory.

zxyth
3 Apr 2008, 12:01 PM
Yes, I have included the Ext.ux.grid.RowActions.css file right after the regular Ext JS ones and before my own.

jsakalos
3 Apr 2008, 12:04 PM
You can see the example here:
http://baniski.com/extjs2/app/monitor/

Thanks...
You have included wrong css file.

jsakalos
3 Apr 2008, 12:05 PM
Yes, I have included the Ext.ux.grid.RowActions.css file right after the regular Ext JS ones and before my own.
99.99% it is either conflicting or missing css.

ibaniski
3 Apr 2008, 12:32 PM
I do not see anything obviously wrong with your code. Can you post a runnable showcase?

Hey.. thanks for the quick response..

The only problem with the code was that the the "hideIndex" values had dashes in them
So simply writing "hide-start" as "hidestart" in all instances solved the problem..

Weird, isn't it :)? Just thought I'd share that.

Cheers

jsakalos
3 Apr 2008, 1:57 PM
Dashes are probably understood as minus operators somewhere down in the code...

.andy
5 Apr 2008, 11:51 AM
Hi!
I am trying to implement this plugin, but I am getting an error.
I have realized, that it has something to do with my pagingRowNumberer plugin:


Ext.ux.PagingRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
renderer : function(v, p, record, rowIndex, colIndex, store){
if (this.rowspan) {
p.cellAttr = 'rowspan="' + this.rowspan + '"';
}

var so = store.lastOptions;
var sop = so? so.params : null;
return ((sop && sop.start)? sop.start : 0) + rowIndex + 1;
}
});

If I try this:

var grid = new Ext.grid.GridPanel({
...
columns: [new Ext.ux.PagingRowNumberer(),
{header: "Name", width: 200, sortable: true, dataIndex: 'name'},
action
]
I get an error in Firebug:

this.ds.fields.get(i) has no properties
[Break on this error] name : (typeof name == 'undefined' ? this.ds.fields.get(i).name ...
With:

var grid = new Ext.grid.GridPanel({
...
columns: [action,new Ext.ux.PagingRowNumberer(),
{header: "Name", width: 200, sortable: true, dataIndex: 'name'}

]
OR:

var grid = new Ext.grid.GridPanel({
...
columns: [new Ext.ux.PagingRowNumberer(),action,
{header: "Name", width: 200, sortable: true, dataIndex: 'name'}

]
it works fine.
Any ideas? Probably I had too much ~o) today :)

jsakalos
5 Apr 2008, 12:32 PM
Do you think it is a bug in RowActions? If so, post please a simplified, runable and complete showcase that I can debug locally.

jsakalos
8 Apr 2008, 1:57 PM
Hi all!

Stable version RowActions-1.0 (http://rowactions.extjs.eu) is out.

I have not been receiving neither your bug reports nor feature requests for some time so I'm moving RowActions from beta to stable.

Enjoy!

dalad
9 Apr 2008, 7:29 AM
hey Saki. Thank for your great contribution on this powerfull framework. I've been using it for a few days now and I must say its awesome.
Now it comes to the new born Grid RowActions Plugin: I'm sorry to be late for the v1 release, that works great, but here is a simple feature request.

Can hidden icons occupy no space, instead of leaving the empty block?
In other words, can hidden icons be rendered with display:none instead of visibility: false?

Cheers,
thx bye
Ad

jsakalos
9 Apr 2008, 8:25 AM
Yes, checkout the devel version from http://rowactions.extjs.eu

immu2k1
9 Apr 2008, 2:09 PM
Hey Saki,

Cool plugin! A useful behavior could be to treat the iconCls property as the "Default" style, when used in collaboration with iconIndex.

For example, if in my actions I specify both iconIndex and iconCls - AND - if my response data record DOESN'T contain the specified iconIndex, it could default to iconCls.

This way we wouldn't have to unnecessarily always pass the iconIndex's in our response data, but only pass it in if we want to actually use it in place of the default iconCls.

I hope that clutter I wrote made sense! :)

Cheers

johnstontrav
9 Apr 2008, 3:26 PM
im sorry guys but i have a dumb newbie question.

I have got the plugin working! (great work btw).

My problem is howto run an action function that is outside the component part?

FYI: I have only found ext yesterday and im not a js guru either. So some pointers would be great.

here is a code snippet of what i have...




.....

initComponent:function() {


this.tester = function () {

alert('tester');

}


// Create RowActions Plugin
this.action = new Ext.ux.grid.RowActions({
header:'Action'
,width: '30%'
,actions:[{
iconCls:'email'
,tooltip:'Add Message'
,callback:function(grid, records, action, groupId) {
this.tester
}
}]

.....
as you can see im just trying to get an alert when you click the icon. ideally the tester function is located in another js file thats included.

please help!

jsakalos
9 Apr 2008, 4:12 PM
Hey Saki,

Cool plugin! A useful behavior could be to treat the iconCls property as the "Default" style, when used in collaboration with iconIndex.

For example, if in my actions I specify both iconIndex and iconCls - AND - if my response data record DOESN'T contain the specified iconIndex, it could default to iconCls.

This way we wouldn't have to unnecessarily always pass the iconIndex's in our response data, but only pass it in if we want to actually use it in place of the default iconCls.

I hope that clutter I wrote made sense! :)

Cheers
Yeah, it makes sense. Override getData function to achieve the behavior you describe. Something like:


getData(val, cell, record) {
var o = Ext.apply({}, record.data);
o.yourIconIndex = o.yourIconIndex || 'defaultIconCols';
return o;
}

getData runs in the scope of the plugin so you could use some this.xxx variables inside of it.

jsakalos
9 Apr 2008, 4:14 PM
im sorry guys but i have a dumb newbie question.

I have got the plugin working! (great work btw).

My problem is howto run an action function that is outside the component part?

FYI: I have only found ext yesterday and im not a js guru either. So some pointers would be great.

here is a code snippet of what i have...




.....

initComponent:function() {


this.tester = function () {

alert('tester');

}


// Create RowActions Plugin
this.action = new Ext.ux.grid.RowActions({
header:'Action'
,width: '30%'
,actions:[{
iconCls:'email'
,tooltip:'Add Message'
,callback:function(grid, records, action, groupId) {
this.tester
}
}]

.....
as you can see im just trying to get an alert when you click the icon. ideally the tester function is located in another js file thats included.

please help!

You can use event instead of callback. Something like:


var grid = your-config-of-grid;
grid.actions.on('action', function() {
// what you want to do;
});

johnstontrav
9 Apr 2008, 6:46 PM
Hi, thanks for getting back to me. A little more help would be great. when i run the code below i get the following error:

"grid.actions has no properties"

I guess im confused by "var grid = your-config-of-grid;" in relation to the rowaction plugin and how the grid is being defined.





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



Ext.onReady(function(){

var grid = Example.Grid;
grid.actions.on('action', function() {
// what you want to do;
alert('test');
});
....

jsakalos
9 Apr 2008, 6:50 PM
You're missing new keyword when creating grid.

dalad
10 Apr 2008, 7:28 AM
Yes, checkout the devel version from http://rowactions.extjs.eu

Thanks guy, you rock!
=D>

lfelican
10 Apr 2008, 1:39 PM
I am a newbie to the whole extjs, but I got a grid working from a mysql db using php.
I just want to apply one icon to delete rows from the grid. If anyone can hellp me I would really appreciate it.

Remember my knowledge is limited so if u can say hey put this in the column model and this here it would help..

Thanks

Lee

jsakalos
10 Apr 2008, 1:52 PM
It is very difficult if not impossible to answer such general question. Delete is partially implemented at http://recordform.exjts.eu

jezmck
13 Apr 2008, 2:03 AM
Hi jsakalos, just thought I should mention that I can't currently access your extjs.eu site.

I'm also interested to know if there's a simpler example anywhere. I've found your great looking ux after already implementing a grid generator function so I'm struggling a little to know how to get the actions into my grids.

jsakalos
13 Apr 2008, 3:14 AM
We're solving it - some routing problem.... After it will be solved you'll get the example on that site.

jezmck
13 Apr 2008, 11:20 PM
great, thanks :)

lfelican
14 Apr 2008, 8:15 AM
OK here is my code below, can you help me apply rowactions to it so I can delete rows?
Currently the following code works great, Please help me tweak it, thanks
Lee



var userDS; // this will be our datastore
var userCM; // this will be our columnmodel
var userGrid;
var userWindow;

Ext.onReady(function(){
Ext.QuickTips.init();

userDS = new Ext.data.Store({
id: 'userDS',
proxy: new Ext.data.HttpProxy({
url: 'data.php',
method: 'POST'
}),
baseParams:{task: "LISTING"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},[
{name: 'code', type: 'string', mapping: 'code'},
{name: 'accountid', type: 'string', mapping: 'accountid'},
{name: 'property_name', type: 'string', mapping: 'property_name'}
]),
sortInfo:{field: 'code', direction: "ASC"},
remoteSort: true
});

userCM = new Ext.grid.ColumnModel(
[{
header: 'Keyword',
readOnly: true,
dataIndex: 'code',
hidden: false
},
{
header: 'Listing Name',
readOnly: true,
dataIndex: 'property_name',
hidden: false
},
{
header: 'Action',
readOnly: true,
dataIndex: 'accountid',
hidden: false
}
]
);
userCM.defaultSortable= true;

userGrid = new Ext.grid.EditorGridPanel({
id: 'userGrid',
store: userDS, // the datastore is defined here
cm: userCM, // the columnmodel is defined here
enableColLock:false,
clicksToEdit:1,
height: 400,
width: 420,
autoSizeColumns: 1,
frame: false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
renderTo: document.getElementById('user_grid'),
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: userDS,
displayInfo: true
}),
tbar: ['Keyword Search:', new Ext.app.SearchField({store: userDS, params: {start: 0, limit: 15}, width: 120})
]
});

// Load the data
userDS.reload({params: {start: 0, limit: 15}});

});

lobo-tuerto
14 Apr 2008, 10:24 AM
@People asking for an example:
Look in the code below, I adapted the code from the example to work with my simple grid. You just need to hook up some calls where the Ext.ux.Toast is called.

@Saki:
Hi Saki,

I'm using your RowActions (development version) plugin but it seems like I need a "dummy" column (or field) in my reader for it to work, check this:

My actions definition:


var actions = new Ext.ux.grid.RowActions({
header:'Acciones'
,actions:[{
iconCls:'icon-edit'
,tooltip:'Editar'
},{
iconCls:'icon-delete'
,tooltip:'Eliminar'
}]
,callbacks:{
'icon-edit':function(grid, record, action, row, col) {
Ext.ux.Toast.msg('Editar', 'ID: <b>{0}</b>, action: <b>{1}</b>', record.id, action);
},
'icon-delete':function(grid, record, action, row, col) {
Ext.ux.Toast.msg('Eliminar', 'ID: <b>{0}</b>, action: <b>{1}</b>', record.id, action);
}
}
});


Here is my record definition (if I uncomment the first line, no errors show):


var rec = Ext.data.Record.create([
//{ name: 'dummy' },
{ name: 'id' },
{ name: 'nombre' },
{ name: 'orden' },
{ name: 'usuario_id' },
{ name: 'fecha_alta', mapping: 'created', type: 'date', dateFormat: 'Y-m-d H:i:s' },
]);


Here is my column model:


var cm = new Ext.grid.ColumnModel([
//new Ext.grid.RowNumberer(),
{header: "ID", width: 50, sortable: true, dataIndex: 'id'},
{header: "Nombre", width: 120, sortable: true, dataIndex: 'nombre'},
{header: "Orden", width: 70, sortable: true, dataIndex: 'orden'},
{header: "Alta", width: 70, sortable: true, dataIndex: 'fecha_alta', renderer: Ext.util.Format.dateRenderer('d/m/Y H:m:s')},
{header: "ID Usuario", width: 70, sortable: true, dataIndex: 'usuario_id'},
actions
]);


And finally my grid definition:


var grid = new Ext.grid.GridPanel({
autoExpandColumn:'nombre',
title: 'Lista de Estatus',
autoHeight: true,
border: false,
frame: false,
shadowOffset: 0,

ds: ds,
cm: cm,
sm: sm,
plugins: [actions],

bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true
}),

viewConfig: {
forceFit:true
}
});


It looks that it expects a certain number of "record columns" or something, shouldn't it be pluggable like the Ext.grid.RowNumberer? (it doesn't need an extra column in the reader for it to work). Or am I doing something wrong?

Here is the error I get on FF:

this.ds.fields.get(i) has no properties
[Break on this error] name : (typeof name == 'undefined' ? this.ds.fields.get(i).name ...

BTW. How can you tell the "actions" column to be of certain width? I put width: 200 in the Ext.ux.RowActions definition and it didn't work.

jsakalos
14 Apr 2008, 11:02 AM
From the end: set autoWidth:false, width:200.

Re dummy: no dummy field is needed. There must be problem elsewhere. Line in my code where error triggers?

lobo-tuerto
14 Apr 2008, 4:08 PM
Oops, sorry, forgot to paste the file and line number:


getColumnData()ext-all-debug.js (line 30509)

[Break on this error] name : (typeof name == 'undefined' ? this.ds.fields.get(i).name ...
ext-all-debug.js (line 30509)


this.ds.fields.get(i) has no properties
http://localhost:3000/ext/ext-all-debug.js
Line 30509

That's the error I'm getting in the console.
How can I see where the error is firing from in your code?

jsakalos
14 Apr 2008, 5:05 PM
I've meant a line number of this extension code. You can trace it back in Firebug if you open the call stack in console.

lobo-tuerto
14 Apr 2008, 7:40 PM
I set a breakpoint where the error is happening but, the call stack doesn't show a line or a call in your code. Only ext-base.js and ext-all-debug.js.

It doesn't show either the file where I defined the window that is causing the problem.

The function that seems to be causing the error is getColumnWidth(), it would seem like it needs the dummy column to get a width from it?

jsakalos
15 Apr 2008, 1:17 AM
And what if you remove the plugin from grid's config? Does it work? Anyway, a simplified, complete, runnable showcase that I can debug locally would be best.

jsakalos
15 Apr 2008, 1:20 AM
@Ifelican,

delete row logic, except deletion itself, is implemented at http://recordform.extjs.eu

lobo-tuerto
15 Apr 2008, 4:09 AM
@Saki:
No it doesn't work if you remove the the plugin from the grid's config. But it does if you remove the plugin from the ColumnModel's.

You can try with your own example, just comment the "{name: 'dummy'} line.
Here it is:

If you need all the package I will upload it for you.

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

jsakalos
15 Apr 2008, 5:03 AM
Yeah, finally I found it. It was bug in RowActions that is now fixed. Checkout the devel version.

lobo-tuerto
15 Apr 2008, 6:11 AM
I couldn't see the stack to identify where in your code was the bug. How did you do it?

jsakalos
15 Apr 2008, 6:24 AM
It tracked it up from ColumnModel:getColumnIndex... ;)

lobo-tuerto
15 Apr 2008, 6:41 AM
So much to learn...

Anyway, thanks, it is working great now! :) ~o)

elDub
16 Apr 2008, 12:23 PM
Howdy Saki,

I'm implementing your RowActions plugin (great work!) on a grid that also responds to the rowdblclick event. If a user double clicks on one of the row action icons, I would like to prevent the grid's rowdblclick event from firing. Can this be done?

-Lonnie

jsakalos
16 Apr 2008, 1:04 PM
I've never tried... actionEvent is configurable but it doesn't help too much... It depends which event is really fired: whether dblclick, or click, or both.

elDub
16 Apr 2008, 1:14 PM
In my situation I have a grid which allows the user to double-click on the row and take them to a view of that particular record and it's children. I've added a row action icon to the grid to allow them to open up an edit window on the grid screen and that works great. The problem is that when the user double-clicks the row action icon, something that so many people do because of a blur between the desktop environment and the browser environment, the view gets activated AND the edit window. I'd rather that the Grid 'rowdblclick' event get thrown out in this case which of course means that the RowActions 'action' event must be fired first if I have any hopes of cancelling the rowdblclick event.

So I guess the questions are:

Does the RowActions 'action' event fire before the Grid 'rowdblclick' event?
Does RowActions provide a way to cancel subsequent events?

jsakalos
16 Apr 2008, 1:26 PM
In my situation I have a grid which allows the user to double-click on the row and take them to a view of that particular record and it's children. I've added a row action icon to the grid to allow them to open up an edit window on the grid screen and that works great. The problem is that when the user double-clicks the row action icon, something that so many people do because of a blur between the desktop environment and the browser environment, the view gets activated AND the edit window. I'd rather that the Grid 'rowdblclick' event get thrown out in this case which of course means that the RowActions 'action' event must be fired first if I have any hopes of cancelling the rowdblclick event.

So I guess the questions are:
Does the RowActions 'action' event fire before the Grid 'rowdblclick' event?
Does RowActions provide a way to cancel subsequent events?

Re 1: Order of event firing is not guaranteed, although they usually fire in the order they in which they were installed.

Re 2: I don't think so. What I would do would be to write a simple filter at the beginning of rowdblclick event handler to see which element was clicked and if it was one of the row actions I'd cancel that event. See how this is done in RowActions onClick handler.

nojutsu
17 Apr 2008, 1:15 AM
Hi,
I am watching your Job with all your Sources, and i am trying
to produce the same thing (save users modifications on my mysql database).

For a better learning, i would like to view your database file(s)
Is it possible ?

Thanks Saki

(your job is excellent !)

jsakalos
17 Apr 2008, 3:07 AM
Take a look at csql.php source at http://recordform.extjs.eu. I is sqlite backend but mySQL one is similar. I use sqlite for examples for simplicity and cross OS compatibility.

I cannot show you mySQL files/structures of my main project; it is not open source.

nojutsu
17 Apr 2008, 3:56 AM
thanks for your response,
with this example of your database in sqlite, i will probably be able to learn how to do.

i just want to know what is that values refer to :

In Firebug :
cmd saveState
data [{"name":"agwin","value":"o%3Awidth%3Dn%253A363%5Eheight%3Dn%253A217%5Ex%3Dn%253A449%5Ey%3Dn%253A77"}]
id 1
session session
user ...

(i obtain this result when i change the extje frame dimension)

jsakalos
17 Apr 2008, 5:21 AM
It is state (window position, size, columns sizes) sent to server by HttpState provider. That is not directly related to your problem.

nojutsu
17 Apr 2008, 6:59 AM
i think i have understand how it run.
i have completely forgotten the httpprovider :">
thanks for your disponibility.

robin30
17 Apr 2008, 5:15 PM
hi all,

First of all i wanna thank Saki for this great plugin and your willingness to help everybody.

i got it working just have one question.

when i click on an icon i have a window show up, it's all working perfectly but now my question is.
the code to open a window i already do have it in a function, for example


function openwindow() {
####### code for window is in here
}

but how can i use this function when clicking an icon without typing the whole code for opening a window again.

rightnow i have this:

var action = new Ext.ux.grid.RowActions({
header:'Actions',
autoWidth:false,
actions:[{
iconCls:'remove',
tooltip:'Delete Bill'
},{
iconCls:'money',
tooltip:'Pay Bill'
}],callbacks:{
'money':function(grid, record, action, row, col) {
########## code to open the window here
}
}
});


is it possible just to call the function openwindow() without typing the whole code again?

Thanks in advange.

Keep up the good and excellent work.

Sincerely,

Robin30

jsakalos
17 Apr 2008, 6:23 PM
Just call it: openwindow(), that's it.

robin30
17 Apr 2008, 7:45 PM
Thanks,

appreciate the quick answer.

it's working.

i tried just openwindow without ().

i'm a completely newbie and do not know anything about js but why do i use here the () and when i use a handler i don't. then it would be without ().

thanks again,

Keep up the good work.

Sincerely,

Robin30

jezmck
18 Apr 2008, 12:09 AM
when you use () you are calling the function.
when you set the handler you are referencing the function, so you just provide its name.

you can also create functions which return functions if you need to be able to pass parameters.

zmijanow
22 Apr 2008, 3:28 AM
Hello,

Started with Ext 2.0 a month ago, it's great lib. Many thanks to all for great forum and Saki for his great extensions. Now for the first time I've got a (hopefully small) problem for which I don't have any clue

[see code example in the folowing post]

Thank you for your help,
simon

mjlecomte
22 Apr 2008, 4:33 AM
Simon,

That code is pretty hard to read. Rather than copy/paste from firebug console, suggest you post code directly from your IDE. I see you have 'code' tags, but they didn't get applied for some reason.

The other thing you can do to help is show the stack trace as seen from firebug on that error.

jsakalos
22 Apr 2008, 7:11 AM
I have added row expander to demo page at http://rowactions.extjs.eu I was not able to reproduce any error - worked for the first time.

zmijanow
22 Apr 2008, 11:45 AM
Hmm, this with your working demo is confusing. The only difference I see is that you use window and demo grid class.

Whatsoever, I wrote now very simple example script (see attachment) which should reproduce the error. The testcases can be easyly commented in and out.

For quickview here is the code:



Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

var dummyData = [
['3m Co', 'Manufacturing', 'Lorem ipsum blah'],
['Alcoa Inc', 'Manufacturing', 'Lorem ipsum blah'],
['Altria Group Inc', 'Manufacturing', 'Lorem ipsum blah'],
['American Express Company', 'Finance', 'Lorem ipsum blah'],
['American International Group, Inc.', 'Services', 'Lorem ipsum blah']
];

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'industry'},
{name: 'desc'}
]);

// row expander
var expander = new xg.RowExpander({
tpl : new Ext.Template(
'<br>',
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>',
'<br>'
)
});

var actions = new Ext.ux.grid.RowActions({
header: 'Actions',
autoWidth: false,
actions:[{
iconCls:'icon-add',
tooltip:'ADD SOMETHING'
},{
iconCls:'icon-del',
tooltip:'DELETE SOMETHING'
}]
});

actions.on({
action: function(grid, record, action, row, col) {
Ext.MessageBox.alert('Action', 'To do: '+action+' on row '+row);
}
});

// EXPANDER ONLY ColumnModel
var colmod_1 = new xg.ColumnModel([
expander
,{id:'company', header: "Company", width: 80, sortable: true, dataIndex: 'company', editor: new Ext.form.TextField({ allowBlank: false }) }
,{id:'industry', header: "Industry", width: 80, sortable: true, dataIndex: 'industry'}
]);

// ACTIONS ONLY ColumnModel
var colmod_2 = new xg.ColumnModel([
{id:'company', header: "Company", width: 80, sortable: true, dataIndex: 'company', editor: new Ext.form.TextField({ allowBlank: false }) }
,{id:'industry', header: "Industry", width: 80, sortable: true, dataIndex: 'industry'}
,actions
]);

// EXPANDER + ACTIONS ColumnModel
var colmod_3 = new xg.ColumnModel([
expander
,{id:'company', header: "Company", width: 80, sortable: true, dataIndex: 'company', editor: new Ext.form.TextField({ allowBlank: false }) }
,{id:'industry', header: "Industry", width: 80, sortable: true, dataIndex: 'industry'}
,actions
]);

// GRID
var grid_expand = new xg.EditorGridPanel({
store: new Ext.data.Store({
reader: reader,
data: dummyData
})

// ------ TESTCASES CHANGE HERE -------------------

// --- EXPANDER ONLY ------------------------------
// ,cm: colmod_1
/*
,columns: [
expander
,{id:'company', header: "Company", width: 80, sortable: true, dataIndex: 'company', editor: new Ext.form.TextField({ allowBlank: false }) }
,{id:'industry', header: "Industry", width: 80, sortable: true, dataIndex: 'industry'}
]
,plugins: expander
*/


// --- ACTIONS ONLY -------------------------------
// ,cm: colmod_2
/*
,columns: [
{id:'company', header: "Company", width: 80, sortable: true, dataIndex: 'company', editor: new Ext.form.TextField({ allowBlank: false }) }
,{id:'industry', header: "Industry", width: 80, sortable: true, dataIndex: 'industry'}
,actions
]
,plugins: actions
*/


// --- EXPANDER + ACTIONS -------------------------
// ,cm: colmod_3
,columns: [
expander
,{id:'company', header: "Company", width: 80, sortable: true, dataIndex: 'company', editor: new Ext.form.TextField({ allowBlank: false }) }
,{id:'industry', header: "Industry", width: 80, sortable: true, dataIndex: 'industry'}
,actions
]
,plugins: [ actions, expander ]


// ------------------------------------------------

,viewConfig: {
forceFit: true
}

,width: 600
,height: 300
,collapsible: true
,animCollapse: false
,title: 'Grid RowExpander and Grid RowActions'
,renderTo: 'grid-example'
});
}); // END OF onReady


And here the stacktrace:



this.ds.fields.get(i) has no properties
ext-all-debug.js (Line 30510)

getColumnData()
renderRows(undefined, undefined)
renderUI()
render()
onRender(Object dom=div#grid-example id=grid-example, null)
render("grid-example", undefined)
render()
Component(Object store=Object columns=[4] plugins=[2])
aply()
aply()
aply()
aply()
aply()
(no name)()
fire()
fireDocReady()

name : (typeof name == 'undefined' ? this.ds.fields.get(i).name ...

thanks,
simon

jsakalos
22 Apr 2008, 11:58 AM
Well, honestly, as soon as I've proven that there is no bug in RowActions in combination with RowExpander, the rest is up to you. That "grid class", as you call it, can be the difference.

zmijanow
22 Apr 2008, 1:28 PM
Hello Saki,

I've used 1.0 version of RA, and now updated to development version - it renders now! I diffed a bit the code, you added there dataIndex thing which makes sense with the error I produced with 1.0 version. :D

cheers,
simon

jsakalos
22 Apr 2008, 2:18 PM
Yes, it's written in change log...

yaroslav
23 Apr 2008, 1:19 PM
Thanks a lot!!!!

ray007
29 Apr 2008, 4:26 AM
First: great work!

... but I have a little problem: when inserting an empty row into the grid the template execution fails :-(

Exception as follows:


[ERROR] [ComClient] callHandler: [object Object]: (ReferenceError: undefined) anonymous([object Object],
[object Object],1,1)@http://localhost:8080/client/js/ext/source/util/XTemplate.js:186
call([object Object],[object Object],[object Object],1,1)@:0 (0,[object Object],[object Object],1,1)@http://localhost:8080/client/js/ext/source/util/XTemplate.js:227
([object Object],[object Object],1,1)@http://localhost:8080/client/js/ext/source/util/XTemplate.js:296
call([object Object],[object Object],[object Object],1,1)@:0 ([object Object])@http://localhost:8080/client/js/ext/source/util/XTemplate.js:306
(undefined,[object Object],[object Object],0,4,[object Object])@http://localhost:8080/client/js/addons/ext.ux/rowActions.js:263
apply([object Object],[object Object])@:0 (undefined,[object Object],[object Object],0,4,[object Object])@http://localhost:8080/client/js/ext/adapter/ext/ext-base.js:346
([object Array],[object Array],[object Object],0,25,false)@http://localhost:8080/client/js/ext/source/widgets/grid/GridView.js:508
(0,0)@http://localhost:8080/client/js/ext/source/widgets/grid/GridView.js:1017
([object Object],0,0)@http://localhost:8080/client/js/ext/source/widgets/grid/GridView.js:851
([object Object],[object Array],0)@http://localhost:8080/client/js/ext/source/widgets/grid/GridView.js:1212
apply([object Object],[object Object])@:0 ([object Object],[object Array],0)@http://localhost:8080/client/js/ext/source/util/Observable.js:457
apply([object Object],[object Array])@:0 ("add",[object Object],[object Array],0)@http://localhost:8080/client/js/ext/source/util/Observable.js:39
...
Any ideas what's going wrong?

regards,
Ray

mjlecomte
29 Apr 2008, 4:34 AM
First: great work!

... but I have a little problem: when inserting an empty row into the grid the template execution fails :-(

Exception as follows:

@http://localhost:8080/client/js/ext/source/util/XTemplate.js:227
([object Object],../localhost:8080/client/js/ext/source/util/Observable.js:39
...
Any ideas what's going wrong?

regards,
Ray

Why is it showing links to source?

jsakalos
29 Apr 2008, 5:01 AM
No idea; it doesn't look like firebug output. Anyway, the original problem stems from either a misconfiguration or the way how records are added to grid.

http://recordform.extjs.eu has both RowAction and record add logic.

ray007
29 Apr 2008, 5:35 AM
Info update:
My plugin-config looks like this:


{
header: _("Edit"),
id: "myActions",
autoWidth: true,
actions: [
{hideIndex: "!canCancel", iconCls: "tgi-cancel", qtip: _("Cancel item"), cb: this._editActionCancel},
{hideIndex: "!canModify", iconCls: "tgi-edit", qtip: _("Modify item"), cb: this._editActionModify}
]
}
When I don't have negations in the hideIndex property, everything works fine ...

ray007
29 Apr 2008, 5:41 AM
No idea; it doesn't look like firebug output. Anyway, the original problem stems from either a misconfiguration or the way how records are added to grid.


Yeah, well, calling it "misconfiguration" isn't that much wrong ... unfortunately, our server first sends an "insert" for the grid and only later an "update" with data for the row ...

jsakalos
29 Apr 2008, 7:29 AM
Re misconfiguration: as per http://www.tfd.com/mis- prefix mis- means bad, wrong => misconfiguration = wrong configuration. (Nothing insulting, just saying that configuration is wrong; if it was correct it would work.)

Re negation: Documentation in RowActions source comments says:


* - @cfg (string} hideIndex Optional. Field name of the field of the grid store record that
* contains hide flag (falsie [null, '', 0, false, undefined] to show, anything else to hide).

what means that it really has to be field name and it cannot be a logical operation (negation) done on field name.

Re adding rows: I have no clue how it is done in your application. Normally, the row (record) is added to underlying store and that's it. It gets automatically displayed together with RowActions - works seamlessly.

Have you studied that example I've posted the link to a couple of posts back? It has RowActions plus it adds records.

ray007
29 Apr 2008, 7:37 AM
Re negation: Documentation in RowActions source comments says:
what means that it really has to be field name and it cannot be a logical operation (negation) done on field name.


The negation works fine as long as the property is defined. Making sure the records have some default values (for the properties used in 'hideIndex') that are _always_ set made it work for me. Though it would be nice if one could use more complex operations here ... ;)

Thanks,
Ray

jsakalos
29 Apr 2008, 7:51 AM
Well, I'm quite surprised it works, but it's good news. Anyway, the original idea is to let all these complexities to server and keep client as simple as possible. There are many reasons for that one of them being performance.

ray007
29 Apr 2008, 8:39 AM
Well, I'm quite surprised it works, but it's good news. Anyway, the original idea is to let all these complexities to server and keep client as simple as possible. There are many reasons for that one of them being performance.

You're right with that, but looking at the code the 'hideIndex' property should be able to take anything that can be put in the 'if' attribute in an XTemplate. The problem was the property not being set in the records data-object, and XTemplate doesn't guard against that :(

I guess I should ask for more XTemplate samples with (more complex) conditional part ;)

regards,
Ray

pokerking400
29 Apr 2008, 4:46 PM
hi saki,

I need few more things on the grid.

Row drop down form / Row popup form.

OK button should show "update"

Does sort info send to server ?

Can we add Advanced search that can add all sql filters like like , equal , not equal?

Can we add one more paging icon for fast stepping 10% of total?..i have 100000 records...it is easier if i can step through it faster.

Thanks
alexk

pokerking400
29 Apr 2008, 5:27 PM
Also need master detail record form. That is what i have to build. A cool looking master detail form. It can be popup form also. So it would be popup on popup for edit.

mjlecomte
29 Apr 2008, 7:02 PM
hi saki,

I need few more things on the grid.

Row drop down form / Row popup form.

OK button should show "update"

Does sort info send to server ?

Can we add Advanced search that can add all sql filters like like , equal , not equal?

Can we add one more paging icon for fast stepping 10% of total?..i have 100000 records...it is easier if i can step through it faster.

Thanks
alexk
Do you realize people are just sharing their work with extensions? I don't understand your tact in various threads of complaining about ext and then requesting more stuff out of extensions, etc. Hopefully you'll come to the realization that you're going to have to code something of your own one of these days? /:)

pokerking400
29 Apr 2008, 8:27 PM
No problem...all these questions are just give me indication for how difficult things are...if it is easy people say ...check this thread...that thread...if it is difficult ...people say go code your own...hahaha :))

jsakalos
29 Apr 2008, 9:14 PM
@pokering400,

if you need it, code it.

Good luck.

max52
30 Apr 2008, 3:14 AM
Hi all!
I

jsakalos
30 Apr 2008, 8:49 AM
Try to place e.stopEvent() call in RowAction onClick function somewhere in the branch which runs if click is identified as icon click. If that works for you I'll make it a configurable option.

pokerking400
30 Apr 2008, 9:16 AM
Thanks for the reply. Will do.

I think your recordform example in your website is the starting point. Seems to have all components. But too much stuff in that.

I have to do the same but have to make it from server side as it becomes dynamic data store. Kind of dynamic datawindow in Powerbuilder 3 i used zillion years ago. :)

medley
5 May 2008, 7:38 AM
Hello,

I saw this example. It works fine for actions.




new Ext.ux.RowActions({
actions:[{
iconIndex:'statusIcon'
,qtipIndex:'statusQtip'
}]
,getData:function(value, cell, record) {
var status = record.get('Status');
return {
statusIcon:status ? status.toLowerCase() : 'icon-employeeCenter'
,statusQtip: status ? status : ''
}
}
});


But is it possible to do the same thing for groupActions:[
{...}] ?

Medley

pokerking400
5 May 2008, 3:37 PM
i am getting this error on rowaction. Every time i move my mouse over the rowaction header , it throws error ..million times.

this.config[A] has no properties
[Break on this error] Ext.grid.ColumnModel=function(A){this.defaultWidth=100;this.defaultSortable=fals...

Basically it does not see the column model. It has all the icons now. Can we disable header actions? i thik it is looking for menu.

It does n't happen in your code though , only in mine.

I dynamically add the rowaction. That is the cause of the problem i think.


this.rowActions = new Ext.ux.grid.RowActions({
actions:[{
iconCls:'icon-minus'
,iconIndex:'action1'
,qtipIndex:'qtip1'
,tooltip:'Delete'
},{
iconCls:'icon-edit-record'
,iconIndex:'action2'
,qtipIndex:'qtip2'
,tooltip:'Edit'
,style:'background-color:yellow'
}]
});
this.rowActions.on('onRowAction', this.action, this);
this.rowExpander = new Ext.grid.RowExpander({
tpl: new Ext.Template(
'<p style="margin:0 0 4px 8px"><b>Company:</b> {company}</p>'
,'<p style="margin:0 0 4px 8px"><b>Summary:</b> {desc}</p>'
)



config[0] =this.rowExpander ;
lookup['rowExpander']=this.rowExpander ;


config[config.length] =this.rowActions;
lookup['rowActions']=this.rowActions;


this.colModel.config = config;
this.colModel.lookup = lookup;
this.view.hmenu.add(
{id:"reset", text: "Reset Columns", cls: "xg-hmenu-reset-columns"}
);

// Re-render grid
if(this.rendered){
this.view.refresh(true);
}


it sees the empty column model on the rowactionheader


But i have all icons shows up and row expander works fine and i do not see any issue in the row expander header.

I have problem with rowaction header...it is looking for a menu i think.

any advise is welcome!:)

jsakalos
5 May 2008, 3:39 PM
Do you mean getData override? I don't think so as getData is called from renderer which is not called for group headers.

jsakalos
5 May 2008, 3:43 PM
Try to put a header config there, e.g. header:'&#160;' or header:'Actions'

pokerking400
5 May 2008, 3:49 PM
I have no clue , it is not happening with your example rowaction , only happening in mine.

The only difference is that you have static column , i have dynamic column(autogrid).. i add columns in metachange event.. that is only difference. That was the pice of metachange event code

it probably will work in init component but i can't move the code out of metachange event...i am stuck..

oh well , i thought u could give a suggestion... i will try to dig more...

jsakalos
5 May 2008, 3:51 PM
Add your RowActions in onMetaChange event handler. The column model is created therein.

pokerking400
5 May 2008, 3:54 PM
I add both rowexpander and rowactions same way. why it is happening only on rowActions header?

Yes i played with everything...header:'actions' , header:'none'...

It is looking for colummodel on that header...it finds null...as i do not know internal of rowaction plugin ..infact i have no clue on most of the extjs working..it will take a quite long time to understand all configuration options of every component.

it would be something silly i think...it always is... i have to figure it out..:)

pokerking400
5 May 2008, 3:58 PM
But initcomponent is called first and i can't add it as plugins in metachange event. it shows only if i do this in initcomponent.

Ext.apply(this,{plugins:[this.rowExpander,this.rowActions]});


Unless if you tell me what makes it to apply if i do that in metchange event?.

jsakalos
5 May 2008, 3:58 PM
Do you use latest version of RowActions?

pokerking400
5 May 2008, 4:02 PM
i have to understand the event sequence...

only thing that is after
Ext.apply(this,{plugins:[this.rowExpander,this.rowActions]});

is
Ext.ux.AutoGridPanel.superclass.initComponent.apply(this);

in initcomponent...

i copied both lines in metachange nothing happens...

pokerking400
5 May 2008, 4:03 PM
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* RowActions plugin for Ext grid
*
* Contains renderer for icons and fires events when an icon is clicked
*
* @author Ing. Jozef Sak

pokerking400
5 May 2008, 4:04 PM
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* RowActions plugin for Ext grid
*
* Contains renderer for icons and fires events when an icon is clicked
*
* @author Ing. Jozef Sak

pokerking400
5 May 2008, 4:08 PM
How do you reapply plugins dynamically. That is where the problem. It works in init component. it works because there is something else is also happening after initcomponent. What ever that was , same thing i have to doit after metachange event ....

pokerking400
5 May 2008, 4:40 PM
Ok no actions also triggered on those icons. So it is clear something is wrong ..

jsakalos
5 May 2008, 4:51 PM
Yes, rev 185 is latest one. Re other problems: Just try to go down with complexity (make it simpler) until it works and then add one thing at a time to see when problem is introduced.

Also, order of running/initialization of various parts matters.

pokerking400
5 May 2008, 5:04 PM
It is failing in this line.

isMenuDisabled : function(col){
32010 return !!this.config[col].menuDisabled;
32011 },
32012

in ext-all-debug.js


tried everything...need a break..if you got a suggestion let me know...

thanks.

pokerking400
5 May 2008, 5:56 PM
I am getting closer.... it is returning false on column index.

i switched rowexpander and rowaction position and tried in all position , rowexpander is fine. Only rowActions has a problem with the way its initialized.

when mouse moves over rowexpansion columheader , the column index given is false. I have to backtrack and who initialize ismenudisabled and figure it out.


getCellIndex : function(el){
if(el){
var m = el.className.match(this.colRe);
if(m && m[1]){
return this.cm.getIndexById(m[1]);
}
}


class name :
x-grid-hd x-grid3-cell x-grid3-td-c5

column number is missing on the rowaction column header. So it returns null on ismenu disabled call.

That is why my actions is also not triggered.

thanks.



That is the problem. i will dig more.

pokerking400
5 May 2008, 6:35 PM
Expander header el is

class name :
x-grid-hd x-grid3-cell x-grid3-td-expander

Row Action header el is

class name :
x-grid-hd x-grid3-cell x-grid3-td-

pokerking400
5 May 2008, 7:00 PM
SOLVED!

Id field was missing in rowaction file. it works in your example without it , but for my code it need the id for rowaction.

There is no more of that error popping up...

Now i have to check all the actions whether it triggers..it might work as well...

Thanks for listening....:)

pokerking400
5 May 2008, 7:15 PM
Awsome!. Now Row action is done. I can add backend in a breeze.

Next job tonight is add Basic form using sakic recordform - some part of it ..i have to see that...

I have two ideas , one is drop down Edit form and popup form. Layout is easier in popupform

if i can do the popup form then i can implement that in drop down form..somehow dropdown form give a better feel of "fastness' ..kind of give a feeling of they are working on single application

Row expander concept can be used as drop down edit form. Once that is done i have to find a way to make it master detail form...same thing just more stuff in it.

i was slamming my head thinking it was my code gave me problem...

i am moving inch by inch ..extjs learning curve...

Thanks saki for his extension , because his examples helps noobies like me. hahaha.

back to recordform...:)

medley
5 May 2008, 10:28 PM
Hello,

Here is my code :



var onGoingBatchActions = new Ext.ux.grid.RowActions({
header:'Actions'
,actions:[{
iconCls: 'icon-info'
,qtip:'Display AM infos'
},{
iconCls: 'icon-change-info'
,qtip:'Change AM infos'
}
,{
iconCls: 'icon-cancel-am'
,qtip:'Cancel AM'
}

],
groupActions:[
{

}

]

,callbacks:{
'icon-info':function(newAMBatchGrid, record, action, row, col) {
Ext.ux.Toast.msg('Display AM infos', 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>', row, action);
},
'icon-change-info':function(newAMBatchGrid, record, action, row, col) {
Ext.MessageBox.confirm('Confirmation','Are you sure you want to change informations of this amendment ?', changeAMInfo);

},
'icon-cancel-am':function(newAMBatchGrid, record, action, row, col) {
Ext.MessageBox.confirm('Confirmation','Are you sure you want to cancel this amendment ?', cancelAM);
}
}


});


For GroupActions, I wanted to do like in your example for Actions, use the function getData (override) and do something like that but I does not work :




//using RowActions
this.actionStatus = new Ext.ux.grid.RowActions({
header:'Actions'
,actions:[{
iconCls: 'icon-info'
,qtip:'Display AM infos'
},{
iconCls: 'icon-change-info'
,qtip:'Change AM infos'
}
,{
iconCls: 'icon-cancel-am'
,qtip:'Cancel AM'
}

],
groupActions:[{
iconIndex:'statusIcon'
,qtipIndex:'statusQtip'
}],
//override
getData : function(value, cell, record) {
var status = record.data.Status;
//debugger;
return {
statusIcon:status ? status.toLowerCase() : 'icon-empty'
,statusQtip: status ? status : ''
}
}
});


Medley

jsakalos
6 May 2008, 1:22 AM
Group headers are rendered different way - there is no renderer called (from which getData is called for non-group actions) but group headers have their template.

Group headers are common for multiple records so you couldn't base anything on one record anyway.

pokerking400
6 May 2008, 2:52 AM
hi sakic ,

Id is missing in your Ext.ux.grid.RowActions.js file.

Ext.extend(Ext.ux.grid.RowActions, Ext.util.Observable, {
actionEvent:'click'
,autoWidth:true
,dataIndex:''
,id:'rowaction'
,header:''
,menuDisabled:true
,sortable:false

i don't why it worked in your method and mine it failed.

With that id , everything works as it is designed. thanks.

Hope that helps for other noobs who try to use your rowaction in my way.

jsakalos
6 May 2008, 4:05 AM
id cannot be hardcoded in the plugin but it should be (if necessary) set from outside.

DamienValentine
7 May 2008, 6:43 AM
Hi. I have one stupid question. My RowActions plugin contains 6 icons. They are separated in two lines. Is this a default behaviour? I try to set width but nothing happens, Firebug always shows me 65px. Grid has enough space to fit seven more RowActions like this, but I totally cannot force say 120px.

I try to force width by changing this to:

if(this.autoWidth) {
this.width = this.widthSlope * this.actions.length + this.widthIntercept;
this.fixed = true;
} else this.width = 100;
but I still get those 65px. I try to play with widthSlope and widthIntercept - have no result. What I have missed?

jsakalos
7 May 2008, 8:09 AM
Sounds strange... If autoWidth:true (the default) then slope and intercept are used to calculate width. Slope should be a bit bigger then icon width (21 for 16px icons) and intercept is additional width (4 by default).

Set a breakpoint in the above code to see if its executed...

DamienValentine
7 May 2008, 10:32 PM
It's OK. I just need a rest. I don't know how I look through that code but I'm almoust sure that I was sleeping. In RowActions.js and RowActions.css I have all code duplicated, so far I have one plugin over another. I will not press Ctrl+V twice anymore :(. Thanks.

eliezerreis
8 May 2008, 11:59 AM
hi,

First, great work.
I know that your plugin is for rows of the grid, but I need only actions for a GroupView. If I set property actions to null I receive one error or if I set actions to [ ] (empty) work fine but I see column header that I dont need. There are something that I can do to do it?

jsakalos
8 May 2008, 12:22 PM
I have never tested group-only actions... I don't have time right now - can you delve into the code? I guess some if(...) { } block would be enought...

lobo-tuerto
14 May 2008, 8:11 AM
Saki, I'm getting a strange behavior with rowactions:

I have a Window with a GridPanel in it. The window has an horizontal scrollbar (grid is too big to fit without it). My rowactions are in the last column. So, to use them I scroll to the right and click in one of them.

The problem happens when I click an action on some other row, different than the one I first clicked. The scrollbar goes back to the left, and the second action is never called (the callback doesn't show a toast message). The callback is called normally if the grid fits entirely in the windows (no horizontal scrollbar).

Any ideas about what could be wrong?

Oh, and after that, I can scroll again and then click in the intended action, and it works. But if I click an action that belongs to another row...

jsakalos
14 May 2008, 8:22 AM
Seems to be like Ext@Firefox of Firefox bug. It has been discussed for editor grids.

lobo-tuerto
14 May 2008, 8:33 AM
Oh I see, not much we can do then.

Strange thing is sometimes it doesn't happen, at least once, it worked as it should. Now let's hope whoever is at blame, they fix it. ~o) :D

eliezerreis
14 May 2008, 11:17 AM
I have never tested group-only actions... I don't have time right now - can you delve into the code? I guess some if(...) { } block would be enought...

Yeah, I did this.
Source code in annex and example in http://www.snews.com.br/rowaction/rowactions.html

I hope that you use :0

Cya.

eliezerreis
14 May 2008, 11:21 AM
I forgot annex. Look below !

jsakalos
14 May 2008, 1:18 PM
Hmm,
I have diffed my RowActions and yours and I cannot get what you have done there maybe because the fact that you patched rev 150 and current rev is 185. Would you please send me patched rev 185?

eliezerreis
14 May 2008, 5:51 PM
Omg. I get stable version, sorry for my mistake.

New feature:
- Config "actions" is not mandatory (I update doc.)

Example in http://www.snews.com.br/rowaction/rowactions.html

New archive below.

cmendez21
14 May 2008, 6:26 PM
saki please chek at my code i dont know wjats wrong with this
i have done it avery possible option on the page but the icon does not appear nor render the action

also cheched the elements on dom inspect and only the first row creates an action but without icon :s



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clientes</title>
<link rel="stylesheet" type="text/css" href="../../ext-2.0.1/resources/css/ext-all.css" />
<link href="../../res/css/style_main.css" rel="stylesheet" type="text/css" />

<link href="./rowactions/css/Ext.ux.grid.RowActions.css" rel="stylesheet" type="text/css" />
<link href="./rowactions/css/rowactions.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../../common/lang/lang_es.js" ></script>
<script type="text/javascript" src="../../ext-2.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.0.1/ext-all-debug.js"></script>
<script type="text/javascript" src="../../ext-2.0.1/build/locale/ext-lang-es.js" ></script>
<script type="text/javascript" src="../../ext-2.0.1/plugins/radiogroup/radiogroup.js" ></script>

<script type="text/javascript" src="gridsearch/js/Ext.ux.grid.Search.js" ></script>
<link href="gridsearch/css/gridsearch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="rowactions/js/Ext.ux.grid.RowActions.js" ></script>
<script type="text/javascript">
Ext.onReady(function(){
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();

cliente_ds = new Ext.data.Store({
url:'clientes_data.php',
baseParams:{ task:'getall' },
reader: new Ext.data.JsonReader({root:'records', id:'cve', totalProperty: 'totalCount'},
[
{name:'cveid' , mapping: 'cveid' , type: 'int'},
{name:'cve' , mapping: 'cve' , type: 'int' ,sortDir :'ASC'},
{name:'nombre' , mapping:'nombre' , type: 'string'},
{name:'grupo' , mapping:'grupo' , type: 'string'},
{name:'tipo' , mapping:'tipo' , type: 'string'},
{name:'rfc' , mapping:'rfc' , type: 'string'},
{name:'email' , mapping:'email' , type: 'string'},
{name:'sitioweb', mapping:'sitioweb', type: 'string'}
]
)
});

cliente_tbarx = new Ext.Toolbar({
id:'clientetoolbarx',
autoWidth: true, autoHeight:false,
items:[{
cls: 'x-btn-icon', icon: '../../res/clientes/cliente_add.png',
text: '',tooltip: 'Agregar nuevo registro',
handler: function(){ clienteexecute(1); }
},{
cls: 'x-btn-icon', icon: '../../res/clientes/cliente_edit.png',
text: '', tooltip: 'Modificar datos',
handler: function(){ clienteexecute(2); }
},{
cls: 'x-btn-icon', icon: '../../res/clientes/cliente_delete.png',
text: '', tooltip: 'Eliminar Registro seleccionado...',
handler: function(){ clienteexecute(3); }
},{
cls: 'x-btn-icon', icon: '../../res/clientes/cliente_refresh.png',
text: '', tooltip: 'Actualizar datos',
handler: function(){ clienteexecute(4); }
},'-',{
cls: 'x-btn-icon', icon: '../../res/reports/printer.png',
text: '', tooltip: 'Generar Reporte',
handler: function(){ clienteexecute(5); }
},{
cls: 'x-btn-icon', icon: '../../res/reports/printer.png',
text: '', tooltip: 'Generar Reporte 2',
handler: function(){ clienteexecute(6); }
}
]
});
cliente_bbarx = new Ext.PagingToolbar({
pageSize: 40,
store: cliente_ds,
displayInfo: true,
displayMsg: 'Mostrando Clientes {0} - {1} de {2}',
emptyMsg: "No hay Registros que desplegar"
})
function emaildisplay(val){
if (val==''){ return ''; } else { return '<a href="mailto:' + val + '" target="_blank">' + val + '</a>' }
}
function sitiodisplay(val){
if (val==''){ return ''; } else { return '<a href="http://' + val + '" target="_blank">' + val + '</a>' }
}

clienteactions = new Ext.ux.grid.RowActions({
header:'',
actions:[{
iconCls:'clientes_infox',
qtip:'Detalle de cliente',
hideIndex:'cveid',
iconIndex:'cveid'
}]
});
clienteactions.on({
action:function(grid, record, action, row, col) {
alert ("Hola");
}
});
cliente_colModelx = new Ext.grid.ColumnModel([
//new Ext.grid.RowNumberer(),
clienteactions,
{align: 'center', header: "Clave" , width: 50, sortable: true, dataIndex:'cve'},
{align: 'left' , header: "Nombre", width: 120, sortable: true, dataIndex:'nombre'},
{align: 'left' , header: "Grupo Emp.", width: 70, sortable: true, dataIndex:'grupo'},
{align: 'left' , header: "Tipo Emp.", width: 70, sortable: true, dataIndex:'tipo'},
{align: 'left' , header: "R.F.C.", width: 50, sortable: true, dataIndex:'rfc'},
{align: 'left' , header: "Email", width: 70, sortable: true, renderer: emaildisplay, dataIndex:'email'},
{align: 'left' , header: "Sitio WEB", width: 90, sortable: true, renderer: sitiodisplay, dataIndex:'sitioweb'}
]);
cliente_colModelx.defaultSortable = true;
cliente_ds.load({
callback: function (rsx,opx,successx){
if (successx){
} else {
alert("No hay datos..");
}
}
});
cliente_ds.on('load',function(){
cliente_ds.sort('cve', 'ASC');
});
clientes_grid = new Ext.grid.GridPanel({
id:'clientes_grid',
autoWidth: true,
height: 400,
store: cliente_ds,
cm: cliente_colModelx,
frame:true,
viewConfig: {
forceFit:true,
emptyText :'No hay registros...'
},
plugins:[new Ext.ux.grid.Search({
searchText: 'Buscar',
searchTipText:'Escriba el Texto a buscar y presione Enter',
selectAllText:'Seleccionar todo',
iconCls:'clientes_search'
}),clienteactions],
title:'Registros de Clientes',
tbar: cliente_tbarx,
bbar: cliente_bbarx
});
clientes_grid.on({
'dblclick': {fn: function(){
var chkedit = clientes_grid.selModel.hasSelection();
if (chkedit){
//var dataedit = personal_grid.selModel.selections.items[0].id;
//Ext.MessageBox.confirm('Atenci&oacute;n','Quieres Editar el registro # ' + dataedit +' ?', editpersx);
} else {
//alert ("Seleccione un registro antes de modificar");
}
}
},'render':{fn: function(){
clientes_grid.getView().refresh;
}
}
});
p = new Ext.Panel({
id:'cliente_panel',
autoDestroy : true,
border : false,
header : false,
title: 'prueba3',
collapsible:false,
renderTo: 'clientesxgrid',
autoWidth: true,
autoHeight :true,
items:[clientes_grid]
});

function clienteexecute(data_persref){
if (data_persref==1){
addcliente();
} else if (data_persref==2){
var chkedit = clientes_grid.selModel.hasSelection();
if (chkedit){
//var dataedit = personal_grid.selModel.selections.items[0].id;
//Ext.MessageBox.confirm('Atenci&oacute;n','Quieres Editar el registro # ' + dataedit +' ?', editpersx);
} else {
alert ("Seleccione un registro antes de modificar");
}
} else if (data_persref==3){
var chkdel = clientes_grid.selModel.hasSelection();
if (chkdel){
//var datadel = personal_grid.selModel.selections.items[0].id;
//Ext.MessageBox.confirm('Atenci&oacute;n','Quieres eliminar el registro, clave # ' + datadel +' ?', deleterpersonal);
} else {
alert ("Seleccione un registro antes de borrar/eliminar");
}
} else if (data_persref==4){
cliente_ds.reload();
} else if (data_persref==5){
reportcliente();
} else if (data_persref==6){
reportcliente2();
}
}

function createfields_cliente(){
}
function addcliente(){
}


});
</script>
<style type="text/css">
<!--
body {
}
.clientes_infox {
background-image:url(../../res/clientes/cliente_info.png);
}
-->
</style>
</head>
<body id="bodyclientes">
<div id="prueba2">
<img src="../../res/clientes/Accountant 2.png" width="16" height="16" />
<span class="titulopagecnt">M&oacute;dulo de Clientes</span>
</div>
<div id="clientesxgrid"></div>
</body>
</html>

cmendez21
14 May 2008, 10:42 PM
seems now its working fine and now the icons appear strange but works :D
sorry for the previous post

jsakalos
15 May 2008, 12:42 AM
You can also remove doctype from your page to save a lot of headaches with IE rendering bugs.

medley
15 May 2008, 2:28 AM
Hello,

I have a gridPanel with groupActions defined like that :


groupActions:[
{
iconCls: 'icon-distribute-batch'
,qtip:'Distribute AM-Batch'
,callback:function(grid, records, action, groupId) {

distributeAMBatch(grid);
}
}
When I click icon 'icon-distribute-batch', I would like to get all the rows of the group.

Thanx
Medley

jsakalos
15 May 2008, 2:30 AM
Have you read the docs in comments of source? You have argument records that is array of all records in the groupl

medley
15 May 2008, 2:42 AM
Yes, but in my case records is empty.
GroupId value is well filled.

Medley

medley
15 May 2008, 2:49 AM
I checked and in one grid, it works and not in the other one.
I will verify my code.

Thanx

jsakalos
15 May 2008, 3:02 AM
You can also step into onClick function with FB to see what's happening there with _groupId.

medley
15 May 2008, 6:51 AM
I found the problem. It wasn't a problem of code but a problem of datas.

With this XML, it does not work :


<list>
<torisDocument>
<batchId>1</batchId>
<batchNumber>(2008)1234(1-2)</batchNumber>
<Anumber>A6-0194/2007</Anumber>
<torisOrder>1</torisOrder>
<batchLangue>EN</batchLangue>
<torisLocation>Paragraphe 1</torisLocation>
<torisAuteur>Cohen Brothers</torisAuteur>
<torisProcedureNumber>2008/1234(TOP)</torisProcedureNumber>
<batchStatus>NEW</batchStatus>
</torisDocument>
</list>


With this XML, it works :


<list>
<torisDocument>
<batchId>1</batchId>
<batchNumber>200812341-2</batchNumber>
<Anumber>A6-0194/2007</Anumber>
<torisOrder>1</torisOrder>
<batchLangue>EN</batchLangue>
<torisLocation>Paragraphe 1</torisLocation>
<torisAuteur>Cohen Brothers</torisAuteur>
<torisProcedureNumber>2008/1234(TOP)</torisProcedureNumber>
<batchStatus>NEW</batchStatus>
</torisDocument>
</list>


I just removed the brackets.

Medley

jsakalos
15 May 2008, 6:56 AM
It is also problem of code as RegExp should be escaped. I've fixed it so please download RowActions, put parentheses back again and try. It should work even with them.

medley
15 May 2008, 7:20 AM
Thanx. It works with the brackets. :)

Medley

jsakalos
15 May 2008, 7:24 AM
Perfect!

Thank you for testing.

JEBriggs
21 May 2008, 2:26 PM
Can this plugin be used to display links that open up a web page in a new window? (either simple text links or text links with an icon).

jsakalos
21 May 2008, 4:23 PM
For text links you don't need RowActions - simple renderer generating <a></a> is enough. If you want icon, then yes, RowActions can be used for this purpose; you just need to write an appropriate action handler. For link text, take a look at textIndex property.

donssmith
21 May 2008, 10:49 PM
Hi Saki,

A nice addition would be the ability to have the icon(s) set to an initial low opacity and when the mouse hovers over the row have the icon(s) set to full opacity... then on mouse out have the opacity go back to the low value. I've found that when you're displaying a lot of rows with 2 or more icons the grid becomes really busy and cluttered.

Thanks,
Don

jsakalos
22 May 2008, 12:49 AM
You can achieve the effect you describe with css, however, I'm not sure if IE6 supports :hover pseudo selector on arbitrary element.

svdb
22 May 2008, 9:11 AM
Hi,

Thanks for this great component and kudos for the clean coding style.

I would like to be able to change the iconIndex and the qtipIndex of the button the user just clicked (see code snipet below). I'm able to modify the record.data, but the changes aren't rendered: how do I force update the action button?

(I use only one button which either validates or deletes rows depending on its iconCls)

Thanks for your insight.
SV



rowBtn.on({
action:function(grid, record, action, row, col) {
if (action == 'xyz-button-delete') {
grid.getStore().remove(record);
} else {
record.data.iconIndex1 = 'xyz-button-delete';
record.data.qtipIndex1 = 'delete';
var p = new PRecord({
xyz1: ' '
,xyz2: ' '
,xyz3: ' '
,xyz4: ' '
,iconIndex1:'xyz-button-accept'
,qtipIndex1:'validate'
});
grid.stopEditing();
grid.getStore().add(p);
grid.startEditing(grid.getStore().getCount()-1, 0);
}
}
});

jsakalos
22 May 2008, 1:29 PM
Never access record's data property directly. Use get/set methods instead. E.g. record.set('iconIndex1', 'xyz-button-delete');

Spirit
25 May 2008, 11:30 PM
Hi Saki!

Nice extension as usual =D>

If you shrink the window of your online demo, there comes a point when the headline group action (view graph) breaks to the first data line. Would look better if it would not do that.

I know that its not so dramatic, but maybe it only got unnoticed so far...

Greetz
Spirit

jsakalos
26 May 2008, 12:28 AM
Yes, you're right. I've just set minWidth of the Window. Real solution would be to adjust css of group headers.

ray007
31 May 2008, 12:11 AM
I really like the RowActions plugins, there's just 1 thing I'd wanted to be different: to have an extra property to specify the command instead of reusing the iconCls for that.
That way I could have buttons without icons (and no space reserved for a non-existant icon), it would be easier to change icons without changing the command processing infrastructure, we could have different buttons (with text) having the same icon but issuing different commands, ...
Most (all?) of these things are doable right now too, but they need more work than need be.
Thanks for listening to my rambling ;)

jsakalos
31 May 2008, 1:20 AM
I really like the RowActions plugins, there's just 1 thing I'd wanted to be different: to have an extra property to specify the command instead of reusing the iconCls for that.
Just name your icon classes as you would name commands, instead of 'icon-open' you can use 'open'.


That way I could have buttons without icons (and no space reserved for a non-existant icon),There will never be buttons in grid. Buttons are Ext objects and the overhead of creating and destroying them is not worth the final effect. Nevertheless, you can already have text there and if you don't want icon just set url to s.gif. No space for icons === hideMode:'display'.

it would be easier to change icons without changing the command processing infrastructure, we could have different buttons (with text) having the same icon but issuing different commands, ...
Most (all?) of these things are doable right now too, but they need more work than need be.
Thanks for listening to my rambling ;)It is just a viewpoint of where you want to change things. If you want to change icon, just change css, instead of code, and if you want to use same image for different commands, just create 2-3 css classes with different names (commands) and put same url to images to them.

justinfalk
8 Jun 2008, 7:17 PM
Nevermind, I found my answer. This extension looks excellent. Thanks Saki!

Justin

KRavEN
9 Jun 2008, 6:16 AM
Hey Saki,

I'm using this in a couple of projects and I recently got a request for a button on the grid toolbar that would click one of the RowActions icons for all rows that were selected in the grid. I ended up doing this:

topToolbar.addButton({
id : "btn_import",
text : "Import",
action : "import",
idRequired : false,
cls : "x-btn-text-icon btn_session_add",
disabled : false,
handler : function() {
var grid = OpnetList.getGridPanel();
var selections = grid.getSelections();

if (selections) {
Ext.Msg.confirm("Confirm", "Are you sure you want to Import " + selections.length + " file(s)?", function(btn, text) {
if (btn == "yes") {
for (var i = 0; i < selections.length; i++) {
grid.plugins[1].callbacks.icon_import(grid,selections[i]);
}
}
});
}
}
});

icon_import is of course the callback for one of the RowActions icons.

Is this the best way to accomplish what I'm doing?

jsakalos
9 Jun 2008, 3:37 PM
Well, the task of doing something with selected records has very little to do with RowActions that operate on one record.

Anyway, the code you posted is fine except getting the function to call from plugins (private array). I'd rather code a function and I'd call it from both actions and toolbar button (in the loop).

lkasdorf
9 Jun 2008, 7:15 PM
Hi Saki

I'm using your rowActions plugin with great success- thanks so much for all that you contribute.

One glitch is that I am unable to alter the alignment of the icon. It is always left, and I want it center. Here is my code:




this.rowActionUpl = new Ext.ux.grid.RowActions({
header:'Upload<br>PDF'
,autoWidth:false
,width:75
,align:"center" // tried it here
,actions:[{
iconCls:'icon-acrobat'
,tooltip:'Upload PDF of Contract'
,align:'center' // tried it here
,style:'text-align:center' // even tried it here
}]
});
this.rowActionUpl.on('action', this.onRowAction, this);



I've searched here and not found this issue addressed.
What am I missing? Thanks!
lkasdorf

Yossi
10 Jun 2008, 4:09 AM
I got the rowactions to work, but without the images!
It also crashes Firefox after a short while (doesn't crash IE).



Ext.ns('Ext.Objects.RowActions');
Ext.Objects.RowActions = Ext.extend(Ext.grid.GridPanel, {
collapsible:true,
width:800,
height:350,
title:'my grid',
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
autoScroll:true,
initComponent: function(){
this.action = new Ext.ux.grid.RowActions({
header:'Actions'
,actions:[{
iconIndex:'action1'
,iconCls:'cms-icon-page_add'
,tooltip:'Open'
},{
iconCls:'cms-icon-page_delete'
,tooltip:'Configure'
//,qtipIndex:'qtip2'
,iconIndex:'action2'
,hideIndex:'hide2'
,style:'background-color:brown'
// ,text:'Open'
},{
iconIndex:'action3'
//,qtipIndex:'qtip3'
,iconCls:'cms-icon-page_edit'
,tooltip:'User'
,style:'background-color:orange'
}]
,callbacks:{
'cms-icon-lightbulb':function(grid, record, action, row, col) {
alert('yey');
//Ext.ux.Toast.msg('Callback: icon-plus', 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>', row, action);
}
}
});

// dummy action event handler - just outputs some arguments to console
this.action.on({
action:function(grid, record, action, row, col) {
//Ext.ux.Toast.msg('Event: action', 'You have clicked row: <b>{0}</b>, action: <b>{1}</b>', row, action);
}
,beforeaction:function() {
//Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
,beforegroupaction:function() {
//Ext.ux.Toast.msg('Event: beforegroupaction', 'You can cancel the action by returning false from this event handler.');
}
,groupaction:function(grid, records, action, groupId) {
//Ext.ux.Toast.msg('Event: groupaction', 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>', groupId, action, records.length);
}
});

this.cm2 = new Ext.grid.ColumnModel([{
header: "name",
dataIndex: 'name',
width: 160,
align: 'right'
},
{
header: "filename",
dataIndex: 'file',
width: 160,
align: 'right'
},
{
header: "morestuff",
dataIndex: false,
width: 16,
align: 'right'
},
this.action]);

this.store2 = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://localhost/section'
}),
reader: new Ext.data.JsonReader({
root:'data',
totalProperty: 'totalCount',
id: 'id'
}, ['id', 'name', 'file', 'published', 'section_id', 'created', 'modified'
,{name: 'action1', type: 'string'}
,{name: 'action2', type: 'string'}
,{name: 'action3', type: 'string'}
,{name: 'qtip1', type: 'string'}
,{name: 'qtip2', type: 'string'}
,{name: 'qtip3', type: 'string'}
,{name: 'hide2', type: 'boolean'}]
)
});

Ext.apply(this, {
store: this.store2,
cm: this.cm2,
plugins:[this.action],
viewConfig: {
forceFit:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds){
if(this.showPreview){
p.body = '<p class="rtl">'+record.json['content']+' ...</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
}
});
Ext.Objects.RowActions.superclass.initComponent.apply(this, arguments);
},
onRender: function(){
Ext.Objects.RowActions.superclass.onRender.apply(this, arguments);
this.store2.load({params:{start:0, limit:10}});
}
});

Ext.reg('rowactions', Ext.Objects.RowActions);


Caller = {
List : function(tab) {
var myGrid = new Ext.Objects.RowActions({});//propA: 2});
tab.add(myGrid);
tab.doLayout();

Ext.EventManager.onWindowResize(function() {myGrid.setWidth(tab.getInnerWidth()-19); });

}
};


Solved - just removed: iconIndex:'action1'

Yossi
10 Jun 2008, 9:39 PM
Is there a way to change the icon of an item, after the rowactions was rendered?

I have an icon that should change from on to off and vice versa.

jsakalos
11 Jun 2008, 12:09 AM
You can bind icon to store with iconIndex config option. See the example.

jsakalos
11 Jun 2008, 12:12 AM
One glitch is that I am unable to alter the alignment of the icon. It is always left, and I want it center.


The original idea is to have icons in a narrowest column possible so I've never thought of alignment.

lobo-tuerto
11 Jun 2008, 8:53 AM
If I would like to set the header's width, how can I do that?

I think setting autoWidth to true should give you the narrowest column possible. But sometimes this isn't desirable. For example, the name of the column is "Operations", but when I have just 1 icon in it, the name gets cut off. :(

Anything that can be done, Saki?

jsakalos
11 Jun 2008, 11:45 AM
autoWidth:false, width:333

Yossi
12 Jun 2008, 3:57 AM
You can bind icon to store with iconIndex config option. See the example.

In the code it says..:


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


But what if the icon was rendered from the store. Let's called it "CLS1".
After the user clicks on it, I want it to change to "CLS2". Like a toggle button.

Is that possible?

macedge
12 Jun 2008, 6:31 AM
hi, I'm new in ExtJS an in want to use one of that great plugins, but I've got a problem with the RowActions Plugin.

When the code is executed there are no images displayed in the cell..??? :s

This is my code...

[HTML](function(){
el = new Ext.form.FieldSet({
xtype: 'fieldset',
collapsible: 'true',
title: 'Kampagnen',
autoHeight: 'true',
defaultType: 'textfield',
items: [
(function()
{
el = new Ext.grid.EditorGridPanel({width: '100%',autoHeight: true,title: 'Kampagnen

jsakalos
12 Jun 2008, 11:49 PM
Check if Ext.BLANK_IMG_URL point to a valid s.gif on your server, check if you have included all necessary css and if path to your images is valid. Firebug is your friend here.

jsakalos
12 Jun 2008, 11:50 PM
In the code it says..:


* - @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.
But what if the icon was rendered from the store. Let's called it "CLS1".
After the user clicks on it, I want it to change to "CLS2". Like a toggle button.

Is that possible?

Yes, update record in store.

Nadril
13 Jun 2008, 5:15 AM
Hi,

It' my first post, so welcome :)

I try to learn how to use Ext JS and I have a problem with RowActions plugin.

I've copied content of the rowactions-1.0.zip to my webroot folder, changed the links to the ext libs in the rowactions.html.

When I try to see it working I only have error from firebug:



missing } in XML expression
http://localhost/rowactions.js
Line 28
I didn't change anything in downloaded files apart from paths to libs as stated above.


My question is what could I done wrong?


Thanks in advance,
Michael


edit:
Problem SOLVED

jsakalos
14 Jun 2008, 5:09 AM
Can you tell us what was the problem?

Yossi
14 Jun 2008, 5:23 AM
Yes, update record in store.

Nope, it still doesn't work. I sent an event to the store to remind it of the change. Is there anything I'm missing?

The grid's icon is changed, however the image doesn't show on the rowactions.
Other images do show on the row actions, .. this one doesn't.



this.store2.on('load', function(data) {
for(var i=0; i<data.data.length; i++) {
if(data.reader.jsonData.data[i]==1) data.reader.jsonData.data[i]['published']='icon-lightbulb';
else data.reader.jsonData.data[i]['published']='icon-lightbulb_off';
}
this.fireEvent('refresh');
this.store2.fireEvent('datachanged');
}, this, {delay: 5});


Is there another way to do that?
I have on a column a render event, it would be wonderful to use something similar on actionrows. Otherwise I have to use two functions.



this.cm = new Ext.grid.ColumnModel([{
{
header: "Published",
dataIndex: 'published',
width: 16,
align: 'center',
renderer: Views.PublishedIcon
},
this.action]);

Views = {
PublishedIcon : function (value, p, record) {
if(record.json['published']==1) {
return '<div class="icon-lightbulb" style="width: 16px; margin: 0 auto;">&nbsp</div>';
}
else return '<div class="icon-lightbulb_off">&nbsp</div>';
}
}

jsakalos
14 Jun 2008, 5:58 AM
I've meant sth such simple as: record.set('iconIndexName', 'icon-another');

Nadril
14 Jun 2008, 8:03 AM
Can you tell us what was the problem?

I wish I could, but i still don't know, why I had it.
I tried to include that plugin in a bigger project, when I found out it didn't work I tried to make it working in webroot.

A few hours after my post on forum, friend of mine has helped me, he included the plugin exactly in the place I wished, so I didn't borther any longer, why the problem occured.

He said, he had no problem with plugin, so for sure I've done something wrong.

Yossi
15 Jun 2008, 7:58 PM
I've meant sth such simple as: record.set('iconIndexName', 'icon-another');

LOL, silly me :-)
Got it to toggle fine, but the column disappears (http://extjs.com/forum/showthread.php?t=38572) when I toggle the grid. Do you know of that bug?

jsakalos
16 Jun 2008, 3:59 AM
I have not been aware of that thread. Do you have a complete showcase that I could debug locally?

Yossi
17 Jun 2008, 12:11 AM
I have not been aware of that thread. Do you have a complete showcase that I could debug locally?

Of course, I uploaded the full code + screenshot of the problem on my computer + JSON code.

It happens in both IE7 and FireFox2, by the way..

Link to the thread.. (http://extjs.com/forum/showthread.php?p=182743)

fanta2k
18 Jun 2008, 4:53 AM
Hi there,

I have small problem with rowActions.

iconCls is not added as class ?!

example:



var rowAction = new Ext.ux.grid.RowActions({header: 'Actions',actions: {iconCls:'edit',iconIndex: 'action1',qtipIndex: 'qtip1',tooltip: 'Edit'}});


generated html:



<div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">
<div class="ux-row-action">
<div class="ux-row-action-item" qtip="" style=""/>
</div>
</div>


(i use rowActions 1.0, also tried dev js)


*solved, its iconIndex :)

jsakalos
18 Jun 2008, 5:15 AM
iconCls and iconIndex are mutually exclusive. iconIndex is the name of the field of record where to take the icon class from. iconCls is for static icons, record content independent.

RTFM ;)

spotk
18 Jun 2008, 1:22 PM
Hi,
first thank you for this usefull extension ;)

i've tried setting a hideIndex attribut to a groupAction but didn't success , it 's ok with actions .
is it a normal behaviour ? and if yes is there a way to dynamically hide a groupAction ?

thanks

Xavier

jsakalos
18 Jun 2008, 3:34 PM
No, you cannot hide groupActions.

Yossi
19 Jun 2008, 2:32 AM
Josef, did you manage to have a look at the updated thread?

jsakalos
19 Jun 2008, 10:56 AM
What exactly do you mean?

Yossi
19 Jun 2008, 3:42 PM
What exactly do you mean?

You asked me a few posts ago..:


I have not been aware of that thread. Do you have a complete showcase that I could debug locally?

and I uploaded the information to the other thread:
http://extjs.com/forum/showthread.php?p=182743

I wondered if that's related to rowactions, or I should post a bug about that..

jsakalos
19 Jun 2008, 3:45 PM
Disappearing of icons after record.set(). No, I haven't looked into that yet.

ZooKeeper
20 Jun 2008, 3:00 AM
Great plugin!

Is there any reason not to use callback instead of handler? This makes the plugin incompatible with Ext.Action.

jsakalos
20 Jun 2008, 3:28 AM
Great plugin!

Is there any reason not to use callback instead of handler? This makes the plugin incompatible with Ext.Action.

There is the callback functionality separately for each action. Cannot be used?

ZooKeeper
20 Jun 2008, 3:47 AM
Ext.Action expects this:

var action = new Ext.Action({
text: 'Do something',
handler: function(){
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'do-something'
});

When RowActions have this format.

this.addToCartAction = {
iconCls:'my_cart_ico',
tooltip:'Add to Cart',
callback: this.addToCart
}

If I want to use regular Ext.Action to plug into the grid action - I cann't use it since it has callback instead of handler

macedge
20 Jun 2008, 11:40 AM
Hi,
i want to change the rowactions for a row but dont know how to do this.
i've tried to do these changes at the rows "// can I change or remove iconCls here" in the code but it didn't work. is this the correct way to do this or is there a better solution???

this is my code...


var action_orders = new Ext.ux.grid.RowActions(
{
header: 'Aktion',
actions: [
{iconCls: 'icon-edit' , qtip: 'edit'},
{iconCls: 'icon-remove',qtip: 'remove'},
],
getData:function(value, cell, record) {
// can I change or remove iconCls here
}
});

action_orders.addListener('action', function(grid, record, action, row, col)
{
switch(action)
{
case 'icon-edit':
Ext.Ajax.request(
{
url: 'widget/remoteLoader?_component=campaigns&_action=edit&wid=campaigns_'+record.get('id')+'&id='+record.get('id'),
success: function(result, options){
win = eval(result.responseText);
win.show('x-desktop');
}
});
break;
case 'icon-remove':
Ext.Ajax.request(
{
url: 'widget/remoteLoader?_component=campaigns&_action=edit&wid=campaigns_'+record.get('id')+'&id='+record.get('id'),
success: function(result, options){
win = eval(result.responseText);
win.show('x-desktop');
}
});
break;
}
});


(function(){ var el = new Ext.grid.EditorGridPanel({
width: '100%',
autoHeight: true,
title: 'overview',
clicksToEdit: 2,
columns: [
{header: 'MyId', sortable: true, dataIndex: 'id', id: 'object_id', },
action_orders
],
store: (function(){ var el = new Ext.data.JsonStore({remoteSort: false,
stripeRows: true,
sort_column: 'id',
sort_direction: 'asc',
url: '/orders/loadcampaigns/id/7188',
root: 'data',
fields: [{name: 'id', },],
items: {}});

el.addListener('load',function(store,records)
{
for(i = 0; i<records.length; i++)
{
if(records[i].get('id') == '21521')
{
// can I change or remove iconCls here
}
}
});
el.setDefaultSort('id', 'asc'); el.load(); return el; })(),
plugins: [action_orders],
items: {}});return el;})().render('x-desktop')

jsakalos
20 Jun 2008, 11:54 PM
You can bind an action to a record field with actionIndex. Or I miss the point?

macedge
21 Jun 2008, 1:27 AM
hi saki,
here's an image to show you what i want to do...
example: a user has no rights to delete a record, so the action has to be hidden
http://eanza.de/templates/eanza/dynimages/extjs.gif

my question is how can i remove/add an action for one specific row in the store.

jsakalos
21 Jun 2008, 1:49 AM
hideIndex

macedge
21 Jun 2008, 2:33 AM
now i got an error "hideIndex is not a function". i tried to call this function in the actionRow object and in the record... there's no function defined (console.debug)

jsakalos
21 Jun 2008, 2:45 AM
Read the documentation in comments of the plugin.

macedge
21 Jun 2008, 4:09 AM
sorry i'm not an javascript guru just a stupid php developer :-(,
when i add the paramater "iconIndex:'action2'" as on the example on rowactions.extjs.eu, no records are displayed
and firebug fires an error " fn = new Function('values...Ext.util.Format.htmlDecode(exp))+'; }');"

macedge
21 Jun 2008, 7:04 AM
now it works - the mistake was, that i didn't put the icon-information in the store as in the example on http://rowactions.extjs.eu/get-grid-data.php ;-)
thx for your help

Yoris
23 Jun 2008, 11:54 AM
Hi saki, im having some trouble working some dumb in the inclusion of this plugin,
this is the error,


ss has no properties
filter([tr], undefined, undefined)ext-all-debug.js (line 927)
is(tr, undefined)ext-all-debug.js (line 921)
findParent(undefined, 3, undefined)ext-all-debug.js (line 2093)
findCell(tr)ext-all-debug.js (line 29979)
findCellIndex(tr, undefined)ext-all-debug.js (line 29983)
onClick(Object browserEvent=Event mouseout button=0 type=mouseout, div.x-grid3-cell-inner)logged (line 615)
h(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 1613)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)

chrome://firebug/content/blank.gif ss = ss.replace(trimRe, "");


and this is my code


var agentRowActions = new Ext.ux.grid.RowActions({
header:'Actions'
// ,autoWidth:false
,actions:[{
iconIndex:'action1'
,qtipIndex:'qtip1'
,iconCls:'icon-open'
,tooltip:'Open'
},{
iconCls:'icon-wrench'
,tooltip:'Configure'
,qtipIndex:'qtip2'
,iconIndex:'action2'
// ,text:'Open'
},{
iconIndex:'action3'
,qtipIndex:'qtip3'
,iconCls:'icon-user'
,tooltip:'User'
,style:'background-color:yellow'
}]
,groupActions:[{
iconCls:'icon-del-table'
,qtip:'Remove Table'
},{
iconCls:'icon-add-table'
,qtip:'Add Table - with callback'
,callback:function(grid, records, action, groupId) {
Ext.ux.Toast.msg('Callback: icon-add-table', 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>', groupId, action, records.length);
}
},{
iconCls:'icon-graph'
,qtip:'View Graph'
,align:'left'
}]
,callbacks:{
'icon-plus':function(grid, record, action, row, col) {
Ext.ux.Toast.msg('Callback: icon-plus', 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>', row, action);
}
}
});

agentRowActions.on({
action:function(grid, record, action, row, col) {
Ext.ux.Toast.msg('Event: action', 'You have clicked row: <b>{0}</b>, action: <b>{1}</b>', row, action);
}
,beforeaction:function() {
Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
}
,beforegroupaction:function() {
Ext.ux.Toast.msg('Event: beforegroupaction', 'You can cancel the action by returning false from this event handler.');
}
,groupaction:function(grid, records, action, groupId) {
Ext.ux.Toast.msg('Event: groupaction', 'Group: <b>{0}</b>, action: <b>{1}</b>, records: <b>{2}</b>', groupId, action, records.length);
}
});

var priceRuleDataRecord = Ext.data.Record.create([
{name: 'id', type:'int'}
,{name: 'name', type:'string'}
,{name: 'begin_date'}
,{name: 'start_time'}
,{name: 'end_date'}
,{name: 'end_time'}
,{name: 'days'}
,{name: 'min'}
,{name: 'inc'}
,{name: 'priority'}
,{name: 'enabled'}
,{name: 'action1',type:'string'}
,{name: 'action2',type:'string'}
,{name: 'qtip1',type:'string'}
,{name: 'qtip2',type:'string'}
,{name: 'enabled'}
]);

var colModelPR_<?echo $users[$i]['User']['id']?> = new Ext.grid.ColumnModel([{
...
}
,checkColumnPR_<?echo $users[$i]['User']['id']?>
,agentRowActions
]);

var user_<? echo $users[$i]['User']['id']?>_PR =new Ext.grid.GridPanel({
id:'priceRulesGrid_<?echo $users[$i]['User']['id']?>'
,stripeRows:true
,autoScroll:true
,autoExpandColumn:'description'
,clicksToEdit:2
,forceFit:true
,loadMask:true
,cm: colModelPR_<?echo $users[$i]['User']['id']?>
,selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
,store:nopr_<? echo $users[$i]['User']['id'] ?> = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'agents/listPriceRules/<?echo $users[$i]['User']['id']?>'
,method:'POST'
})
,reader: new Ext.data.JsonReader({
root:'results'
,totalProperty:'total'
,id:'id'
}, priceRuleDataRecord)
,sortInfo:{field:'name', direction:'ASC'}
})
,listeners:{
...
}
,plugins:[
...
,agentRowActions
]
,bbar: new Ext.PagingToolbar({
...
})
});


as you can see im filtering the js through php because this code is being reused "n" times with small changes in it....
what could be causing this? im sure its some dumb thing i forgot, but im testing it with your code from the examples, i made sure to be receiving the actions and qtips from server... and searched the forums, but this is a rare error, it seems, any suggestions?
hope to hear from you..
much obliged...

jsakalos
23 Jun 2008, 12:00 PM
Do you have actions in column model?

Yoris
23 Jun 2008, 12:04 PM
i do, header appears, no icons, but i think thats because it cant find the images, something with the css, i included the RowActions.css by the way, i did not tell you this in the previous post...
a reference to actions is being passed to cmodel and plugins section of the grid...

jsakalos
23 Jun 2008, 12:07 PM
Well, the best advice would be to compare your code with the working example of mine. There must be some difference.... Or, take the example and adjust it to your needs step by step to see when it stops working.

Yoris
23 Jun 2008, 12:18 PM
is it necessary to include


,proxy:new Ext.data.HttpProxy({url:whateverUrl})
in the grids plugins? that is the only difference i could find with your code....

EDIT: nevermind..... thats not whats wrong.... im doing it also....