Extjs4快速上手三——实现主界面

简介: 原文 http://www.cnblogs.com/good-temper/archive/2013/04/12/3015843.html 晕啊,今天不顺啊,白天毕设因为一个小问题耽误了很长时间,刚写了一半了突然浏览器又卡死,打开后又待重新写。

原文 http://www.cnblogs.com/good-temper/archive/2013/04/12/3015843.html

晕啊,今天不顺啊,白天毕设因为一个小问题耽误了很长时间,刚写了一半了突然浏览器又卡死,打开后又待重新写。。。。。。

1 创建项目

  这个不多说,新建个Web project都会吧。

2 导入Extjs文件

  在WebRoot下新建ext文件夹,将下载的ext包中如下文件拷入:

3 创建所需文件夹及文件

  按照如下结构创建文件夹及文件:

  绿色框住的为本次必须文件。

4 编写代码

  首先编写index.jsp,这是Extjs的入口页面(其实准确地说Extjs在运行过程中只存在这一个页面,其他的都是其用js生成的组件而已,其本质是div+css),在其内部引入Extjs库文件和样式文件:

复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ExtTest</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="ext/ext-all.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
  </head>

</html>
复制代码

  接着是app.js,这个之前已经说过,是Extjs的启动文件,其内容如下:

复制代码
Ext.Loader.setConfig({enabled: true});        //开启动态加载
Ext.application({
    name:'et',            //呵呵,就是ExtTest
    autoCreateViewport: true,
    appFolder:'app',    //指定根目录
    controllers:[        
        'Menu'      //在这里引入菜单,下次将详细介绍如何实现菜单加载
    ]
});
复制代码

  原来说过,如果不知名Viewport的话,ext将自动去加载view下的Viewport类,而该类应该继承Ext.Viewport,并且完成主界面的创建,其内容如下:

复制代码
Ext.define('et.view.Viewport',{ 
    extend: 'Ext.Viewport', 
    layout: 'fit', 
    hideBorders: true, 
    requires : [ 
        'et.view.Header', 
        'et.view.Menu', 
        'et.view.TabPanel', 
        'et.view.South' 
    ], 
    initComponent : function(){ 
        var me = this; 
        Ext.apply(me, {                         //这里讲items加入当前类(即Viewport),其实直接配置Viewport的items效果一样
            items: [{ 
                id:'desk', 
                layout: 'border',                 //这个是个重点,该布局实现“东西南北中”布局,具体细节可自己查找,网上一大堆
                items: [ 
                    Ext.create('et.view.Header'),         //创建上侧头
                    Ext.create('et.view.Menu'),         //创建左侧菜单
                    Ext.create('et.view.TabPanel'),     //创建中间panel选项卡
                    Ext.create('et.view.South')         //创建下侧栏
                ] 
            }] 
        }); 
        me.callParent(arguments); 
    } 
});
复制代码

  下边是各部分的js文件,就不一一介绍了,只要能弄明白调用以及每个内部items的嵌套关系,并且知道ext常见的布局效果,很容易就能看懂。

