Детский элемент extjs, не заполняющий родительский контейнер

Question

Моя проблема в том, что даже если бы я использовал «layout: 'fit» во всех моих дочерних элементах внутри рамки, они просто сжимаются в маленькую ячейку, а не заполняют родителя, поскольку описанный в макете соответствия.

Я хочу, чтобы EDS.view.selector.Container заполнил раздел «Навигация» моего макета границы.

(Code excerpt) 

Ext.define('EDS.view.selector.Container', { 
    extend: 'Ext.panel.Panel', 
    alias : 'widget.selectorcontainer', 

    layout: 'fit', 
    initComponent: function(){ 
     this.items = [ 
       { 
        xtype: 'tabpanel', 
        defaults: { 
         bodyPadding: 10 
        }, 
        layout: 'fit', 
        items:[ 
         { 
          title: 'Organization', 
          id: 'selector-organization', 
          tag: 'div',        
          html: 'div here', 
          height: '100%', 
         }     
        ] 
       } 
     ], 
     this.callParent(); 
    }, 
}); 



(Controller) 
init: function(){ 
    console.log('controller.init()'); 

    new Ext.Viewport({ 
     title: 'Data Analysis', 
     layout: 'border', 
     defaults: { 
       collapsible: true, 
       split: true, 
       bodyStyle: 'padding: 15px', 
     }, 
     items: [{ 
      title: 'Navigation', 
      region:'west', 
      margins: '5 0 0 0', 
      cmargins: '5 5 0 0', 
      width: 600, 
      minSize: 100, 
      maxSize: 250, 
       items: [ 
        { 
        id: 'selector-container', 
         xtype: 'selectorcontainer', 
         layout: 'fit', 
        } 
      ] 
     },{ 
      title: 'Main Content', 
      collapsible: false, 
      region:'center', 
      margins: '5 0 0 0' 
     }] 
    }); 
} 

Answer 1

Вы не создали макет для обертки контейнеров в макете приграничном:

items: [{ 
    title: 'Navigation', 
    region:'west', 
    layout: 'fit', 
    ... 
    items: [ 

      ] 
    },{ 
    title: 'Main Content', 
    collapsible: false, 
    region:'center', 
    layout: 'fit', 
    ... 
}] 

Помните: В ExtJS любой обычный объект JS, который входит в items свойство контейнера будет преобразован в некоторый тип компонента Ext с xtype, определяемым значением defaultType свойства этого контейнера. В большинстве случаев это будет panel.