Extjs5项目进行中：布局(一)

　　以前没有接触过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: [{}, '-', '综合管理系统']
      }]
}]
});

 

最后效果图：