为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。

在增加这二个区域之前,我们先在MainModel.js中加入一些数据。

Ext.define('app.view.main.MainModel', {
extend : 'Ext.app.ViewModel', alias : 'viewmodel.main', data : {
name : 'app', // 系统信息
system : {
name : '工程项目合同及资金管理系统',
version : '5.2014.06.60',
iconUrl : ''
}, // 用户单位信息和用户信息
user : {
company : '武当太极公司',
department : '工程部',
name : '张三丰'
}, // 服务单位和服务人员信息
service : {
company : '无锡熙旺公司',
name : '蒋锋',
phonenumber : '1320528----',
qq : '78580822',
email : 'jfok1972@qq.com',
copyright : '熙旺公司'
}
}
// TODO - add data, formulas and/or methods to support your view
});

在上面的代码中,在data中增加了三个类型的数据,下面分别有些属性。这些值和属性以后可以从后台获得。比如说后台的系统名称改过了,前台刷新一下界面,就能展示新的system.name。这也符合我这个系统的开发宗旨,能够动态的信息尽量动态化,修改的时候只要在前台配置就可以,不要去修改后台的js或java代码。

下面在main的目录下加入二个文件,分别为Top.js和Bottom.js。目录结构如下:

Top.js定义了一个类,其类名为‘app.view.main.region.Top’,注意其类名的前面和其路径是一致的。extjs的类加载机制就是根据类名来找到具体的类文件在哪里的。

/**
* 系统主页的顶部区域,主要放置系统名称,菜单,和一些快捷按钮
*/
Ext.define('app.view.main.region.Top', { extend : 'Ext.toolbar.Toolbar', alias : 'widget.maintop', // 定义了这个组件的xtype类型为maintop items : [{
xtype : 'image',
bind : { // 数据绑定到MainModel中data的ystem.iconUrl
hidden : '{!system.iconUrl}', // 如果system.iconUrl未设置,则此image不显示
src : '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
}
}, {
xtype : 'label',
bind : {
text : '{system.name}' // text值绑定到system.name
},
style : 'font-size : 20px; color : blue;'
}, {
xtype : 'label',
bind : {
text : '{system.version}'
}
}, '->', {
text : '菜单',
menu : [{
text : '工程管理',
menu : [{
text : '工程项目'
}, {
text : '工程标段'
}]
}]
}, ' ', ' ', {
text : '主页'
}, {
text : '帮助'
}, {
text : '关于'
}, {
text : '注销'
}, '->', '->', {
text : '设置'
}] });

上面是Top.js类的定义,这是一个toolbar控件,里面加入了一些label和Button,用于显示系统名称以及用来实现一些操作。toolbar的items下默认的xtype是Button。源代码的注释里面也写入了如何绑定到MainModel 的数据的备注。

下面是Button.js的代码:

/**
* 系统主页的底部区域,主要放置用户单位信息,服务单位和服务人员信息
*/
Ext.define('app.view.main.region.Bottom', { extend : 'Ext.toolbar.Toolbar', alias : 'widget.mainbottom', items : [{
bind : {
text : '使用单位:{user.name}'
}
}, {
bind : {
text : '用户:{user.name}'
}
}, '->', {
bind : {
text : '服务单位:{service.company}'
}
}, {
bind : {
text : '服务人员:{service.name}'
}
}, {
bind : {
text : 'tel:{service.phonenumber}'
}
}, {
bind : {
hidden : '{!service.email}', // 绑定值前面加!表示取反,如果有email则不隐藏,如果email未设置,则隐藏
text : 'eMail:{service.email}'
}
}, {
bind : {
text : '©{service.copyright}'
}
}]
});

至此要加入的二个js文件已经就绪,现在我们要把他们放到Main的主页面之中。Main.js也需要修改一下,需要引入上面这二个类,以及把他们放到items下,并设置好位置。

/**
* This class is the main view for the application. It is specified in app.js as
* the "autoCreateViewport" property. That setting automatically applies the
* "viewport" plugin to promote that instance of this class to the body element.
*
* TODO - Replace this content of this view to suite the needs of your
* application.
*/
Ext.define('app.view.main.Main', {
extend : 'Ext.container.Container', xtype : 'app-main', uses : ['app.view.main.region.Top', 'app.view.main.region.Bottom'], controller : 'main',
// MVVM架构的控制器的名称,会在当前路径中根据‘Main’ + Controller 来确定文件名
// 这个我没找到其他任何可以自动加载MainController.js的依据,只能作上面的判断了
viewModel : {
type : 'main'
// MVVM架构的viewModel的类型,会在当前路径中根据‘Main’ + Model 来确定文件名
}, layout : {
type : 'border' // 系统的主页面的布局
}, items : [{
xtype : 'maintop',
region : 'north' // 把他放在最顶上
}, {
xtype : 'mainbottom',
region : 'south' // 把他放在最底下
}, {
xtype : 'panel',
bind : {
title : '{name}'
},
region : 'west', // 左边面板
html : '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
width : 250,
split : true,
tbar : [{
text : 'Button',
handler : 'onClickButton'
}]
}, {
region : 'center', // 中间面版
xtype : 'tabpanel',
items : [{
title : 'Tab 1',
html : '<h2>Content appropriate for the current navigation.</h2>'
}]
}]
});

