HtmlLayout - Use Ext components in plain HTML

[Condor]

HtmlLayout is a small extension of the standard ContainerLayout. It allows you to use components inside plain HTML while still maintaining the container structure. This has the advantage that the components will still be managed (e.g. destroying the container doesn't leak memory for the contained components).

The extension:

Ext.ns('Ext.ux.layout');
Ext.ux.layout.HtmlLayout = Ext.extend(Ext.layout.ContainerLayout, {
    renderItem: function(c, position, target){
        if(c.renderTarget){
            target = Ext.DomQuery.selectNode(c.renderTarget, Ext.getDom(target));
        }else if(c.applyTarget){
            var el = Ext.DomQuery.selectNode(c.applyTarget, Ext.getDom(target));;
            if(!c.rendered){
                c.el = el;
            }
            target = el.parentNode;
        }
        Ext.ux.layout.HtmlLayout.superclass.renderItem.call(this, c, undefined, target);
    }
});
Ext.Container.LAYOUTS['ux.html'] = Ext.ux.layout.HtmlLayout;

Example usage:

Ext.onReady(function() {
    var panel = new Ext.Panel({
        title: 'HtmlLayout test',
        autoHeight: true,
        layout: 'ux.html',
        html: '<table><tr><td>Please enter your name </td><td></td><td> and password </td><td><input type="password" /></td><td>.</td></tr></table>',
        defaultType: 'textfield',
        items: [{
            name: 'username',
            renderTarget: 'td:nth(2)'
        },{
            name: 'password',
            applyTarget: 'input[type=password]'
        }]
    }).render(Ext.getBody());
});

[steffenk]

nice one! It also shows how to integrate a custom layout.

Do you ever sleep?

[deepak]

Hmm, going to give it a spin

[aconran]

Nice layout condor

[mystix]

neat trick!

[Animal]

Yes! nice piece of lateral thinking!

[dbassett74]

Just what I was looking for, thanks!

[dbassett74]

One quick question. Instead of placing the html inline in the code with the "html" config, how can I reference an html table from some other file? The reason I ask is that it is much cleaner (especially on a complex table) to have this in a separate file. Thanks.

[xmttkx]

very nice!

[Condor]

@dbassett74: Instead of 'html' you could also use 'el', 'applyTo' or 'contentEl' (depending on what you are looking for exactly).