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)

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

更新：感谢@ 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文档中的摘录：

要使配置作为responsiveConfig参与，它必须具有＆＃34;设定器＆＃34;方法

容器没有setItems方法。因此，为了使其工作，您需要自己创建一个。它应该基本上清理所有现有项目并添加新项目。

ExtJS 6使用reponsive配置更改项目

1 个答案: