1

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

      .....
    }
4

1 回答 1

1

您必须为面板定义一个中心区域。这对我很有效（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]
                                }
                            ]
                        };

如果需要，这是整个代码：

 <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>
于 2012-07-19T13:49:19.063 回答