Question

基本上，我需要的是一个只将其项目呈现为内联div的容器 - 例如：

Ext.widget({
  xtype: 'container',
  cls: 'my-container',
  defaultType: 'component',
  items: [ { autoEl: { html: 'One' } },
           { autoEl: { html: 'Two' } },
           { autoEl: { html: 'Three' } } ]
})

应该会产生这样的结果：

<div class="my-container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

相反，即使Ext.layout.container.Auto布局也会在容器元素，一些div包装器等上添加一些冗余的DOM元素和CSS样式：width - 您可以在this Fiddle中检查HTML标记。< / p>

如何完全摆脱布局并按原样呈现子组件？唯一的方法是提供基于auto的自定义布局吗？

Answer 1

只需将defaultType配置设为component。

defaultType：String要创建的子组件的默认xtype   在子容器中将子项指定为原始项时   配置对象，而不是实例化的组件。

默认为：＆＃34; panel＆＃34;

Ext.widget({
    xtype: 'container',
    cls: 'my-container',
    defaultType: 'component',
    items: [{       
        autoEl: {             
                html: 'One',                
        }
    },{       
        autoEl: {             
                html: 'Two',                
        }
    },{       
        autoEl: {             
                html: 'Three',                
        }
    }]
});

Answer 2

解决方案是使用Ext.layout.container.Container，例如如下：

Ext.widget('container', {
    renderTo: Ext.getBody(),
    defaultType: 'component',
    layout: 'container',
    items: [{ html: 'One' },
            { html: 'Two' },
            { html: 'Three' }]
});

在这种情况下，只创建了一个容器div。

可在此处找到完整示例：https://fiddle.sencha.com/#fiddle/i7t

如何为容器制作基于CSS的Extjs布局？

2 个答案: