自從使用ext后赃阀，就感覺離不開ext了，最初使用時候擎颖，感覺完全不順榛斯，不過寫啥都感覺不舒服，感覺為什么要用這么重搂捧，這么不方便的框架驮俗，太死板，不靈活允跑。但是我錯了王凑，隨著慢慢使用熟了，對這個框架的功能更加了解了聋丝，就感覺確實是一個好庫索烹，不需要寫html，不需要寫css弱睦！直接編寫js即可百姓，而且都是面向?qū)ο螅慷际且粋€一個對象况木，而且自帶的各種組件垒拢，需要什么有什么旬迹，如果覺得不好還可以直接改組件功能和樣子。以前一個大靜態(tài)頁面切兩天求类，用ext一會功夫就完事了奔垦。本來打算自己寫的，但是還好搜索看了一下尸疆，就找到這篇了椿猎！非常詳細(xì)的說明，從構(gòu)建項目仓技，到修改代碼鸵贬，都有。脖捻。 就感覺自己寫了估計也沒有這么詳細(xì)，還是轉(zhuǎn)載復(fù)制吧兆衅。以后留著自己看地沮。勿怪。 轉(zhuǎn)至-寫意悠悠羡亩。摩疑。。畏铆。雷袋。。辞居。楷怒。。瓦灶。

Sencha提供了免費的Cmd工具鸠删，可以用來創(chuàng)建Ext JS項目并提供了一些便利的功能。Sencha也在官方文檔中提供了一個示例來演示如何創(chuàng)建一個Sample Login App贼陶。本文就介紹一下這個官網(wǎng)示例刃泡。

準(zhǔn)備工作

下載Sencha Ext JS的SDK，本文中使用的是開源的GPL的6.0.1版本
??下載Sencha Cmd碉怔，這個是免費的烘贴，本文中使用的是Windows 64-bit帶JRE的6.1.2版本

安裝

SDK解壓縮放到一個指定目錄，如:D:\ext-6.0.1
??Cmd安裝到默認(rèn)位置即可

本文創(chuàng)建的示例項目的路徑為D:\TutorialApp

那我們開始創(chuàng)建程序吧撮胧。
打開cmd命令行桨踪，使用sencha [-sdk SDK所在目錄] generate app [-classic|-modern] AppName App目錄命令來創(chuàng)建項目。

sencha -sdk D:\ext-6.0.1 generate app -classic TutorialApp D:\TutorialApp

1. -sdk D:\ext-6.0.1指明Ext JS SDK的所在目錄趴樱，如果運行命令行的所在目錄就是SDK目錄(D:\ext-6.0.1)馒闷，則可以省略
2. -classic|-modern可以省略酪捡，Ext JS的6.0版本其中一個主要的更新就是把Ext JS和Touch合并，在創(chuàng)建時可以選擇哪一種類型纳账，classic對應(yīng)Ext JS逛薇，而modern對應(yīng)Touch。如果省略疏虫，則創(chuàng)建所謂的universal類型永罚，即classic和modern并存。在本文中演示的是桌面端程序卧秘，所以我們選擇classic呢袱。
3. TutorialApp是項目名稱，也將作為該項目的namespace翅敌。
4. D:\TutorialApp是項目名錄

從命令進(jìn)入項目目錄D:\TutorialApp羞福，并輸入命令sencha app watch

cd D:\TutorialApp
sencha app watch

sencha app watch會啟動內(nèi)置的jetty服務(wù)器，可以使我們方便地通過http://localhost:1841/ 來查看頁面蚯涮。而且watch會監(jiān)聽項目目錄中的文件變化而自動build治专。
這時候打開http://localhost:1841/ 會看到Cmd自動創(chuàng)建的默認(rèn)首頁長這樣子。6.x版新增加的Triton主題和以前的主題有明顯的不同遭顶。

image.png

打開D:\TutorialApp目錄张峰，看下Cmd自動創(chuàng)建的目錄和文件：

.sencha/                        # 里面存放的大多都是配置相關(guān)的文件，一般不需要修改
ext/                            # Ext JS SDK的一份copy棒旗，所以才會這么大
index.html                      # 首頁
app.json                        # 項目主配置文件
app.js                          # 項目主程序
app/                            # 項目源碼目錄
    model/                      # Model目錄
    store/                      # Store目錄
    view/                       # View目錄
        main/                   # 首頁的目錄
            Main.js             # 首頁的View
            MainModel.js        # 首頁的ViewModel
            MainController.js   # 首頁的ViewController
    Application.js              # Ext.Application
packages/                       # Sencha Cmd packages
workspace.json                  # Workspace的描述文件
build/                          # 保存項目最終的build結(jié)果

