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

【问题标题】：How to make a CSS-based Extjs layout for containers?如何为容器制作基于 CSS 的 Extjs 布局？
【发布时间】：2015-02-13 08:28:51
【问题描述】：

基本上，我需要的是一个仅将其项目呈现为内联 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 布局添加了一些多余的 DOM 元素和 CSS 样式：容器元素上的 width、一些 div 包装器等 - 您可以在 this Fiddle 中查看 HTML 标记。

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

【问题讨论】：

标签： extjs extjs4.2

【解决方案1】：

只需将defaultType 配置设置为component。

defaultType : String 要创建的子组件的默认 xtype 当子项被指定为原始项时，在此 Container 中配置对象，而不是作为实例化的组件。

默认为：“面板”

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

【讨论】：

谢谢！差不多了，我已经尝试过了 - 但不幸的是布局仍然添加了一些额外的标记 - 例如检查这个小提琴中的 HTML：fiddle.sencha.com/#fiddle/i7q，有一些多余的包装器 - outerCt、innerCt 等。
使用viewport 代替container 将删除一个额外的div。

【解决方案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

【讨论】：