編集中

Sencha Touch アプリの構成

Model-Storage

ブラウザ側の Storage について

Web StorageKey-Value ストア HTML5 標準
Web SQLSQLite。頓挫
Indexed Database APINoSQL。仕様未確定。非互換多し(2014現在)

Model と Storage の作成

model.png
  1. Toolbox から Model と Storage を Drag & Drop する。Storage には、Local Storage Proxy を割り付ける
  2. id を変更する
    • GUIコンポーネントは、ハンガリアン記法を使うと便利
    • XXXName
      • XXX コンポーネント名。頭から子音のみ3文字とるとそれっぽくなる。Storage -> Str、Model → Mdl
      • Name 名称
      • MdlTask? とか
  3. Applicationはこんなかんじに成る
    // @require @packageOverrides
    Ext.Loader.setConfig({
    
    });
    
    
    Ext.application({
        models: [
            'MdlTask'
        ],
        stores: [
            'StrTask'
        ],
        name: 'ToDo_List'
    });
    
  4. Model に、フィールドを設定する
    field.png
    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 は、(人間の)業務処理では使わない。このモデルのインスタンス一つを特定するためだけに使う
  5. 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'
            }
        }
    });
    
  6. これで、Model と Model の永続化ができた。超簡単、永続化周りをイチから作ると 1 日仕事だけど、ここまで Sencha Architect で 15 分。

Filter

filter.png

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

View (ATDK)

Controller (ATDK)


HTML#ExtJS


添付ファイル: filewebstorage.png 228件 [詳細] fileitem.png 235件 [詳細] filefilter.png 241件 [詳細] filefield.png 237件 [詳細] filemodel.png 239件 [詳細] filemvc.png 193件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2014-06-19 (木) 02:14:44 (905d)
ISBN10
ISBN13
9784061426061