Как создать макет Extjs на основе CSS для контейнеров?

Question

В принципе, то, что мне нужно, это контейнер, который просто делает его элементы как встроенные дивы - например:

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 и т. Д. - вы можете проверить разметку HTML в this Fiddle.

Как полностью избавиться от макета и просто визуализировать дочерние компоненты как есть? Единственный способ - предоставить пользовательский формат auto?

Answer 1

Решение состоит в том, чтобы использовать 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

Answer 2

Просто установите defaultType config как component.

DefaultType: String По умолчанию xtype дочерних компонентов для создания в этом контейнере, когда дочерний элемент указан в качестве исходного объекта конфигурации, а не в качестве реализованным компонента.

По умолчанию: "панель"

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