extjs中有许多布局,其中的一个border比较常用,他可以将items分成上、下、左、右、和中间五个部分。经过上面几步以后,在浏览器刷新一下网页,会看到如下结果:

ExtJS5_主界面上加入顶部和底部区域的更多相关文章

  1. 4、手把手教你Extjs5(四)主界面上加入顶部和底部区域

    这一节为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. ...

  2. 跟我一起学extjs5(05--主界面上增加顶部和底部区域)

    跟我一起学extjs5(05--主界面上增加顶部和底部区域)         这一节为主界面加一个顶部区域和底部区域. 一个管理系统的界面能够粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状 ...

  3. (NO.00004)iOS实现打砖块游戏(二):实现游戏主界面动画

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 一个内容不错的游戏也要一个好的包装.玩家进入游戏时第一眼看到的是 ...

  4. C# 读取word2003 并且显示在界面上的方法

    1.新建一个windows窗体程序 2. 引入包WinWordControl.dll 3.添加引用 4.引入组件WinWordControl组件 5.主界面上加入按钮 ,opendialog, win ...

  5. Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager

    文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都 ...

  6. 国产网络损伤仪SandStorm -- 主界面简介

    国产网络损伤仪SandStorm可以模拟出带宽限制.时延.时延抖动.丢包.乱序.重复报文.误码.拥塞等网络状况,在实验室条件下准确可靠地测试出网络应用在真实网络环境中的性能,以帮助应用程序在上线部署前 ...

  7. 一起撸个简单粗暴的Tv应用主界面的网格布局控件(上)

    这一篇是真的隔了好久了~~,也终于可以喘口气来好好写博客了,这段时间实在是忙不过来了,迭代太紧.好,废话不多说,进入今天的主题. 效果 图一是Tv应用:当贝市场的主页 图二是咱自己撸的简单粗暴的 Tv ...

  8. 重复点击主界面(TabBar)按钮刷新界面--点击状态栏回到顶部

    1.监听按钮点击   2.判断是否是点击的同一个按钮(记录上次点击的按钮)   3.当重复点击相同按钮时,需要获取当前按钮对应控制器刷新界面      3.1 判断是否重复点击按钮,代码写在哪里?   ...

  9. WPF技术触屏上的应用系列(六): 视觉冲击、超炫系统主界面、系统入口效果实现

    原文:WPF技术触屏上的应用系列(六): 视觉冲击.超炫系统主界面.系统入口效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体 ...

随机推荐

  1. RabbitMQ-优先级(priority)队列/消息

    就像在日常生活中,事情有轻重缓急一样.我们对于需要处理的消息也有这样的需求. 例如重要的消息我要尽快的得到处理,当然我们可以给重要的消息开个“VIP通道”,但是VIP数量很多,并且VIP也分层次呢? ...

  2. python数据的存储和持久化操作

    Python的数据持久化操作主要是六类:普通文件.DBM文件.Pickled对象存储.shelve对象存储.对象数据库存储.关系数据库存储. 普通文件不解释了,DBM就是把字符串的键值对存储在文件里: ...

  3. 表格布局TableLayout

    简单实现计算机界面布局的案例: <?xml version="1.0" encoding="utf-8"?><TableLayout xmln ...

  4. 爱加密Android APk 原理解析

    转载请标明出处:http://blog.csdn.net/u011546655/article/details/45921025 爱加密Android APK加壳原理解析 一.什么是加壳? 加壳是在二 ...

  5. ios使用openUrl进行应用跳转

    1.拨打电话: [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"tel://68979"]]; ...

  6. 解决java.sql.SQLException: Parameter number X is not an OUT parameter--转

    最近独自一个人写项目,孤军奋战的程序猿可真伤不起! Java 调用MYSQL带输入输出参数存储过程时如题错误:java.sql.SQLException: Parameter number X is ...

  7. C++之智能指针

    导读 一直对智能指针有一种神秘的赶脚,虽然平时没怎么用上智能指针,也就看过STL中的其中一种智能指针auto_ptr,但是一直好奇智能指针的设计因此,今天看了一下<C++ Primer Plus ...

  8. HDU 5119 Happy Matt Friends(dp+位运算)

    题意:给定n个数,从中分别取出0个,1个,2个...n个,并把他们异或起来,求大于m个总的取法. 思路:dp,背包思想,考虑第i个数,取或者不取,dp[i][j]表示在第i个数时,异或值为j的所有取法 ...

  9. python之Lambda函数---笔记

    <Python3 程序开发指南> Lambda函数,是一个匿名函数,创建语法: lambda parameters:express parameters:可选,如果提供,通常是逗号分隔的变 ...

  10. 全文索引--自定义chinese_lexer词典

    全文索引它的数据字典本来就是自己加密过的数据格式,只有翻译过来了,才可以修改.这样修改后再生成它自己的数据格式文件,覆盖掉原来的,就会将新添加的关键词加入进去了!! 以下操作是在Oracle服务器安装 ...