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

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

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

　　

　　项目目录：

　　

　　html 页面代码引用：　　　　

　　　　<link href="Extjs5/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" rel="stylesheet" />

　　　　<script src="Extjs5/build/bootstrap.js"></script>

　　　　<script src="Appliction.js"></script>

　　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: '<div style="font-weight:bold;font-size:24px">上海利众综合管理系统</div>'

}, {

      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: [{}, '-', '综合管理系统']

      }]

}]

});

 

最后效果图：