還有一些目錄和文件沒有列舉出來喘批，那些目錄和文件一般都不需要我們?nèi)バ薷模捌诳梢院雎浴?br> 對我們來說铣揉，最重要的目錄就是app目錄饶深，這是項目的源碼目錄，我們寫的代碼都保存在里面老速。
app目錄下包含三個子目錄：
model: 保存Model對象粥喜，Cmd也提供了命令來創(chuàng)建Ext JS中的Model對象。比如User橘券，它包含id额湘，name，email三個字段旁舰。在命令行中運行：

cd D:\TutorialApp
sencha generate model user.User id:int,name,email

運行Cmd的命令需要先進(jìn)入項目目錄锋华，運行之后會看到model目錄里多了一個子目錄user，user目錄里有新建的User.js文件箭窜。

app/                          # 項目源碼目錄
  model/                      # Model目錄
      user/                   # user子目錄
          User.js             # User.js定義了User的字段

關(guān)于Ext JS的Model的具體用法毯焕，請參照官方API文檔：Ext.data.Model

store: Ext JS的Store可以理解為Model對應(yīng)的數(shù)據(jù)集合，在Store中可以定義怎么去讀取Model。具體用法纳猫，請參照官方API文檔：Ext.data.Store
view：所有和UI相關(guān)的代碼都保存在這里婆咸，比如窗口，表格芜辕，圖表等尚骄。可以為每個UI創(chuàng)建對應(yīng)的ViewController(Ext.app.ViewController)和ViewModel(Ext.app.ViewModel)侵续。

由于這個示例程序要演示的是創(chuàng)建一個登錄窗口倔丈，只有等登錄完成之后才會顯示首頁。所以首先要打開項目根目錄下的app.js状蜗，將和TutorialApp.view.main.Main相關(guān)的代碼刪除需五。修改后的app.js長這樣：

Ext.application({
    name: 'TutorialApp',
    extend: 'TutorialApp.Application
});

如果你仍然保持sencha app watch的運行狀態(tài)，則Cmd會檢測到你對app.js的修改轧坎。此時訪問首頁宏邮，就會看到一片空白。

接著來創(chuàng)建用戶的登錄窗口缸血，它是長這樣子的：

image.png

可以在app\view目錄里手動創(chuàng)建login子目錄蜀铲，并在login目錄下手動創(chuàng)建Login.js和LoginController.js。也可以在命令行中運行以下命令來讓Cmd自動創(chuàng)建：

cd D:\TutorialApp
sencha generate view -base Ext.window.Window login.Login

-base參數(shù)用來設(shè)置創(chuàng)建的UI是哪種類型属百，由于我們要創(chuàng)建的是窗口，所以繼承的是Ext.window.Window变姨。

Login.js是登錄窗口的代碼族扰，最后長這樣：

