Extjs 3，Borderlayout沒有顯示北部

Question

在ExtJS 3中，我創建了一個如下所示的面板，我將其設置爲BorderLayout，但它不會顯示北部區域，儘管它會顯示中心部分。

請幫忙。

MyContainer = Ext.extend(Ext.Panel, { 
    initComponent: function() { 
     var period_start = new Ext.form.TextField({ 
      id: 'PERIOD_START', 
      fieldLabel: 'PERIOD START', 
      allowBlank: true,   
      width: 250 
     }); 
     var tmpPanel = new Ext.Panel(); 
     tmpPanel.add(period_start); 

     var period_start1 = new Ext.form.DateField({ 
      id: 'PERIOD_START1', 
      fieldLabel: 'PERIOD START', 
      allowBlank: true, 
      width: 250 
     }); 
     var tmpPanel1 = new Ext.Panel(); 
     tmpPanel1.add(period_start1);  

     var config = { 
      layout: 'border', 
      items: [ 
       { 
        region: 'north', 
        layout: 'fit', 
        minHeight: 150, 
        items: [tmpPanel] 
       }, 
       { 
        region: 'center', 
        layout: 'fit', 
        items: [tmpPanel1] 
       } 
      ] 
     }; 

     ..... 
    } 

Answer 1

你必須爲你的面板定義一箇中心區域。 這對我的作品非常好（3.4的ExtJS）：

     var config = { 
          layout: 'border', 
          region: 'center', 
          items: [ 
           { 
            region: 'north', 
            layout: 'fit', 
            height: 150, 
            minHeight: 150, 
            items: [tmpPanel] 
           }, 
           { 
            region: 'center', 
            layout: 'fit', 
            height: 300, 
            items: [tmpPanel1] 
           } 
          ] 
         }; 

，如果你需要，這是整個代碼：

<div id="frontendlayout"> 

     <script type="text/javascript"> 

       Ext.ns('Test'); 

       Test.MyContainer = Ext.extend(Ext.Panel, { 
        initComponent: function() { 
         var period_start = new Ext.form.TextField({ 
          id: 'PERIOD_START', 
          fieldLabel: 'PERIOD START', 
          allowBlank: true,   
          width: 250 
         }); 
         var tmpPanel = new Ext.Panel(); 
         tmpPanel.add(period_start); 

         var period_start1 = new Ext.form.DateField({ 
          id: 'PERIOD_START1', 
          fieldLabel: 'PERIOD START', 
          allowBlank: true, 
          width: 250 
         }); 
         var tmpPanel1 = new Ext.Panel(); 
         tmpPanel1.add(period_start1);  

         var config = { 
          layout: 'border', 
          region: 'center', 
          items: [ 
           { 
            region: 'north', 
            layout: 'fit', 
            height: 150, 
            minHeight: 150, 
            items: [tmpPanel] 
           }, 
           { 
            region: 'center', 
            layout: 'fit', 
            height: 300, 
            items: [tmpPanel1] 
           } 
          ] 
         }; 

         // config bestätigen 
         Ext.apply(this, Ext.apply(this.initialConfig, config)); 

         Test.MyContainer.superclass.initComponent.apply(this, arguments); 

        }, 


        onRender:function() { 
         Test.MyContainer.superclass.onRender.apply(this, arguments); 
        } 

       }); 

       Ext.reg('test.mycontainer', Test.MyContainer); 




       Ext.onReady(function(){ 

        var container = Ext.get("frontendlayout"); 
        new Ext.Viewport({ 
         renderTo: container, 
         layout: 'border', 
         items: [ 
          {xtype:'test.mycontainer'} 
         ] 
        }); 

       }); 



     </script> 

</div>