(ExtJS6.5)細かい変更点

ようやく http://docs.sencha.com/extjs/6.5.0/guides/whats_new/whats_new.html は試し終えました。

d3やpivotパッケージはプレミアム機能は試せてないですが、そこは必要になったときに調べよう。

そういえば、ドキュメントのページも用意されているようなのでそろそろExtJS6.5.1もリリースされそうですよね。不具合修正されてるはずなので早くリリースしてほしい。

associatedコンフィグ

モデルで保存のリクエストを送信するときに、writerコンフィグを以下のように定義しておくとアソシエーションモデルのデータもリクエストパラメータに含めることができました。

Ext.define('Sample.model.Book', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'id',
            type: 'int'
        },
        {
            name: 'title',
            type: 'string'
        },
        {
            name: 'price',
            type: 'int'
        },
        {
            name: 'authorId',
            reference: {
                type: 'Sample.model.Author',
                inverse: 'books'
            }
        }
    ]
});

Ext.define('Sample.model.Author', {
    extend: 'Ext.data.Model',

    proxy: {
        type: 'ajax',
        url: '/dummy/author.json',
        writer: {
            allDataOptions: {
                associated: true
            }
        }
    },

    fields: [
        {
            name: 'id',
            type: 'int'
        },
        {
            name: 'name',
            type: 'string'
        }
    ],

    hasMany: [
        {
            name: 'books',
            associatedName: 'books',
            model: 'Sample.model.Book'
        }
    ]
});

この場合、リクエストパラメータにbooksプロパティが含まれるわけですが、アソシエーションが複数あるときは全てリクエストパラメータに含まれていました。

それを特定のものだけに指定できるようになっています。

associated: {
  books: true
}

ViewController

ビューモデルの値が変更されたときにビューコントローラの特定の処理を実行できるようになりました。

Ext.define('Sample.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',

    data: {
        x: 100
    }
});

Ext.define('Sample.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    bindings: {
        onChangeX: '{x}'
    },

    /**
     * ビューモデルのx値が変更された場合の処理。
     * @param {number} x x値
     */
    onChangeX: function (x) {
        console.log(x);
    }
});

どんな場面に使えるのかな。。

Google Mapのマーカー(modernだけっぽい)

Google Mapのマーカーのクラスが追加されたみたいです。(え、今まで無かったの？)

その他

アプリケーションのひな型を作成したら、app.jsがrequiresで"Sample.*"のようにアスタリスクを使ってクラスをインポートしてるのに気づきました。知らなかった。。

調べてみたら結構前からワイルドカード形式でクラスをインポートできるようになってたみたいです(https://plugins.jetbrains.com/plugin/7740-sencha-ext-js/update/20820)。

自分が作ったクラスなんて絶対全部使うんだから、ワイルドカード使ってインポートしたほうが楽ですよね。便利！！