ViewController

[Ryan Lund]

Ok now I'm annoyed! Just spent the last 20 minutes writing a post but it doesn't appear to have saved :\ Anyway...........i'll try again! (sorry, it won't be as well written as the first)

So, I have a view controller with the following:

control:{

    forgotPassword:{

         tap: 'forgotPassword'

    }

}

/** I have also tried... **/

control:{

    forgotPassword:{

        selector: 'a#forgotPassword',

        listeners:{

            tap: 'forgotPassword'

        }

    }

}

I am trying to select something like:

items:[{
   xtype: 'container',
   html: '<a href="#" id="registerButton">A test</a>'
}]

Which doesn't work. However, this works perfectly fine:

items:[{
    xtype:'container',
    items:[{

                 xtype:'container',

        itemId: 'forgotPassword',

        html: 'Forgotten Password?'

    }]
}]

Soooo, does anyone know why I can't select id's specified within html? It appears to be creating some sort of fatal error but as I'm debugging remotely I don't actually get the errors (my app just stops working)

Thanks in advance! (fingers crossed that this one will save!)

Ryan

[Chad Glendenin]

I ran into something like this recently. The problem was that the DOM elements defined in the config:html block are not yet attached to the main document when the initializers run, so you can't select them the usual way. For me, the solution was to use `this.element.down('my-selector')`. For you, it might be sufficient to use a live selector. I think I would try that first.

--
Deft JS home page: http://deftjs.org/
Wiki: https://github.com/deftjs/DeftJS/wiki
For rules and tips on asking questions on the Deft JS mailing list: https://github.com/deftjs/DeftJS/wiki/Asking-Questions-on-the-Mailing-List
---
You received this message because you are subscribed to the Google Groups "Deft JS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to deftjs+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/deftjs/e71dfce3-f91d-4693-b277-bd91f6f05326%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ryan Lund]

Hey Chad, thanks for your reply to my ever-so-slightly annoyed post haha. That's a good idea, I'll give it a go in the morning and get back to you. 

Ryan

[Ryan Lund]

Hi again,

So, I didn't actually try what you mentioned but I have got this working.  This is what I did:

In the view:

{

    xtype:'label',

    itemId: 'links',

    html: '<a href="#" class="register">Register</a> | <a href="#" class="forgotPassword">Forgotton Password?</a>',

                    

    //Tap event is not on label, is on inner element? This code "fixes" the label tap event

    listeners:{

        element: 'element',

        singletap : function(event, target) {

            this.fireEvent('singletap', this, event, target);

        }

    }
}

In the 'control' section of my ViewController:

links:{

    singletap: 'processLinkTap'

}

And finally, the processLinkTap function to determine which link was clicked

processLinkTap: function(component,touch, target,obj,event){ //probably not right names really, all we need is target though

    var target_class=target.classList[0]; 

    switch(target_class){

        case 'register':

            this.register();

            break;

        case 'forgotPassword':

            this.forgotPassword();

            break;

        default:

             console.log('Unable to determine which link was clicked')

             break;

    }

}

I hope this helps someone else in the future! 
Ryan