CODEWITHSUNDEEP
javascriptjqueryextjs
Code Whisperer
Code Whisperer

Reputation: 1041

Load jQuery after ExtJS

Disclaimer: ExtJS - intermediate level; jQuery - beginner

I've looked for a solution for this but had not found anything yet.

I have both ExtJS and jQuery in one file and I want to be able to execute the jQuery right after the ExtJS is done building a page (is this even possible).

Example:

function renderPage(){
// ExtJS goes here
}

How do I call jQuery after renderPage() is completed?

I tried the following:

$(document).ready(function() {
    $("tr").css("background-color", "yellow");
});

$(document).ready(function(renderPage) {
    $("tr").css("background-color", "yellow");
});

function renderPage(){
// ExtJS goes here
// ...

   $("tr").css("background-color", "yellow");
}

but it doesn't work. I assume it is because the ExtJS is not done rendering the page when jQuery is getting called and it is not finding anything to select.

Additional information:

I know my jQuery works and is connected to the library because I was able to select HTML elements that are rendered before any script ExtJS or jQuery script is run and modify their style.

Thanks!

Upvotes: 0

Views: 1152

Answers (1)

pherris
pherris

Reputation: 17693

Ext components fire an afterrender event that you can hook into, but you have to be careful here because it can fire more than once if you render more than once (which is easy to do accidentally). This is an example of a simple app that fires afterrender once for a panel.

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var panel = Ext.create('Ext.Panel',{
            renderTo:Ext.getBody(),
            title:'myPanel',
            items: [
                Ext.create('Ext.Button', {
                    text: 'Click me!!!!',
                    handler: function() {
                        alert('You clicked the button!');
                    }
                }),
                {
                    xtype:'toolbar',
                    items: [{text:'Button 1'}, {text:'Button 2'}],
                    listeners: {
                        afterrender: function () {
                            Ext.Msg.alert('Fiddle', 'done with ext rendering, do jQuery stuff');
                        }
                    }
                }
            ]
        });
    }
});

sencha fiddle: https://fiddle.sencha.com/#fiddle/eqg

I would recommend not mixing these two libraries without a really good reason - Ext has virtually the same DOM helper functionality as jQuery - if you are just changing a class something like Ext.dom.Element.addCls might be more appropriate (http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element)

Upvotes: 1

Related Questions