Ext JS 5初探(三)

在上文提到瞭本地化文件的問題,然後在Ext JS 5的包裡找瞭找,居然還沒包含本地化包。我估計目前還不到考慮本地化的時候。在Sencha Touch中,是沒有本地化包的,但是要讓Ext JS也不包含本地化包,那有點不現實。如果按照目前的模式,要插入本地化包,是個大問題。要加載本地化包,最佳位置應該是在完成Ext JS的初始化後,在加載應用程序之前,但根據目前的模式,一是自己去修改Bootstrap.json文件,一是在加載應用程序後再加載本地化包。如果自己去修改Bootstrap.json文件,有點不太顯示,因為要調整加載文件的idx就很頭疼瞭,如果不調整idx,直接在最後加入本地化包,哪就和直接在初始化應用程序化再加載本地化文件沒區別瞭。在應用程序初始化後加載,是否存在問題,這個需要驗證才知道,目前不好下結論。或許在後續版本會很好的解決這個問題也不一定,這個問題隻有留待正式版的時候再來討論。

下面來看看app.js,代碼如下:

Ext.application({
    name: 'TestExt5',

    extend: 'TestExt5.Application',
    
    autoCreateViewport: 'TestExt5.view.main.Main'
	
});

從代碼可以看到,這裡與4最大的不同就是autoCreateViewport不再是true或false瞭,而是直接指定類名瞭。翻瞭下app\view目錄,沒有瞭4種的Viewport.js文件,這是怎麼回事?

打開Ext.app.Application的源文件,看瞭一下,發現多瞭一個類Ext.container.plugin.Viewport,也就是說,Viewport現在隻是一個容器的插件,不再是獨立的容器類瞭。這樣也好,可以避免使用上的混亂,再也不用擔心在容器或面板內使用Viewport的情況瞭。

進入app目錄,打開applicaiton.js文件,會看到這個是4的時候沒區別。

下面打開TestExt5.view.main.Main的類文件,會看到多瞭以下幾個定義:

    controller: 'main',
    viewModel: {
        type: 'main'
    },

這就是Ext JS 5新增的視圖控制器和視圖模型。

下面先來看看視圖模型的定義,代碼如下:

Ext.define('TestExt5.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.main',

    data: {
        name: 'TestExt5'
    }

    //TODO - add data, formulas and/or methods to support your view
});

在代碼中,隻定義瞭一個數據name,值為TestExt5。這個值有什麼用呢?切換回TestExt5.view.main.Main會看到以下代碼:

        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',

從代碼可以看到,這裡將數據name綁定給瞭面板的標題(title),也就是面板的標題將會顯示TestExt5,正如文章一圖中所示的效果。

下面來看看視圖控制器的代碼:

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

    requires: [
        'Ext.MessageBox'
    ],

    alias: 'controller.main',

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

    onConfirm: function (choice) {
        if (choice === 'yes') {
            //
        }
    }
});

在代碼中定義瞭兩個方法,其中onConfirm是onClickButton方法內Ext.Msg.confirm的回調函數。

切換回TestExt5.view.main.Main,可以看到,面板中的按鈕綁定瞭onClickButton方法,也就是說,當單擊按鈕時,會直接執行視圖控制器的onClickButton方法。這樣的寫法,實在太好,可減少不少代碼量。在使用4的MVC結構,最大的煩惱就是要在控制器中定義一堆的引用以及寫一堆的選擇符為組件綁定事件。現在,隻需要將方法寫在視圖控制器中,直接在視圖中綁定方法就行瞭。這個得贊一下!

在app\controller目錄下有Main.js和root.js兩個文件,這兩個文件都隻有簡單的定義,沒有具體的執行代碼。可以預想,在5的開發中,Main.js的主要作用是作為視圖之間的數據傳遞之用。而root.js,根據註釋主要作用是用來定義路由。

在文章的最後,我們來生成一下應用程序。打開命令提示符窗口,進入應用程序的目錄,在這裡是C:\TestExt5,然後運行以下命令:

sencha app build

等編譯完成,可在C:\TestExt5\build\production\TestExt5目錄看到以下的文件和目錄:

打開index.html,會發現有一大段的壓縮瞭的Javascript代碼,這段代碼仔細看瞭下,就是把bootstrap.js文件壓縮後的代碼。不過還是有變化的,就是在壓縮代碼的第一行會看到以下代碼:vcD48cD48cHJlIGNsYXNzPQ==”brush:java;”>Ext.manifest=”app”
也就是說,這次要去加載的不是bootstrap.json文件瞭,而是app.json文件瞭,也就是說,這時候是app.json文件發揮作用的時候瞭,要好好並仔細閱讀一下app.json文件裡面的註釋瞭,不然貿然去修改該文件,很可能會出錯。

好瞭,有關Ext JS 5的初步探討就到這瞭,未來有機會研究一下Ext JS 5的新功能。

發佈留言