ExtJS6.2开发-首页顶部区域(二)

顶部区域开发
一、创建顶部组件
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.到此顶部区域已经开发完成，界面美化后面会单独写。