Question

I have a Kohana framework which is building ExtJS objects in one view, which in turn loads (via JQuery AJAX) other views inside of it with a this function:

function replaceContentOnClick(id, route) {
    $('body').delegate(('#' + id), 'click', function(){
        $.get(route, function(data) {
            $('#region_center .x-panel-body').html(data);
        });
    });
}

This is working fine but only when these child views are merely HTML/Javascript/JQuery, but in the child views I cannot get any ExtJS objects to display, even if I render them to DOM elements that exist and to which I can successfully append JQuery elements. It is as if the DOM doesn’t exist for ExtJS at that moment.

The main problem is: the JQuery code successfully fills the element:

<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>

but the ExtJS code fails to fill the same element (an there is no error reported in Firebug/Net panel):

<script type="text/javascript">
    var region_center = new Ext.Panel({
        id: 'region_center',
        region: 'center',
        renderTo: '#region_center .x-panel-body',
        margins:'10 10 10 10',
        padding:'10 10 10 10',
        autoScroll:true,
        html: 'this is from ExtJS...'
    });
</script>

What do I have to do so that ExtJS can access the DOM element as JQuery can?

Answer 1

These two bits of code are doing different things. This code:

<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>

…is accessing the DOM node at ‘#region_center .x-panel-body’ and injecting a new innerHTML value. This code:

<script type="text/javascript">
    var region_center = new Ext.Panel({
        id: 'region_center',
        region: 'center',
        renderTo: '#region_center .x-panel-body',
        margins:'10 10 10 10',
        padding:'10 10 10 10',
        autoScroll:true,
        html: 'this is from ExtJS...'
    });
</script>

…is attempting to render a complete Panel component into itself (i.e., the renderTo config is pointing at the panel with id ‘region_center’, which is the panel itself). This makes no sense and will not work. You can only render components to an existing DOM node — in this example, there is no existing DOM node with id ‘region_center’ because the panel is not yet (and cannot be) rendered.

The equivalent code to do exactly what you’re doing in jQuery would be this:

<script type="text/javascript">
Ext.get('#region_center').child('.x-panel-body').update('this is from Ext...');
</script>

Assuming all things are equal in the DOM when this is run, it should execute exactly like your jQuery code.

Now, assuming that your BorderLayout is properly rendered, and it in fact has a center region with id ‘region_center’, you should be able to add a new panel into it dynamically (make sure the new panel’s id is unique). Note that it would be preferable to go through the Component API (instead of the DOM API) to do this as layout will be managed for you in that case. E.g., you’d want to do something like:

// assuming myCenterPanel is a valid *component* ref (NOT a DOM element):
myCenterPanel.add(new Ext.Panel(...));
myCenterPanel.doLayout();

You’d also want to ensure that the center panel has an appropriate layout assigned (via the layout config). If you simply render the new panel directly to the underlying DOM node instead (as you’re trying to do above), it may work, but in the long term will probably cause you other issues (again, since you are bypassing Ext’s layout manager in that case).