cls extjs5_Extjs5项目进行中：布局(一)

以前没有接触过extjs，现在需要写一个项目，计划使用extjs来写。毕竟页面看起来比较清爽。自己看了2个星期的文档和例子，还是云里雾里。光java配置就弄了4-5天，最后不得已放弃。改为VS2013开发。

第一个成功运行的代码，当然不是Hello Word

Extjs5包里面引用的文件目录：其中icons是从朋友的项目里面复制过来的，ux是从build的子文件夹里面复制出来的。

项目目录：

html 页面代码引用：

Appliction.js 代码：

(function () {

Ext.onReady(function () {

//开启悬浮提示功能

Ext.QuickTips.init();

//开启动态加载

Ext.Loader.setConfig({

enabled: true

});

//创建应用程序的实例

Ext.application({

//设定命名空间

name: 'Lz',

//指定配置选项，设置相应的路径

appFolder: 'Application',

//加载控制器

controllers: ['Systemes.user1'],

//自动加载和实例化Viewport文件

autoCreateViewport: 'Lz.view.Systemes.users1'

});

});

})();

controller层user1.js代码：

Ext.define('Lz.controller.Systemes.user1', {

extend: 'Ext.app.Controller',

//将Viewport.js添加到控制器

views: ['Systemes.users1']

});

view层users1.js代码

Ext.Loader.setConfig({

enabled: true

});

Ext.Loader.setPath('Ext.ux', '/Extjs5/ux');

Ext.require([

'Ext.ux.statusbar.StatusBar'

]);

Ext.define('Lz.view.Systemes.users1',{

extend: 'Ext.panel.Panel',

xtype: 'LayoutDefault',

layout: 'border',

items:

[ {

region: 'north',

xtype: 'panel',

height: 80,

style: 'text-align:center;margin:-1px;',

html: '

上海利众综合管理系统

'

}, {

region: 'west',

width: 300,

title:'导航栏',

split: true,

collapsible: true

}, {

region: 'center',

xtype: 'tabpanel',

id: 'centerTabPanel',

activeTab: 0,

items: {

title: '我的工作',

icon:'../../../Extjs5/icons/house.png',

layout: 'fit' //自动填充页面

}

},

{

region: 'south',

style: 'margin:-2px',

items: [{

xtype: 'statusbar',

defaultIconCls: 'default-icon',

text: 'Ready',

iconCls: 'Readyicon',

items: [{}, '-', '综合管理系统']

}]

}]

});

最后效果图：