Панель VBOX не отображает элементы

Question

Как явствует из названия, у меня есть панель, которая выполнит команду onRender, чтобы добавить элементы, такие как код ниже, treepanel. Я завернул treepanel в макет-рамку, а затем на панель vbox, чтобы поместить на запад. К сожалению, вся панель дерева не отображается. Я проверил HTML, и элементы там, но они вроде как отключены, потому что элементы имеют этот размытый шрифт в firebug. Почему это так? Пожалуйста помоги.

Ext.define('anr.panels.report', { 
    extend   : 'Ext.panel.Panel', 
    pageLimit  : 15, 
    title   : 'Report Generator', 
    layout   : 'border', 
    border   : false, 
    frame   : true, 

    initComponent: function() { 

     this.callParent(arguments); 
    }, 

    onRender:function() { 

     var me = this; 

     var store = Ext.create('Ext.data.TreeStore', { 
      root: { 
       expanded: true, 
       children: [ 
        { text: "detention", leaf: true }, 
        { text: "homework", expanded: true, children: [ 
         { text: "book report", leaf: true }, 
         { text: "algebra", leaf: true} 
        ] }, 
        { text: "buy lottery tickets", leaf: true } 
       ] 
      } 
     }); 

     var reportItem = { 
      xtype: 'panel', 
      layout: 'vbox', 
      id:'westpanel', 
      region:'west', 
      width: 350, 
      height: 300, 
      minSize: 350, 
      maxSize: 350, 
      border: false, 
      split: true, 
      margin: '1 0 5 1', 
      items: [ 
       { 
        border: false, 
        layout: 'border', 
        items:[ 
         { 
          xtype: 'treepanel', 
          height: 250, 
          width: 200, 
          store: store, 
          id: 'menu-panel', 
          frame: false, 
          rootVisible: false 
         } 
        ] 
       } 
      ] 
     }; 

     this.add(reportItem); 
     this.callParent(arguments); 
    } 
}); 

Answer 1

Я не совсем уверен, почему вы используете метод OnRender вместо размещения панелей в деталях, но есть слишком много ошибок в любом случае.

Для каждой пограничной панели требуется высота, ширина или гибкость, и требуется наличие одной панели с центральной областью.

Если вы измените код на это, он будет работать, но будьте осторожны со всеми этими вложенными панелями, кажется, что вы теряетесь.

КОД

var store = Ext.create('Ext.data.TreeStore', { 
    root: { 
     expanded: true, 
     children: [{ 
      text: "detention", leaf: true 
     },{ 
      text: "homework", expanded: true, 
      children: [{ 
       text: "book report", leaf: true 
      },{ 
       text: "algebra", leaf: true 
      }] 
     }, { 
      text: "buy lottery tickets", 
      leaf: true 
     }] 
    } 
}); 

Ext.define('anr.panels.report', { 
    extend : 'Ext.panel.Panel', 
    width: 800, 
    height: 400, 
    border: true, 
    title : 'Report Generator', 
    layout : 'border',    
    items: [{ 
     xtype: 'panel', 
     layout: 'vbox', 
     region:'west', 
     width: 350, 
     height: 300, 
     minSize: 350, 
     maxSize: 350, 
     border: false, 
     split: true, 
     margin: '1 0 5 1', 
     items: [{ 
      xtype: 'panel', 
      border: false, 
      layout: 'border', 
      flex: 1, 
      width: 350, 
      items:[{ 
       xtype: 'treepanel', 
       height: 250, 
       width: 200, 
       store: store, 
       id: 'menu-panel', 
       region: 'center', 
       frame: false, 
       rootVisible: false 
      }] 
     }] 
    },{ 
     xtype : 'panel', 
     region: 'center' 
    }] 

}); 

Ext.create('anr.panels.report',{ 
    renderTo: Ext.getBody() 
});