复制代码
Header.js
Ext.define('et.view.Header', { extend: 'Ext.panel.Panel' , border: false, layout:'anchor', region:'north', cls: 'docs-header', height:80, items: [{ id:'header-top', xtype:'box', cls:'header', border:false, anchor: 'none -25', html:'<span style="margin-left:10px;font-size:30;color:white;FONT-FAMILY:微软雅黑">ExtTest</span>' //html:'<h1>实训管理系统</h1>' },new Ext.Toolbar({ items:[ { //此处加载登录用户信息 xtype:'label', iconCls: 'grid-add', id:'head-lb-1', cls:'welcome', text:'欢迎登陆,XXX', margin:'0 20 0 20' }, { xtype:'label', id:'head-lb-3', margin:'0 20 0 50', cls:'welcome', text:'当前日期:2013-03-20' }, '->', { xtype:'button', text:'打开首页', iconCls: 'grid-add', //tooltip: '全屏显示主操作窗口', handler: function(){ } },'-', { xtype:'button', text:'注销', iconCls: 'grid-add', handler: function(){ } },'-' ]} )] });
复制代码
复制代码
Menu.js
Ext.define('et.view.Menu',{ extend: 'Ext.tree.Panel', alias: 'widget.sxptmenu', requires:['et.store.Menus'], initComponent : function(){ Ext.apply(this,{ id: 'menu-panel', title: '系统菜单', iconCls:'icon-menu', margins : '0 0 -1 1', region:'west', border : false, enableDD : false, split: true, width : 212, minSize : 130, maxSize : 300, rootVisible: false, containerScroll : true, collapsible : true, autoScroll: false, store:Ext.create('et.store.Menus') }); this.callParent(arguments); } });
复制代码
复制代码
TabPanel.js
Ext.define('et.view.TabPanel',{ 
    extend: 'Ext.tab.Panel', 
    initComponent : function(){ 
        Ext.apply(this,{ 
            id: 'content-panel', 
            region: 'center',  
            defaults: { 
               autoScroll:true, 
               bodyPadding: 10 
            }, 
            activeTab: 0, 
            border: false, 
            items: [{ 
              id: 'HomePage', 
              title: '首页', 
              iconCls:'home',
              layout: {
                type: 'hbox',
                pack: 'start',
                align: 'stretch'
              },
              items: [
                  {
                    xtype: 'panel',
                    flex: 5,
                    border: 0,
                    width: 604,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    header: false,
                    title: 'p1',
                    items: [
                        {
                            xtype: 'panel',
                            flex: 1,
                            layout:{
                                type: 'absolute'
                            },
                            title: '个人信息'
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            margin: '10 0 0 0 ',
                            layout: {
                                align: 'stretch',
                                type: 'hbox'
                            },
                            header: false,
                            border: 0,
                            title: '分组题目信息',
                            items:[
                                {
                                    xtype: 'panel',
                                    flex: 1,
                                    margin: '0 0 0 0 ',
                                    title: '分组题目信息'
                                },
                                {
                                    xtype: 'panel',
                                    flex: 1,
                                    margin: '0 0 0 10 ',
                                    title: '值日表'
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            margin: '10 0 0 0 ',

                            title: '任务提示'
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    flex: 2,
                    margin: '0 0 0 10',
                    header: false,
                    border: 0,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    title: '公告列表',
                    items:[
                        {
                            xtype: 'panel',
                            flex: 1,
                            margin: '0 0 0 0',
                            title: '最新公告'
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            margin: '10 0 0 0',
                            title: '资料下载'
                        }
                    ]
                }
              ]
            }] 
        }); 
        this.callParent(arguments); 
    } 
}); 
复制代码
复制代码
South.js
Ext.define('et.view.South',{ 
    extend: 'Ext.Toolbar', 
    initComponent : function(){ 
        Ext.apply(this,{ 
            id:"bottom", 
            //frame:true, 
            region:"south", 
            height:23, 
            items:['->',"版权所有     Copyright © 2013 计算机学院",'->'] 
        }); 
        this.callParent(arguments); 
    } 
}); 
复制代码

4 其他

  目前的实现非常简单,写的熟练的话半小时就能实现。在此已经实现了菜单,但是此次就不做详细介绍留待下介绍。最后有源码,可以自己研究下。这里 推荐一下Sencha Architect,可以通过它实现Extjs效果,然后通过生成的代码来学习。虽然这个收费,但有30天试用期(作为非专业前端,30天每天拿出一小时 学习Extjs,到时候学到的就远远够用了)。

  来张效果图:

  

  最后是源码:http://files.cnblogs.com/good-temper/ExtTest.rar

目录
相关文章
|
8月前
|
前端开发 JavaScript Java
【Layui】入门必看:登录注册界面搭建与功能开发解析
Layui是一款面向前端开发者的轻量级JavaScript库,旨在简化网页开发过程。它提供了丰富的基础UI组件和常用的工具函数,使开发者可以更快速地构建出优秀的网页界面。Layui具备以下特点和功能:简洁易用:Layui的设计理念是简洁而易用,它提供了直观的API和简单的配置,使开发者可以更快速地上手并快速构建界面。模块化加载:Layui采用模块化的加载方式,每个功能都是以独立的模块形式存在,开发者可以根据自己的需求按需加载所需的模块,避免了不必要的资源浪费。基础UI组件。
|
6月前
|
JSON 小程序 前端开发
五分钟上手Vant,快速搭建小程序界面样式
五分钟上手Vant,快速搭建小程序界面样式
117 0
|
6月前
|
机器学习/深度学习 开发者 iOS开发
快速上手·10分钟完成一个引导页界面
快速上手·10分钟完成一个引导页界面
108 0
|
9月前
|
开发工具
HBuilderX快速上手
HBuilderX快速上手
|
前端开发 JavaScript IDE
HBuilderX|前端编辑器
HBuilderX|前端编辑器
496 0
|
XML Android开发 数据格式
autojs简洁的登录界面
牙叔教程 简单易懂
395 0
|
JavaScript 前端开发 测试技术
Vue快速入门(附实战小项目:记事本、天气预报、音乐播放器)
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 ​ Vue通过MVVM模式,能够实现视图与模型的双向绑定。 ​ 简单来说,就是数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化.
327 0
Vue快速入门(附实战小项目:记事本、天气预报、音乐播放器)
|
数据可视化 C# 文件存储
VSTO | 零基础开发个人专属PPT导航插件教程
零基础开发个人专属PPT导航插件教程
621 0
|
Web App开发 前端开发 JavaScript
|
Android开发 数据格式 XML