Question

我在使用不同的面板高度来处理卡片布局中的内容时遇到问题。大多数内容都符合我为容器面板指定的高度，但有一个是其余部分的两倍，我不知道如何让该面板自然扩展。我意识到大小可以动态设置，但我认为有一种更简单的方法，因为面板最终成为dom中的div。这是需要调整大小的面板的代码，它是容器：

    var platform = viewport.platform =  new Ext.Panel ({
                cls: 'page',
        height: 600,
        items: [
        {
            html: "<h1>Platform Dev</h1><h2>Application Deployment I: iPhone and iPad</h2><p>The Application Deployment I: iPhone and iPad Course requires students to create and deploy an application to an iOS device by building upon concepts introduced in the Mobile Frameworks and Objective C courses. Upon successful completion of the OS Application course, students will produce an interactive application that can be deployed on Apple¹s iOS devices.</p><h2>Application Deployment II: Android</h2><p>The Application Deployment II: Android Course requires students to create and deploy an application to an Android powered device. Students build upon concepts introduced in the previous programming courses and work through the processes involved by researching and implementing project management techniques."
        },
        {
                    xtype    : 'carousel',
                    ui       : 'light',
                    direction: 'horizontal',
                    height: 150,
                    items: [
                    {
                            html: 'infographic 1',
                            cls : 'infographic1'
                        },
                        {
                            html: 'Card #2',
                            cls : 'infographic2'
                        },
                        {
                            html: 'Card #3',
                            cls : 'infographic3'
                        },
                        {
                            html: 'Card #3',
                            cls : 'infographic4'
                        }
                    ]
                }
        ],
        layout: {
                    type: "vbox", 
                    align: "stretch" 
                },
      //  scroll: 'vertical'
    });


    mainContent = viewport.mainContent = new Ext.Panel ({ 
        id: "main_content",
        layout: "card",
        height: 220,
        items: [introText, mobileDev, games, utilities, platform, newContact],
        cls: "content",
        cardSwitchAnimation : "slide",
    });

Answer 1

卡占用了所有可用的空间而不是“调整大小”我认为你的意思是你希望能够向下滚动以查看面板的其余部分，因为它太长了，是吗？如果是这样，请将scroll: 'vertical'添加到面板中..您可以将其添加到视口面板，让任何需要滚动的面板可滚动，或者您可以将其添加到显示为卡片的特定面板

new Ext.Panel ({
  scroll: 'vertical',
  ...
});

如何更改父容器的面板高度以匹配子内容？

1 个答案: