extjs-mvc结构实践(三):完善基本页面

zhkai 发布于2019-08-22 13:57 / 2380人阅读

摘要：上篇实现了基本的代码架构，控制器动态加载功能以及一个基础的页面布局，本节开始，将陆续完善这个页面。页面底部区域，主要显示版权信息等，也可以显示个时间啥的。。。头部和底部定义完毕后，需要在中引入对应位置。

上篇实现了基本的代码架构，控制器动态加载功能以及一个基础的页面布局，本节开始，将陆续完善这个页面。

目标

如前所述，我们的页面包含这么几个区域：

header: UI顶部区域，显示系统名称，LOGO，用户头像等其他操作。

footer: 页面底部区域，主要显示版权信息等，也可以显示个时间啥的。。。

nav tree:页面导航菜单，一般在页面左侧，一般也是一棵树！

content panel:中间内容区域，左侧导航点击之后，页面会被加载到这个区域，一般是个panel或者tab切换控件。

接下来逐个定义每个区域的内容。

定义header：app/luter/view/main/Header.js

Ext.define("luter.view.main.Header", {
    extend: "Ext.Container",//继承自容器类
    xtype: "appheader",
    cls: "app-header",//自定义样式，参见style.css
    height: 52,//高度
    layout: {//布局，水平box布局
        type: "hbox",
        align: "middle"
    },
    initComponent: function () {
        var me = this;
        me.items = [{//先放个LOGO
            xtype: "image",
            cls: "circle-pic",
            src: "app/resource/images/logo.png"
        }, {//再显示个标题
            xtype: "tbtext",
            flex: 4,
            style: {
                color: "#FFF",
                fontSize: "20px",
                padding: "0px 10px 0px  55px",
                fontWeight: 900
            },
            text: "这里是系统标题"
        }];
        me.callParent();
    }
});

其中，在app/resource/css/style.css中定义了几个样式:

 
.app-header {
    background-color: #2a3f5d;
    border-bottom: 2px solid #1d9ce5;

}
.app-header:hover {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 255, 0.8);
}
.circle-pic {
    width: 45px;
    height: 45px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.home-body {
    background-image: url(../images/square.gif);
}

定义footer:app/luter/view/main/Footer.js

Ext.define("luter.view.main.Footer", {
    extend: "Ext.toolbar.Toolbar",//继承自工具栏
    region: "south",
    xtype: "sysfooter",
    style: {//背景色黑色
        background: "#000"
    },
    frame: false,
    border: false,
    height: 30,
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                xtype: "tbtext",
                style: {
                    color: "#FFF",
                    fontSize: "14px",
                    textAlign: "right",
                    fontWeight: "bold"
                },
                flex: 3,
                id: "southText",
                text:  Ext.Date.format(new Date(), "Y") +" © " +"luter 版权所有"+":"+"v1.0"+""
            }, "->", Ext.create("luter.ux.TrayClock", {
                flex: 1,
                style: {
                    color: "#FFF",
                    padding: "0px 0px 0px  0px",
                    fontWeight: "bold",
                    textAlign: "right",
                    fontSize: "12px"
                }
            })]
        });
        me.callParent(arguments);
    }
});

在这里，用到了一个时钟插件：TrayClock，这是一个自定义的插件，统一放在目录：
app/luter/ux下面。

头部和底部定义完毕后，需要在viewport中引入对应位置。如下：

修改viewport:app/luter/view/main/Viewport.js

/**
 * 主视图占满全屏是个viewport
 */
Ext.define("luter.view.main.ViewPort", {
    extend: "Ext.Viewport",
    alias: "widget.viewport",//别名，与xtype对应
    layout: "border",//东南西北中布局，边界嘛
    stores: [],
    requires: ["luter.view.main.Header","luter.view.main.Footer"],//引入自定义的header和footer
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            items: [{
                region: "north",
                xtype: "appheader"//使用自定义的头部,xtype对应组件定义里的：xtype
            }, {
                region: "west",
                xtype: "panel",
                title: "西方",
                width: 200
            }, {
                region: "center",
                title: "中间",
                xtype: "panel"

            }, {
                region: "south",
                xtype: "sysfooter"//使用自定义的footer
            }]
        });
        me.callParent(arguments);
    }
});

至此，界面大致看起来应该像这样：

下一篇，我们继续完善这个界面，定义左侧导航、右侧内容展示区域，以及左侧与右侧操作联动等内容。

云服务器 GPU云服务器 xhtml基本结构基本数据结构 html基本结构框架基本的数据结构

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92678.html

extjs-mvc结构实践(三):完善基本页面2

摘要：结构实践三完善基本页面一般经典的后台管理系统，都是左侧菜单右侧结构布局。不免俗，咱也这么实现定义左侧导航菜单新建采用的组件构建一个导航菜单为了显示图标，引入字体图标，在引入引入定义导航菜单数据功能菜单展开节点。 extjs-mvc结构实践(三):完善基本页面2 一般经典的后台管理系统，都是左侧菜单右侧tabs结构布局。不免俗，咱也这么实现！定义左侧导航菜单新建：app/luter/...

X1nFLY 2019-08-22 13:58 评论0 收藏0
extjs-mvc结构实践(二):基本页面

摘要：接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。目标全屏显示左侧导航菜单，右侧标签页切换操作内容区域。一般模型与你后台返回的数据结构一一对应。给其他组件提供一致接口使用数据。整个构成一个所谓的。接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。书接上回，开始写UI效果。目标全屏显示、左侧导航菜单，右侧标签页切换操作内容区域。包含header和foo...

changfeng1050 2019-08-22 13:57 评论0 收藏0
extjs-mvc结构实践(一):搭建基础架构

摘要：今天开始，一点点记录一下使用搭建一个基础结构的过程。没办法，记性差这种结构的前端，主要是面向后台信息管理系统，可以最大限度的规范前端代码结构和数据结构。今天开始，一点点记录一下使用extjs6.2.0搭建一个基础MVC结构的过程。没办法，记性差:)这种结构的UI前端，主要是面向后台信息管理系统，可以最大限度的规范前端代码结构和数据结构。做网站或者手机端，这种方式全引入了extjs,...

kamushin233 2019-08-22 13:57 评论0 收藏0
extjs-mvc结构实践(四):导航菜单与控制器模块联动

摘要：根据模块创建模块失败。在中，我们配置了标明了这是一个控制器模块，点击后会去触发控制器加载动作。正常情况下同一个模块的只加载一次。前面几篇文档，我们基本实现了一个静态的extjs页面，本篇开始，实现左侧导航树与右侧内容的联动，也就是点击导航菜单，加载对应模块页面和业务逻辑，实现js文件的按需加载。业务需求是这样的：左侧的treelist，当点击某个节点的时候，系统根据tree数据里...

figofuture 2019-08-22 13:58 评论0 收藏0
extjs-mvc结构实践(五):实现用户管理的增删改查

摘要：而且上一篇文章中，也已经实现了一个基本的用户管理列表页面。接着上一篇，完善用户管理，实现增删改。为了用户体验，增加和修改用户信息的表单，都放在弹窗中进行。经过前面几篇文章的介绍，一个基本的MVC结构应该是具备了。而且上一篇文章中，也已经实现了一个基本的用户管理列表页面。接着上一篇，完善用户管理，实现增删改。为了用户体验，增加和修改用户信息的表单，都放在弹窗中进行。避免跳转页面。定义...

wendux 2019-08-22 13:58 评论0 收藏0