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

Question

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

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 布局也会添加一些冗余的 DOM 元素和 CSS 样式：容器元素上的 width，一些 div 包装器等- 您可以在 this Fiddle.

中检查 HTML 标记

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

Answer 1

只需将 defaultType 配置设置为 component。

defaultType : String The default xtype of child Components to create in this Container when a child item is specified as a raw configuration object, rather than as an instantiated Component.

Defaults to: "panel"

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 布局？

How to make a CSS-based Extjs layout for containers?

extjs

extjs4.2