使用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就更好了。點個讚唄。

源碼下載