Extjs 4.2.2 创建包含 Ext 组件的动态无序列表

Question

我试图通过定义从Ext.container.Container 扩展的类来在Ext 4.2.2 中创建基本ul。

理想情况下，我希望我的渲染标记类似于：

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

我知道我在当前的实现中遗漏了一些基于 Alex Tokarev 的回答：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);
                }
            }
        }
    ]
});

上面确实呈现了适当的 HTML，但是在尝试实现它时我不断收到以下错误： Uncaught TypeError: Cannot read property 'dom' of null 引用了从Ext.layout.Layout.moveItem 调用的以下函数：

target = target.dom || target;

又来自renderItems 或renderChildren。

基本上，我对这件事束手无策，希望对我所缺少的东西提出一些建议。

[编辑] 如果处理此问题的正确方法是使用自定义布局，我将非常感谢您指出正确的方向。

Answer 1

CD.. 这是一个正确的实现吗？我很难找到关于这类事情的一些像样的文档。

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'
});