Extjs 3, Borderlayout didn't show the North

Question

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

      .....
    }

Answer 1

you have to define a center region for your panel. this works for me very well (ExtJS 3.4):

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

if you need, this is the whole code:

 <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>