ExtJS6.2开发-首页开发(一)

ExtJs6.2首页开发
一、创建主页目录
1)在app目录下创建main\core\index目录
2)在index目录下分别创建view、viewmodel、controller、component目录
3)删除app目录下原有的view目录
建立好的文件目录如下图：

二、创建主页文件
１.view\index.js文件代码如下：

Ext.define(‘appcenter.main.core.index.view.index’, {
　extend: ‘Ext.container.Viewport’,
　xtype: ‘app-main’,
　id : ‘appviewport’,
　 layout : {
　　type : ‘border’
　},
　items : [ {
　　html : ‘top’,
　　region : ‘north’
　}, {
　　region : ‘west’,
　　html : ‘menu’,
　　width : 230,
　　collapsible : true,
　　split : true,
　　hidden : false
　}, {
　　region : ‘center’,
　　html : ‘center’
　}]
});

２.修改app.js文件代码如下：

Ext.application({
　name: ‘appcenter’,
　extend: ‘appcenter.Application’,
　requires: [
　　 ‘appcenter.main.core.index.view.index’
　],
　mainView: ‘appcenter.main.core.index.view.index’
});

３.在终端中输入命令如下：

sencha web start

4.在浏览器中输入：

http://localhost:1841

看到如下：