Extjs 4.2.2创建包含Ext组件的动态无序列表 [英] Extjs 4.2.2 Create Dynamic Unordered List containing Ext Components

问题描述

我试图通过定义从 Ext.container.Container ul C>。

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>

我知道我在目前的实施中缺少一些我基于Alex Tokarev的答案： extjs 4如何包装儿童组件的容器在自定义html？

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

上面提供了相应的HTML，但是当尝试实现此操作时，我会不断收到以下错误：
未捕获TypeError：无法读取属性dom为null ，它引用了从 Ext.layout.Layout调用的以下函数。 moveItem ：

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;

哪个来自 renderItems 或 renderChildren 。

基本上我在这个机智结束了这件事情，并且会喜欢关于我的什么建议缺少。

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

如果正确的处理方式是使用自定义布局，我将非常感谢指出正确的方向。

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.

推荐答案

CD .. <这是一个正确的实现？我无法找到一些有关这种事情的体面文件。

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

这篇关于Extjs 4.2.2创建包含Ext组件的动态无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！