Extjs 3, Borderlayout didn't show the North
===

In the ExtJS 3, I create a panel like below, I set it to BorderLayout, but it will NOT show the north region, although it will show the center part. 

Please help. 


    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]
                    }
                ]
            };
    
          .....
        }