EXTJ 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如何包装CANCALY的孩子组件在自定义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'
});