Question

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

理想情况下，我希望我的渲染标记符合以下内容：

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

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

1 个答案: