Question

So i have a web app I have been building, and I receive generated html from a server for a post, and place it within the body. My question is: is there a way to set a default onclick behavior for the tag within that message? I’d rather avoid parsing through the html and setting behavior for each tag. I may just be having a brain fart but felt its best just to ask. The goal behind this is to enable a card switch to full screen the image. I just cant figure out how to set the click behavior. Thanks in advance.

Answer 1

You can use an Ext JS component to do this. Any number of the Ext components will work this way but the base Component is all that is needed.

Once the server returns the html data, use the Component’s update method. Bind to the click event of the Component’s html element and then any html element that is clicked inside of the component will fire the click event. Within the function bound to the event, the event object will be available and will tell you what was clicked.

    Ext.onReady(function() {
        var htmlContainer,
            htmlFromServer;

        /*
         * you can create a component that will be 
         * be used to set the html into the page
         * while allowing it to be managed from Ext JS
         */
        htmlContainer = Ext.create('Ext.Component', {
            renderTo: Ext.getBody(),
            width: 400,
            height: 400
        });

        /*
         * this would be html from your service call
         * this is just a simplified example
         */
        htmlFromServer = '<div>Click this Div and this will be the event target. Click the image and that will be the value of the event target.</div><img src="http://www.sencha.com/img/apple-touch-icon.png" /><span>And this is some span-wrapped content.</span>';

        /* update the component with the html you want it to contain */
        htmlContainer.update(htmlFromServer);

        /* bind to the click event of the components html element */
        htmlContainer.getEl().on('click', function (event) { console.log('event object and html element that was clicked:', event, event.target)});

    });​