Ext JS 4布局和面板结构

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

为此，您需要使用'border'布局。边框布局允许您在不同区域添加组件，如北、中、左、右、南。

您可以在这里获得一个工作示例- http://docs.sencha.com/ext-js/4-0/#!/example (Layout Section - Border Layout)

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