首页
前端开发
Javascript
Extjs主界面布局实现示例

Extjs主界面布局实现示例

24 次浏览 0 条评论
html
html

以下是 Extjs 中主界面简单布局的实现示例，适合 Extjs 新手学习。该布局仅包含一个简单的 HTML 页面，代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Extjs Layout</title>
    [removed][removed]
    <link href="https://cdn.sencha.com/ext/gpl/7.0.0/resources/css/ext-all.css" rel="stylesheet"/>
</head>
<body>
    [removed]
        Ext.onReady(function() {
            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [{
                    region: 'north',
                    xtype: 'panel',
                    height: 50,
                    title: 'Header'
                }, {
                    region: 'west',
                    xtype: 'panel',
                    width: 200,
                    title: 'Sidebar'
                }, {
                    region: 'center',
                    xtype: 'panel',
                    title: 'Main Content'
                }]
            });
        });
    [removed]
</body>
</html>

此代码通过 Extjs 创建了一个简单的主界面，包含三个区域：顶部、左侧和中央。适合初学者快速上手。

html 文件大小：908B