使用Intellij IDEA搭建Ext JsMVC web项目

时间 2019-12-12

标签使用 intellij idea 搭建 ext jsmvc web 项目栏目 Eclipse 繁體版

原文原文链接

因为本身从android开发转来学习web开发，最近在学习Jsp，以前接触过一点Extjs，因此用jsp来配合ext试试。javascript

Ext JS介绍

extjs是一个javascript框架，它的好处就是有它本身的界面和事件处理。咱们根据它的语法就能够实现咱们想要的功能，具体我就不介绍了，本身百度。css

Ext MVC结构介绍

无论任什么时候候，作一个大项目老是很烦的。由于大，因此开发的时候很难去组织，维护的时候就更别说了。随着业务增加确定更头疼了。Ext的MVC和你在其它地方了解到的因此MVC的功能同样，它的目的就是：
一、组织你的代码，让它易于维护
二、减小你的代码量html

Ext MVC结构组成

Model 就是字段和数据，相似于java当中的实体bean
View 看名字你就爱猜到了，对，没错，用来显示的组件。
Controllers Controllers通常就是作一些操做的地方。

MVC文件结构

先来看一下官方文档给出的一张图
java

好了，先有个大概的认识，接下来开始实际操做。android

本例演示用的开发工具是Intellij ideaweb

项目搭建

不管用什么工具，最开始的一步固然是建立一个web项目了浏览器

一、建立一个web项目

一、打开intellij建立一个新项目，以后勾选JavaEE下的Web application，选择本身的项目目录一个项目就建立完毕了。
服务器

二、建立完毕后，项目目录以下

src里放的就是java代码，web就是咱们的项目根目录。此时还须要配置你的Tomcat容器，指定你的项目web路径。具体以下markdown

三、点击IDE右上角的三角形editConfigurations，以后在左边点击+,寻找Tomcat Server,而后点击Local。这样一个Tomcat配置项就出现了
mvc

四、Tomcat配置项添加以后还须要指定Tomcat的目录，和web项目的目录，只须要选定你的Tomcat目录和你项目的web文件夹。

这样一个web项目就能够运行了，点击右上角run,在浏览器里输入localhost:8080能够访问就到下一步。

二、集成Ext Js

一、ext做为一个javascript框架，咱们只须要在页面简单的经过引入javascript的方式就可使用了。

在web文件夹新建一个js文件夹，把extjs的sdk放入，而后在首页引入
index.jsp代码以下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>extjsDemo</title>
    <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="js/extjs/ext-all.js"></script>
    <script type="text/javascript" src="js/extjs/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="app/appjs/app.js"></script>
  </head>
  <body>

  </body>
</html>

这样index.jsp就可以使用ext了，注意最后一行script饮用了app.js，这是ext应用的开始的地方。

在文章开始说到ext官网给出的MVC文件结构都是在app文件夹以后的，因此在web下新建一个app文件夹

三、使用Ext Js的MVC结构

在app.js里建立应用

没个ext js 4应用都以一个Application类开始。Application包含了应用文件夹的设置，以及一个启动函数，在Application启动以后会调用。因此咱们在app文件夹建立app.js，固然名字你能够随便取，咱们在里面写一个Application

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

上面的代码经过Ext.application建立了一个名叫AM 的Application类，而且指定了应用的文件夹为app，launch函数，在加载完毕以前会调用，这里能够看到建立了一个Viewport类，items就是它包含的内容，包含了一个panel，里面简单的设置了一段文字。

此时你再刷新index.jsp，效果是这样了,彻底没写什么样式，是否是很酷，并且你能够根据皮肤换效果

定义一个Controller

ext中的Controllers通常都和application一块儿使用，用来监听处理事件。下面代码建立了一个简单的控制器，记得建立在controller文件夹下。

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
    }
});

建立以后还要在application中引用

Ext.application({
    ...

    controllers: [
        'Users'
    ],

    ...
});

