如何在 ExtJS 4 中实现流布局? [英] How to implement a flowlayout in ExtJS 4?

问题描述

我想使用一种布局，其中组件像 hbox 一样水平添加，但在添加时，如果组件超出容器的边界，则将其移动到下一行.这类似于 FlowLayout 在 Swing 和 flex 中的作用.

I want to use a layout where components are added horizontally like hbox but where upon adding if the component exceed the bounds of the container it is moved to the next line. This is similar to what FlowLayout is in swing and flex.

我在 ExtJS 4.0 中找不到任何可以实现这一点的布局.

I couldn't find any layout in ExtJS 4.0 that would achieve this.

所以我想知道我将如何去做这件事.我对这个框架还很陌生，所以任何指针都会很棒.

So I am wondering how I would go about doing this. I am fairly new to the framework so any pointers would be great.

推荐答案

您是否尝试过使用 ColumnLayout?如果不指定columnWidth"属性，则子元素从左到右 css 浮动:

Have you tried using ColumnLayout? If you don't specify the "columnWidth" properties, the child elements are css-floated from left to right:

 Ext.create('Ext.Panel', {
        width: 500,
        height: 280,
        title: "ColumnLayout Panel",
        layout: 'column',
        renderTo: document.body,
        items: [{
            xtype: 'panel',
            title: 'First Inner Panel',
            width:  250,
            height: 90
        },{
            xtype: 'panel',
            title: 'Second Inner Panel',
            width: 200,
            height: 90
        }, {
            xtype: 'panel',
            title: 'Third Inner Panel',
            width: 150,
            height: 90
        }]
  });

这篇关于如何在 ExtJS 4 中实现流布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！