Debugging Ext.ux.grid.RowActions

[CRH]

First off I posted this question in the Architect forum as it was related to my initial problem but it is more of an Ext question. (Should I close down the original thread, ie mark answered and point a link here?)

Anyway back to the issue, I am debugging a problem I am having with "Ext.ux.grid.RowActions"
and this is the line of code where it breaks.




var currentVal = grid.store.getAt(view.indexOf(Ext.fly(t).up('.x-grid-group-hd').next().down('.x-grid-row'))).get(groupField);

I get "Uncaught TypeError: Cannot read property 'viewIndex' of null"

To debug I just spit out some of the values

console.log('next');console.log(Ext.fly(t).up('.x-grid-group-hd').next());
console.log('down');
console.log(Ext.fly(t).up('.x-grid-group-hd').next().down('.x-grid-row'));

Result

next

Ext.Element.Ext.core.Element

dom: HTMLTableRowElement
id: "gridview-1036-gp-11N001 MRS dtd Jan-3-2011"
__proto__: Object
down
null

It all seems fine until it hits ".down('.x-grid-row')" which returns the "null" value the error was showing. This is a little out of my zone of expertise so any pointers on what to look for next to debug. Does the '.x-grid-row' just not exist in that data? How can I find out if is does or does not?

Thanks

[tvanzoelen]

Just inspect that next element and you probaby dont see a '.x-grid-row' class in it.

What is the t var containing? A click event?

[CRH]

How would I go about inspecting the element? Manually? I did poke around for a bit but did find it. Basically that line is trying to find the value of that groupField, I sort of understand what it is doing after reading the API notes on indexOf, fly, up, next, down but I don't know why '.x-grid-row' is not present and what else to look for/replace in the .down to return the correct data back to indexOf in this line of code

var currentVal = grid.store.getAt(view.indexOf(Ext.fly(t).up('.x-grid-group-hd').next().down('.x-grid-row'))).get(groupField);


Here is the section of RowAction.js I am working with there are a lot on console.log's ...


,onContainerEvent:function(view, e, options) { var me = this,
grid = me.grid,
view = grid.getView(),
groupField = grid.store.groupField;

var t = e.getTarget('.ux-grow-action-item');

// If this event isn't on a group actions then continue
if (!t) return true;
console.log('start debug debug');
console.log('t');
console.log(t);
console.log('grid');
console.log(grid);
console.log('grid.store');
console.log(grid.store);
console.log('grid.store.data');
console.log(grid.store.data);
console.log('view');
console.log(view);
console.log('fly');
console.log(Ext.fly(t));
console.log('up');
console.log(Ext.fly(t).up('.x-grid-group-hd'));
console.log('next');
console.log(Ext.fly(t).up('.x-grid-group-hd').next());
console.log('down');
console.log(Ext.fly(t).up('.x-grid-group-hd').next().down('.x-grid-row'));
console.log('getAt');
console.log(grid.store.getAt(17));
console.log('groupField');
console.log(grid.store.getAt(17).get(groupField));
console.log('end debug');
var currentVal = grid.store.getAt(view.indexOf(Ext.fly(t).up('.x-grid-group-hd').next().down('.x-grid-row'))).get(groupField);


// get matching records
var records = grid.store.queryBy(function(r) {
return r.get(groupField).match(currentVal);
});

records = records ? records.items : [];

action = t.className.replace(/ux-grow-action-item (ux-action-right )*/, '');

if(action && action.indexOf(' ') > -1){
action = action.substring(0, action.indexOf(' '));
}


// fire events
if(true !== me.eventsSuspended && false === me.fireEvent('beforegroupaction', grid, records, action, currentVal)) {
return false;
}

// call callback if any
if('function' === typeof me.callbacks[action]) {
me.callbacks[action](grid, records, action, currentVal);
}


return this.fireEvent('groupaction', grid, records, action, currentVal);

}

and this is the console log

start debug
t
<div class=?"ux-grow-action-item icon-grid qtip-target" style data-qtip=?"Action on Group" id=?"ext-gen1066">?</div>?
grid
Ext.Class.newClass
grid.store
Ext.Class.newClass
grid.store.data
Ext.Class.newClass
view
Ext.Class.newClass
fly
El.Flyweight
up
Ext.Element.Ext.core.Element
next
Ext.Element.Ext.core.Element
down
null
getAt
Ext.Class.newClass
groupField
11N004 MRS dtd Feb-16-2011
end debug


Uncaught TypeError: Cannot read property 'viewIndex' of null ext-all-debug.js:60724
Ext.define.indexOf ext-all-debug.js:60724
Ext.define.onContainerEvent RowActions.js:475
fire ext-all-debug.js:10658
Ext.define.continueFireEvent ext-all-debug.js:13854
Ext.define.fireEvent ext-all-debug.js:13834
Ext.override.fireEvent ext-all-debug.js:24019
Ext.define.processUIEvent ext-all-debug.js:69500
Ext.define.handleEvent ext-all-debug.js:69412
(anonymous function)
wrap ext-all-debug.js:11088

[scottmartin]

How would I go about inspecting the element?

Are you familiar with FireBug or DevTools (Chrome)?

Scott.

[CRH]

I am using the Developer tools in Chrome and have manually expanded the results looking for '.x-grid-row' but there are so many trees to expand I gave up.

I am assuming it is missing or else the .down would have found it a returned a value correct? If so then any idea how I can find the value of groupField for a header? What else can I scour for?

[tvanzoelen]

What kind of event is triggered? I had issues with the click event, if it was not clicked on the right spot it can search for elements that aren't there.


Couple of if undefined conditions can solve the problem. Firebug is good. Just set a breakpoint at the point where you do the logging now. In the javasource.

[CRH]

It is a mouse click event, I click the icon in the image below
38515


I was digging around in Chrome Developer tools and explored the element section, this is starting to make a bit more sense and I did find the element "<tr class="x-grid-row">" in the data returned from

console.log(Ext.fly(t).up('.x-grid-group-hd').next());

but it still returns a "null" value for

console.log(Ext.fly(t).up('.x-grid-group-hd').next().down('.x-grid-row'));

here is a bit of the tree and you can see the x-grid-row so it is there, so why does it return a null?

38514

[tvanzoelen]

Yeah with a click you can expect this problem because you must click on the exact spot where all element are there. If you click for example on the text part of a dom element , there are probably no elements below.

The code must handle all these conditions then. Just set a breakpoint in the javasource. You can inspect the element there.

In your case probably the next() allready returns the element you need.

[CRH]

but if it is an icon I am clicking on should that not be all well and good. I click on any of the icons in the grid, there is one per group header, and it always returns the correct element in the .up and .next it is just the .down that comes back with null

I tried with just the .next but get

Uncaught TypeError: Cannot call method 'get' of undefined

I get what it is trying to do, it is scouring the DOM elements to somehow relate the group to a record in the store just don't get how..

[tvanzoelen]

Just take our advise. Use the debugger and set a breakpoint. You can do that in chrome or with firefox and firebug.

There you can easily inspect the element what comes in.

[CRH]

Thanks the breakpoint works great! If nothing I am learning a lot via this exercise. Not sure if it is the only way but I simply added "debugger;" , minus the quotes, just before the error to set the breakpoint?

Anyway, I took a look around the DOM and I can move next and up without issue but for some reason I the down always returns "null". Here is the part of the DOM I am looking at

38532

And here is some of the debugging I have done, I set currentVal to the position highlighted in the above image then tried moving up and down. You can see the up works, but the down returns "null" for the two searches I performed even though I can see them in the above image.....?


38531