顶部区域开发
一、创建顶部组件
1.在在app目录下创建main\core\index\component下创建indexTop.js
2.编写基础代码如下
Ext.define('appcenter.main.core.index.component.indexTop', {
extend : 'Ext.toolbar.Toolbar',alias : 'widget.indexTop', style : 'border-bottom:1px solid white;background-color:#CAE5E8;padding-right:30px;',border : '0 0 1 0',height : 42,initComponent : function() {
this.items = [];this.callParent(arguments);}
});
3.在index主视图引入，代码如下：
Ext.define('appcenter.main.core.index.view.index', {
extend: 'Ext.container.Viewport',xtype: 'app-main',id : 'appviewport',requires : [ 'appcenter.main.core.index.component.indexTop'],layout : {
type : 'border' },items : [ {
xtype : 'indexTop',region : 'north'}, {
region : 'west', html : 'menu',width : 230,collapsible : true,split : true,hidden : false }, {
region : 'center', html : 'center'}]
});
4.运行结果如下图：
二、增加顶部区域语言、消息、帮助、注销、个人信息等按钮。
1.修改indexTop下的items对象，代码如下：
Ext.define('appcenter.main.core.index.component.indexTop', {
extend : 'Ext.toolbar.Toolbar',alias : 'widget.indexTop', style : 'border-bottom:1px solid white;background-color:#CAE5E8;padding-right:30px;',border : '0 0 1 0',height : 42,initComponent : function() {
this.items = [{
xtype : 'label',text : '业务中台',style : 'font-size:20px;color:blank;'}, {
xtype : 'label',style : 'color:grey;',text : '(Ver:1.0.0)'}, '->', '->', {
text : '搜索',iconCls : 'fa fa-search',disabled : true}, {
text : '语言',iconCls : 'fa fa-sign-out',menu : [{
text : '中文',name : 'zh_CN',handler : 'onLangClick',iconCls : 'fa fa-info-circle'},{
text : '英文',name : 'en',handler : 'onLangClick',iconCls : 'fa fa-info-circle'}]}, {
text : '消息(0)',iconCls : 'fa fa-sign-out',handler : 'message'}, {
text : '帮助',iconCls : 'fa fa-sign-out',handler : 'help'}, {
text : '注销',iconCls : 'fa fa-sign-out',handler : 'logout'},{
text: "个人信息",menu : [{
text : '我的信息',handler : 'onUserInfoClick',iconCls : 'fa fa-info-circle'},{
text : '修改密码',handler : 'onChangePasswrodClick',iconCls : 'fa fa-info-circle'}]}];this.callParent(arguments);}
});
2.修改app.json下的extjs框架的引用文件，修改后内容如下：
"js": [{
"path": "${framework.dir}/build/ext-all.js"},{
"path": "app.js","bundle": true}],
3.由于修改了app.json文件，需要进行重新编译，在命令行工具下执行如下命令：
sencha app build development
如下图：
4.再次启动服务，刷新浏览器看到如下图：
5.到此顶部区域已经开发完成，界面美化后面会单独写。