1. #1
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    34
    Vote Rating
    0
    CRH is on a distinguished road

      0  

    Default Unanswered: Debugging Ext.ux.grid.RowActions

    Unanswered: Debugging Ext.ux.grid.RowActions


    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.



    Code:
    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
    Code:
    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



  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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?

  3. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    34
    Vote Rating
    0
    CRH is on a distinguished road

      0  

    Default


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

    Code:
        ,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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    How would I go about inspecting the element?
    Are you familiar with FireBug or DevTools (Chrome)?

    Scott.

  5. #5
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    34
    Vote Rating
    0
    CRH is on a distinguished road

      0  

    Default


    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?

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    34
    Vote Rating
    0
    CRH is on a distinguished road

      0  

    Default


    It is a mouse click event, I click the icon in the image below
    Capture4.JPG


    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?

    Capture3.jpg

  8. #8
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

  9. #9
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    34
    Vote Rating
    0
    CRH is on a distinguished road

      0  

    Default


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

  10. #10
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

Thread Participants: 2