1

请允许我通过承认我是 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;"
        }
    ]
});
4

2 回答 2

1

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

您可以在这里获得一个工作示例 - http://docs.sencha.com/ext-js/4-0/#!/example（布局部分 - 边框布局）

希望这可以帮助。

于 2011-09-05T06:47:01.443 回答
0

我想你的意思是这样的？

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

试试看，让我知道。

于 2011-09-07T11:23:32.133 回答