当在浏览器中访问index.jsp的时候，因为在applicaton在指定了controller,因此controller会自动加载，controller中的 init函数会在Application类的lauch函数以前调用。
打开浏览器打开console 控制台会发现输出了Initialized Users! This happens before the Application launch function is called

Controller的init函数一般会调用－control()来设置事件监听。
以下：

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

在init函数中调用了control，查找viewport类下的任何panel类， render表示显示事件，即当panel显示是输出The panel was rendered

修改成上面代码，再刷新，console控制台就打印了。
看到这里，基本的事件处理就演示了，在深刻了解以后就能够作更多事件了，哈哈。好了，下面来看view

定义一个Controller

ext含有不少view组件，下面是一个简单的例子，咱们在view文件夹下创建List.js表明用户列表，代码

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',//别名，在其余地方引用能够直接用userlist

    title: 'All Users',

    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        }; //作演示，这是指定了数据

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];//用来grid显示的列，会将store中name相同的数据显示

        this.callParent(arguments);
    }
});

注意这里define以后的名字，‘AM.view.user.List’,AM是咱们建立application时指定的 name，view对呀mvc的view,也就是view文件夹下user文件夹下的 List，其余全部文件都是按照这个模式的，就是mvc。

view建立好以后，须要在Controller里引用，因为用了weight.userlist来做为alias别名，因此在Controller中能够直接使用别名引用

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: ...

    onPanelRendered: ...
});

还记得以前在application中在launch以后直接显示了一个 panel吗，如今有了本身的view,咱们就不用panel了，直接将view添加到application

Ext.application({
    ...

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'
            }
        });
    }
});

这样在启动以后就会加载view了，从新刷新浏览器，效果如图：

简单的设置了数据源指定grid的columns就能够显示了是否是很酷，惋惜如今的数据不是真实数据。
以前在controller中监听了panel的render事件，不过因为是显示事件因此可能感受不爽。结下来咱们操做grid。

Controller中操做grid

经过双击在console控制台输出一条信息,看controller代码

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: function() {
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            }
        });
    },

    editUser: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
    }
});

只是简单的修改了control中的代码，监听userlist，itemdbclick表明的是双击事件，指向了editUser,监听的输入了Double clicked on ’ + record.get(‘name’)

再次刷新，双击

那咱们要是想直接编辑gird呢
编辑的时候确定须要一个form，来看代码

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias: 'widget.useredit',

    title: 'Edit User',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = [
            {
                xtype: 'form',// form表单
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

上面代码定义了一个用来显示的window，其中包含了一个form表单和两个按钮。
那么咱们要contoller里确定须要在双击的时候显示window，将原始数据填入 form。
好了，上代码

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List',
        'user.Edit'
    ],

    init: ...

    editUser: function(grid, record) {
        var view = Ext.widget('useredit');//找到window

        view.down('form').loadRecord(record);window下的 form，回填数据。
    }
});

建立Model和Store

以前咱们在建立view的时候直接将数据写在了view里，其实能够在 view中引用Store，store是封装数据的地方，能够从服务器加载也能够本地配置。

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    fields: ['name', 'email'],
    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
    //简单的指定了本地数据
});

须要在Controller中引用stores

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    ...
});

这样在view里咱们就能够直接使用store

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',

    // we no longer define the Users store in the `initComponent` method
    store: 'Users',

    initComponent: function() {

        this.columns = [
        ...
});

接下来到model

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

store和controller里须要引用model，

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',

    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
});

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    models: ['User'],
    ...
});

这样和以前的效果同样。
store可以从服务端加载数据用来显示在view中。因为篇幅有限就暂时不作介绍了。这里主要讲解Ext js的MVC。

其实就是以Ext.application为开始，指定了项目名以后,
命名就以项目名.view或controller或store或model.文件名。
中间你能够加根据功能区分的文件夹，这样就很好管理和维护了。
最后附上一下demo的文件结构

哈哈，extjs的mvc是否是很好理解了，如何在src也用上MVC就更好了。点个赞呗。

源码下载