ExtJS ToDo

2022-09-252022
73.2% (267.4/365)
September
81.4% (24.4/30)
Week 38
91.9% (6.4/7)
Day 25 Sun
43.8% (10.5/24)

訪問者

total: 6249
today: 2
yesterday: 1
now: 6

↑

更新

MenuBar

編集中

Sencha Touch アプリの構成
Model-Storage
View (ATDK)
Controller (ATDK)

Sencha Touch アプリの構成 †

教科書の第一章 Todo アプリを作るの整理
アプリの構成
- 基本的に、クライアントサイド MVC
- Model を永続化する場合には、Model に Storage を関連付ける
- 具体的に、どのような手段で永続化するかは、Storage に関連付けられる Storage Proxy によって決まる。Storage に Local Storage Proxy を関連付ければ、Model は HTML5 の web storage に格納される

↑

Model-Storage †

↑

ブラウザ側の Storage について †

Web Storage	Key-Value ストア HTML5 標準
Web SQL	SQLite。頓挫
Indexed Database API	NoSQL。仕様未確定。非互換多し(2014現在)

現時点(2014) では、ブラウザ側の Storage は、Web Storage 一択かな
複数種類のデータを一つの WebStorage? に格納すると、ややこしいことになるけど、そこは Sencha Touch の LocalStorageProxy? が旨いことやってくれる
- 具体的には Key を ${データ種別名}-{UUID} としている
- Web Storage は、アプリごとに一つ
気が変わったら、StorageProxy? を取り替えればいいだけ、ユーザーコードの変更は不要。旨い逃げ方だね

↑

Model と Storage の作成 †

Toolbox から Model と Storage を Drag & Drop する。Storage には、Local Storage Proxy を割り付ける
id を変更する
- GUIコンポーネントは、ハンガリアン記法を使うと便利
- XXXName
  - XXX コンポーネント名。頭から子音のみ3文字とるとそれっぽくなる。Storage -> Str、Model → Mdl
  - Name 名称
  - MdlTask? とか

Applicationはこんなかんじに成る

// @require @packageOverrides
Ext.Loader.setConfig({

});


Ext.application({
    models: [
        'MdlTask'
    ],
    stores: [
        'StrTask'
    ],
    name: 'ToDo_List'
});

Model に、フィールドを設定する

Ext.define('ToDo_List.model.MdlTask', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    config: {
        idProperty: 'id',
        identifier: {
            type: 'uuid'
        },
        fields: [
            {
                name: 'id',
                type: 'auto'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'description',
                type: 'string'
            },
            {
                name: 'created',
                type: 'date'
            },
            {
                name: 'completed',
                type: 'date'
            },
            {
                name: 'priority',
                type: 'int'
            },
            {
                name: 'isComplete',
                type: 'boolean'
            }
        ]
    }
});

idProperty で、このモデルの PK を指定する。
- "idProperty : 'id'" はデフォルト値で省略可
- Sencha Architect も、idProperty に id 以外の項目を指定しないと、idProperty 項目の生成を省略
identifier には、simple と uuid を指定できる。uuid 推奨
- simple : ext-record-1, ext-record-2, ext-record-3, ... を自動採番
- uuid : Universal Unique Id (宇宙で一意になるID 550e8400-e29b-41d4-a716-446655440000) を生成する
id の型は auto にする
- id は、とにかく一意であればいい値とする
- id は、(人間の)業務処理では使わない。このモデルのインスタンス一つを特定するためだけに使う

Storage に、Model と Storage Proxy を関連付ける

Ext.define('ToDo_List.store.StrTask', {
    extend: 'Ext.data.Store',

    requires: [
        'ToDo_List.model.MdlTask',
        'Ext.data.proxy.LocalStorage'
    ],

    config: {
        model: 'ToDo_List.model.MdlTask',
        storeId: 'StrTask',
        proxy: {
            type: 'localstorage',
            id: 'TaskLocalStorageProxy'
        }
    }
});

これで、Model と Model の永続化ができた。超簡単、永続化周りをイチから作ると 1 日仕事だけど、ここまで Sencha Architect で 15 分。

↑

Filter †

TaskLocalStorageProxy? (つまり HTML5 の WebStorage?) をフィルタリングして、Store を作ることができる

StrTask? は、WebStorage? に格納されている MdlTask? のうち未完了のもののみ

Ext.define('ToDo_List.store.StrTask', {
    extend: 'Ext.data.Store',

    requires: [
        'ToDo_List.model.MdlTask',
        'Ext.data.proxy.LocalStorage',
        'Ext.util.Filter'
    ],

    config: {
        model: 'ToDo_List.model.MdlTask',
        storeId: 'StrTask',
        proxy: {
            type: 'localstorage',
            id: 'TaskLocalStorageProxy'
        },
        filters: {
            filterFn: function(item) {
                console.log(item);
                return !(item.data.isComplete);
            }
        }
    }
});

StrCompleted? は、完了済みのもののみ

Ext.define('ToDo_List.store.StrCompleted', {
    extend: 'Ext.data.Store',

    requires: [
        'ToDo_List.model.MdlTask',
        'Ext.data.proxy.LocalStorage',
        'Ext.util.Filter'
    ],

    config: {
        model: 'ToDo_List.model.MdlTask',
        storeId: 'StrCompleted',
        proxy: {
            type: 'localstorage',
            id: 'TaskLocalStorageProxy'
        },
        filters: {
            filterFn: function(item) {
                return item.data.isComplete;
            }
        }
    }
});

filterFn の引数 item
- data が Model
- raw には WebStorage? に格納されている JSON が入っている

↑

データを格納する。それが、WebStorage?にどんなふうに格納されるのか? †

Application#launch() (アプリケーションの初期化処理) で、Store にデータが格納されていなかった場合に、ダミーデータを作るようにする

// @require @packageOverrides
Ext.Loader.setConfig({

});


Ext.application({
    models: [
        'MdlTask'
    ],
    stores: [
        'StrTask',
        'StrCompleted'
    ],
    name: 'ToDo_List',

    launch: function() {
        var strTask = Ext.data.StoreManager.lookup('StrTask');
        var strCompleted = Ext.data.StoreManager.lookup('StrCompleted');
        var today = new Date();

        if (0 === strTask.getCount() && 0 === strCompleted.getCount()){
            console.log('we have no record. create dummy records.');

            strTask.add({
                name:'タスクはこちら',
                description:'以下の実施完了ボタンを押すとタスクを完了にできます。',
                priority:1,
                created:today,
                completed:'',
                isComplete:false});

            strTask.add({
                name:'タスクの編集方法',
                description:'以下の編集ボタンを押すとタスクを編集できます。',
                priority:2,
                created:today,
                completed:'',
                isComplete:false});


            strTask.add({
                name:'タスクの追加方法',
                description:'右上隅の追加ボタンを押すとタスクを追加できます。',
                priority:3,
                created:today,
                completed:'',
                isComplete:false});

            strTask.sync();
        }
    }

});

実際に動かすとこんな感じに格納される

モデル名	PK1,PK2,PK3
モデル名-PK1	PK1 に対応する Model の内容 (JSON文字列)
モデル名-PK2	PK2 に対応する Model の内容 (JSON文字列)
モデル名-PK3	PK3 に対応する Model の内容 (JSON文字列)

↑

View (ATDK) †

↑

Controller (ATDK) †

HTML#ExtJS

目次

訪問者

更新

最新の10件

人気の10件