Javascript Extjs 4.2自定义容器布局

参考CD..对my的评论，我正在尝试为Extjs 4.2.2中的Ext容器创建自定义布局

其基本思想是拥有一个autoEl为'ul'的Ext容器，其子容器的autoEl为'li'

我之所以这样做而不是使用模板，是因为我需要能够将任何类型的其他Ext组件注入到“li”容器中

我能够获得我想要的标记：

<ul>
    <li>{{Whatever Ext component(s)}}</li>
</ul>

这些组件中的所有内容都很好。我遇到的问题是，当我在另一个布局中包含此组件或将其停靠在面板中时。此组件渲染良好，但其余组件不会渲染，并且不会显示任何错误。我很确定这是因为Ext没有抛出所有的布局错误，而且我的组件正在破坏渲染流

---

如果可能的话，我不想通过Ext设置此组件的大小。我正在尝试减轻JavaScript的一些布局负担。

你能不能创建一个sencha小提琴来处理这个问题，这样我们就可以试着处理它了？应该是准确的。我没有一直调试，但这肯定是“无布局”布局中的一个问题。我建议浏览所有版面代码，并更多地了解生命周期和事件。@Seram这肯定是问题所在，希望有人能更具体地了解我可能遗漏的内容，同时将Ext对版面的干扰降至最低。

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

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

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

    alias: 'layout.none',

    reserveScrollbar: false,
    managePadding: false,

    childEls: [],

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

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

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

    calculate: function(ownerContext) {
        // I believe I should be doing something 
        // in here for this to work properly
    }
});