ExtJS 6 使用响应配置更改项目

Question

是否可以将 items 更改为 responsiveConfig？

我试过这样做：

{
    xtype: 'container',
    layout: {
        type: 'hbox',
        pack: 'center'
    },
    defaults: {
        xtype: 'box'
    },
    plugins: 'responsive',
    // Simple items configuration is for example only
    responsiveConfig: {
        'width <= 768': {
            items: [
                {
                    html: 'Less than 768'
                }
            ]
        },
        'width > 768': {
            items: [
                {
                    html: 'More than 768'
                }
            ]
        }
    }
}

但是当屏幕尺寸改变时出现以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined
    at constructor.init (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:233268)
    at constructor.invalidate (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:235386)
    at constructor.invalidate (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:235435)
    at constructor.invalidate (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:235435)
    at constructor.invalidate (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:235435)
    at constructor.flushInvalidates (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:235261)
    at constructor.run (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:235764)
    at Function.flushLayouts (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:64540)
    at Function.resumeLayouts (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:64555)
    at Object.Ext.resumeLayouts (:1841/ext/build/ext-all-debug.js?_dc=1502287779074:70319)

我试图创建 fiddle 来说明这个问题，但似乎响应式配置在 fiddle 中无法正常工作。

更新：感谢@scebotari66，通过将 setItems 方法添加到 Ext.container.Container 来解决：

Ext.define('MyApp.container.Container', {
    override: 'Ext.container.Container',

    setItems: function (component)
    {
        if (this.hasOwnProperty('items')) {
            this.removeAll();
            this.add(component);
        }
        // If container is not initialized yet
        else {
            this.items = Ext.isArray(component) ? component : [component];
        }
    }
});

Answer 1

请注意 responsiveConfig 文档中的这段摘录：

For a config to participate as a responsiveConfig it must have a "setter" method.

容器没有 setItems 方法。所以为了让它起作用，你需要自己创建一个。它应该基本上清理所有现有项目并添加新项目。

ExtJS 6 使用响应配置更改项目

ExtJS 6 Change items using reponsive config

extjs

extjs6