Extjs 4.2.2 Create Dynamic Unordered List containing Ext Components

Question

I am attempting to create basic ul in Ext 4.2.2 by defining a class extended from Ext.container.Container.

Ideally I would like my rendered markup to be something along the lines of:

<ul>
    <li>
        {any Ext component here}
    </li>
    ...
</ul>

I know I'm missing something in my current implementation that I have based off of Alex Tokarev's answer to: extjs 4 how to wrap children components of container in custom html?

Ext.define('MyUnorderedList', {
    extend: 'Ext.container.Container',

    requires: [
        'MyListItem'
    ],

    alias: 'widget.ul',

    defaultType: 'li',

    autoEl: 'ul',

    renderTpl: [
        '{%this.renderChildren(out,values)%}',
        {
            renderChildren: function(out, renderData) {
                // We have to be careful here, as `this`
                // points to the renderTpl reference!
                var me = renderData.$comp.layout,
                    tree = me.getRenderTree();

                if (tree) {
                    Ext.DomHelper.generateMarkup(tree, out);
                }
            }
        }
    ]
});

Ext.define('MyListItem', {
    extend: 'Ext.container.Container',

    alias: 'widget.li',

    autoEl: 'li',

    renderTpl: [
        '{%this.renderChildren(out,values)%}',
        {
            renderChildren: function(out, renderData) {
                // We have to be careful here, as `this`
                // points to the renderTpl reference!
                var me = renderData.$comp.layout,
                    tree = me.getRenderTree();

                if (tree) {
                    Ext.DomHelper.generateMarkup(tree, out);
                }
            }
        }
    ]
});

The above does render the appropriate HTML, however I am continually getting the following error when attempting to implement this: Uncaught TypeError: Cannot read property 'dom' of null which references the following function that is called from Ext.layout.Layout.moveItem:

target = target.dom || target;

Which in turn comes from renderItems or renderChildren.

Basically I'm at my wit's end with this thing and would love some advice on what I'm missing.

[EDIT] If the correct way to handle this is with a custom layout I would greatly appreciate being pointed in the correct direction for that as well.

Answer 1

CD.. is this a proper implementation? I'm having trouble finding some decent documentation around this sort of thing.

Ext.define('MyApp.layout.None', {
    extend: 'Ext.layout.container.Container',

    alias: 'layout.nolayout',

    reserveScrollbar: false,
    managePadding: false,

    usesContainerHeight: false,
    usesContainerWidth: false,
    usesHeight: false,
    usesWidth: false,

    childEls: [],

    renderTpl: [
        '{%this.renderBody(out,values)%}'
    ],

    setupRenderTpl: function (renderTpl) {
        var me = this;

        renderTpl.renderContainer = me.doRenderContainer;
        renderTpl.renderItems = me.doRenderItems;
    },

    calculate: function(ownerContext) {
        //needs to be here as a placeholder
    }
});

Ext.define('MyApp.container.ListItem', {
    extend: 'Ext.container.Container',

    requires: [
        'MyApp.layout.None'
    ],

    layout: 'nolayout',

    alias: 'widget.li',

    autoEl: 'li'
});

Ext.define('MyApp.container.UnorderedList', {
    extend: 'Ext.container.Container',

    requires: [
        'MyApp.container.ListItem',
        'MyApp.layout.None'
    ],

    layout: 'nolayout',

    alias: 'widget.ul',

    defaultType: 'li',

    autoEl: 'ul'
});