ExtJS ToDo

目次

FrontPage
・Chromebook
・Random
・機械学習
・さくらVPS
・Fedora13
・SuSe10
・Docker
・Ansible
・Java
・Scala
・Python
・Ruby
・Lisp
・Computer
・GIS
・HTML
・Culture
・Link

訪問者

total: 6651
today: 1
yesterday: 5
now: 9

更新

最新の10件

人気の10件

MenuBar

編集中

Sencha Touch アプリの構成 †

• 教科書の第一章 Todo アプリを作るの整理
  
  
  
• アプリの構成
  
   

  

  • 基本的に、クライアントサイド MVC
  • Model を永続化する場合には、Model に Storage を関連付ける
  • 具体的に、どのような手段で永続化するかは、Storage に関連付けられる Storage Proxy によって決まる。Storage に Local Storage Proxy を関連付ければ、Model は HTML5 の web storage に格納される

Model-Storage †

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

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

Model と Storage の作成 †

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 に、フィールドを設定する
   

   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 †

• 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