Ext.define('TutorialApp.view.login.Login', {
    extend: 'Ext.window.Window',
    xtype: 'login',

    //Login窗口會包含一個表單(Ext.form.Panel)
    //LoginController里定義了Login窗口會使用到的方法onLoginClick
    //requires可以確保這2個類會在Login初始化完成之前先被初始化
    requires: [
        'TutorialApp.view.login.LoginController',
        'Ext.form.Panel'
    ],
    //綁定controller，綁定時使用的是別名
    controller: 'login',
    //padding: 10px
    bodyPadding: 10,
    //窗口的標(biāo)題欄文字
    title: 'Login Window',
    //隱藏窗口右上角的關(guān)閉按鈕"x"
    closable: false,
    //Window的autoShow默認(rèn)為false
    //Window可以用show()和hide()來手動顯示和隱藏
    //把autoShow設(shè)為true, 則在Window創(chuàng)建之后會自動顯示
    autoShow: true,
    //把窗口里的UI組件放在items里
    items: {
        //表單
        xtype: 'form',
        reference: 'form',
        //把表單里的UI組件放在表單的items里
        items: [{
            //供用戶輸入用戶名的文本框
            xtype: 'textfield',
            name: 'username',
            //fieldLabel是顯示在文本框前的標(biāo)簽文字
            fieldLabel: 'Username',
            //打開非空校驗定欧，即要求輸入的用戶名不能為空
            allowBlank: false
        }, {
            //供用戶輸入密碼的文本框
            xtype: 'textfield',
            name: 'password',
            //inputType設(shè)為password渔呵，則用戶輸入的內(nèi)容會以*回顯在屏幕上
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            //顯示在密碼輸入框下方的文字
            xtype: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        //表單的按鈕
        buttons: [{
            //按鈕上的顯示文字
            text: 'Login',
            //設(shè)為true，則Login按鈕在表單通過校驗前是不能被點擊的
            formBind: true,
            listeners: {
                //當(dāng)按鈕被點擊時
                click: 'onLoginClick'
            }
        }]
    }
});

LoginController.js是Login的Controller砍鸠，最后長這樣：

Ext.define('TutorialApp.view.login.LoginController', {
    extend: 'Ext.app.ViewController',
    //定義別名為login
    alias: 'controller.login',
    //當(dāng)Login按鈕被點擊時
    onLoginClick: function() {

        //這本例中使用localStorage來保存用戶的登錄狀態(tài)
        //這里省略了用戶信息的遠(yuǎn)程校驗過程
        //只要用戶輸入用戶名和密碼扩氢，點擊Login按鈕即認(rèn)為用戶成功登陸
        localStorage.setItem("TutorialLoggedIn", true);
        //getView()返回的是controller綁定的view, 在本例中就是Login窗口
        //登錄后不再需要Login窗口，所以調(diào)用destroy()來刪除
        this.getView().destroy();
        //關(guān)閉Login窗口后爷辱，需要顯示首頁
        //使用Ext.create()來創(chuàng)建view\main\Main.js
        Ext.create({
            xtype: 'app-main'
        });

    }
});

登錄窗口寫好了录豺，但還不會顯示，需要修改app\Application.js饭弓。
Application.js最后長這樣：

Ext.define('TutorialApp.Application', {
    extend: 'Ext.app.Application',

    name: 'TutorialApp',

    stores: [
        // TODO: add global / shared stores here
    ],

    views: [
        'TutorialApp.view.login.Login',
        'TutorialApp.view.main.Main'
    ],

    launch: function () {
        var loggedIn;
        //從localStorage讀取用戶登錄狀態(tài)
        loggedIn = localStorage.getItem("TutorialLoggedIn");
        //如果用戶已登錄双饥，則顯示首頁，否則顯示Login窗口
        Ext.create({
            xtype: loggedIn ? 'app-main' : 'login'
        });
    },

    onAppUpdate: function () {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

最后在首頁上加上一個Logout按鈕弟断，修改后的app\main\Main.js長這樣：

Ext.define('TutorialApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',

        'TutorialApp.view.main.MainController',
        'TutorialApp.view.main.MainModel',
        'TutorialApp.view.main.List'
    ],

    controller: 'main',
    viewModel: 'main',
    plugins: 'viewport',

    ui: 'navigation',

    tabBarHeaderPosition: 1,
    titleRotation: 0,
    tabRotation: 0,

    header: {
        layout: {
            align: 'stretchmax'
        },
        title: {
            bind: {
                text: '{name}'
            },
            flex: 0
        },
        iconCls: 'fa-th-list',
        //添加Logout按鈕
        items: [{
            xtype: 'button',
            text: 'Logout',
            margin: '10 0',
            handler: 'onClickButton'
        }]
    },

    tabBar: {
        flex: 1,
        layout: {
            align: 'stretch',
            overflowHandler: 'none'
        }
    },

    responsiveConfig: {
        tall: {
            headerPosition: 'top'
        },
        wide: {
            headerPosition: 'left'
        }
    },

    defaults: {
        bodyPadding: 20,
        tabConfig: {
            plugins: 'responsive',
            responsiveConfig: {
                wide: {
                    iconAlign: 'left',
                    textAlign: 'left'
                },
                tall: {
                    iconAlign: 'top',
                    textAlign: 'center',
                    width: 120
                }
            }
        }
    },

    items: [{
        title: 'Home',
        iconCls: 'fa-home',
        items: [{
            xtype: 'mainlist'
        }]
    }, {
        title: 'Users',
        iconCls: 'fa-user',
        bind: {
            html: '{loremIpsum}'
        }
    }, {
        title: 'Groups',
        iconCls: 'fa-users',
        bind: {
            html: '{loremIpsum}'
        }
    }, {
        title: 'Settings',
        iconCls: 'fa-cog',
        bind: {
            html: '{loremIpsum}'
        }
    }]
});

在首頁的對應(yīng)的Controller咏花，app\main\MainController.js中添加Logout對應(yīng)的click方法

Ext.define('TutorialApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

    onItemSelected: function (sender, record) {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    onConfirm: function (choice) {
        if (choice === 'yes') {
            //
        }
    },
    //點擊Logout按鈕
    onClickButton: function () {
        //刪除保存在localStorage中的登錄狀態(tài)
        localStorage.removeItem('TutorialLoggedIn');
        //刪除首頁
        this.getView().destroy();
        //創(chuàng)建Login窗口
        Ext.create({
            xtype: 'login'
        });
    }
});

運行sencha app build命令

cd D:\TutorialApp
sencha app build testing
sencha app build