Question

请允许我通过承认我是Ext JS的完全新手来为我提出问题，所以请原谅我的无知。我熟悉HTML，CSS和JavaScript / JQuery，所以我在单个部分中获得了大部分语法，但是我在组合这些部分时遇到了麻烦。

我想首先构建一个基本的页面布局，其中包括一个跨越整个顶行的标题，一个占据下面剩余空间50％的左列和一个与左边相同尺寸的右列

最后，我想在面板中显示不同类型的内容，但是现在，我需要了解Ext JS布局和视口的基本语法和结构。就目前而言，我最终感到困惑。下面是我第一次尝试某些代码的示例，但它显然偏离了基础：

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: "Panel",
        align: "fit",
    },
    items: [
        {
            xtype: "panel",
            id: "topHeader",
            title: "Header",
            style: "height:200px;"
        },
        {
            xtype: "panel",
            id: "left",
            title: "Left",
            style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;"
        },
        {
            xtype: "panel",
            id: "right",
            title: "Right",
            style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;"
        }
    ]
});

Answer 1

为此，您需要使用“边框”布局。边框布局允许您在各个区域添加组件，如北，中，左，右，南。

你可以在这里找到一个有效的例子 - http://docs.sencha.com/ext-js/4-0/#!/example（布局部分 - 边框布局）

希望这有帮助。

Answer 2

我认为你的意思是这样的？

Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [
        {
            region: 'north',
            collapsible: false,
            border: false,
            split: true,
            height: 100,
            html: 'north'
        },
        {
            region: 'west',
            collapsible: false,
            border: false,
            split: true,
            width: '50%',
            html: 'west<br>I am floatable'
        },
        {
            region: 'center',
            border: false,
            html: ' I am center'
        }
    ]
});

试试并告诉我。

Ext JS 4布局和面板结构

2 个答案: