Skip to content

Instantly share code, notes, and snippets.

@sunvisor

sunvisor/gist:de4164bd0d39d6bd3b55

Created May 28, 2014 06:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sunvisor/de4164bd0d39d6bd3b55 to your computer and use it in GitHub Desktop.
Save sunvisor/de4164bd0d39d6bd3b55 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.md

いろはの「い」ハンズオン

開始

プロジェクト生成

sencha -sdk ~/mylib/touch/touch-2.3.1 generate app App .

Webサーバー起動

sencha web -port 8080 start -map ./

ブラウザで見る

コンポーネントを置いてみる

Ext.define('App.view.Main', {
    extend: 'Ext.Container',
    xtype: 'app-main',
    config: {
        items: [{
            xtype: 'toolbar',
            items: [{
                xtype: 'button',
                text: 'Button1'
            },{
                xtype: 'button',
                text: 'Button2'
            }]
        },{
            xtype : 'panel',
            html: '<h1>My Panel</h1>'
        }]
    }
});

リスト表示

モデル

Ext.define('App.model.Note', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {
                name: 'id',
                type: 'string'
            },
            {
                name: 'text',
                type: 'string'
            },
            {
                name: 'update',
                type: 'string'
            }
        ],
        proxy: {
            type: 'localstorage'
        }
    }
});

ストア

Ext.define('App.store.Notes', {
    extend: 'Ext.data.Store',
    requires: [
        'App.model.Note'
    ],
    config: {
        autoLoad: true,
        model: 'App.model.Note',
        storeId: 'Notes',
        data: [
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/02 13:00'},
            {text: 'TESTTEST', update: '2014/04/03 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'},
            {text: 'TESTTEST', update: '2014/04/01 13:00'}
        ]
    },
});

app.js

stores: [
    'Notes'
],

view.List.js

Ext.define('App.view.List', {

    extend: 'Ext.dataview.List',
    xtype: 'app-list',
    requires: [
        'Ext.TitleBar'
    ],

    config: {

        layout: 'fit',

        store: 'Notes',

        itemTpl: '{text}  -  {update}',

        items: [{
            xtype: 'titlebar',
            title: 'memo',
            docked: 'top',
            items: [{
                text: 'New',
                action: 'new',
                align: 'right'
            }]
        }]

    }

});

Main に配置

Ext.define('App.view.Main', {
    extend: 'Ext.Container',
    xtype: 'app-main',

    requires: [
        'App.view.List'
    ],

    config: {
        layout: 'fit',
        items: [{
            xtype : 'app-list'
        }]
    }
});

表示してみる

フォームを作る

view.Edit.js

Ext.define('App.view.Edit', {

    extend: 'Ext.form.Panel',
    xtype: 'app-edit',

    config: {

        layout: {
            type: 'vbox'
        },

        items: [{
            xtype: 'textareafield',
            label: 'memo',
            name: 'text',
            placeHolder: '内容を入力...',
            //flex: 1
            height: 400
        }, {
            xtype: 'textfield',
            label: 'date',
            name: 'update',
            readOnly: true
        }, {
            xtype: 'toolbar',
            docked: 'top',
            items: [{
                text: 'Back',
                action: 'back',
                ui: 'back'
            }, {
                xtype: 'spacer'
            }, {
                text: 'Save',
                handler: function(button) {
                    var form = button.up('app-edit'),
                    vals = form.getValues();

                    form.fireEvent('app-memo-save', vals);
                }
            }]
        }]

    }

});

Main に配置

Ext.define('App.view.Main', {
    extend: 'Ext.Container',
    xtype: 'app-main',

    requires: [
        'App.view.List',
        'App.view.Edit'
    ],

    config: {
        layout: 'card',  // 変更
        activeItem: 1,
        items: [{
            xtype : 'app-list'
        },{
            xtype : 'app-edit'
        }]
    }
});

表示してみる

リストの編集機能を追加

選択したらフォームを表示

activeItem: 1, を消す

controller.Main.js
Ext.define('App.controller.Main', {

    extend: 'Ext.app.Controller',
    config: {

    }

});
refs
    refs: {
        main: '.app-main',
        edit: '.app-edit'
    },
control
    control: {
        '.app-list': {
            'select': 'onSelect'
        }
    }
onSelectリスナー
onSelect: function(comp, record) {
    var me   = this,
        view = me.getMain(),
        edit = me.getEdit();

    edit.setRecord(record);
    view.setActiveItem(1);
}

ここで、表示させてみて、リストが選択されるとフォームが表示されるのを確認

Backボタン処理

Backボタンの処理を追加する

controller.Edit.js
Ext.define('App.controller.Edit', {

    extend: 'Ext.app.Controller',

    config: {

    }

});
refs
    refs: {
        main: '.app-main',
        edit: '.app-edit'
    },
control
    control: {
        '.app-edit button[action=back]': {
            'tap': 'onBack'
        }
    }
},
リスナー
onBack: function() {
    var me = this,
        view = me.getMain();

    view.setActiveItem(0);
}
app.js
controllers: [
    'Main',
    'Edit'
],

保存処理

Saveボタンを押したときに保存

refs
        '.app-edit': {
            'app-memo-save': 'onSave'
        },
リスナー
onSave: function(val) {
    var me = this,
        store = Ext.getStore('Notes'),
        edit = me.getEdit(),
        record = edit.getRecord();

    val.update = Ext.Date.format(new Date(), 'Y/m/d H:m');
    record.set(val);

    store.sync();
    me.onBack();
}

ここまでで動作確認、変更結果が保存されることを確認

data の削除
  • 一旦保存したら、localStrage にデータができるので data 文を削除
  • リロードしてもデータが表示される
  • 保存したデータが反映されるようになる

追加処理

controller.Main.js の control
        '.app-list button[action=new]': {
            'tap': 'onAdd'
        }
ハンドラー
onAdd: function() {
    var me    = this,
        model = Ext.create('App.model.Note'),
        view  = me.getMain(),
        edit  = me.getEdit();

    edit.setRecord(model);
    view.setActiveItem(1);
},
controller.Edit.js の onSave

新規保存に対応

onSave: function(val) {
    var me = this,
        store = Ext.getStore('Notes'),
        edit = me.getEdit(),
        record = edit.getRecord(),
        isNew = Ext.isEmpty(record.get('update'));

    val.update = Ext.Date.format(new Date(), 'Y/m/d H:m');
    record.set(val);

    if (isNew) {
        record.set('id', Ext.String.format('memo{0}', Ext.Date.now()));
        store.add(record);
    }

    console.log(record.data);

    store.sync();

    me.onBack();
}
  • 沢山のjsファイルが読み込まれていることを確認

ビルド

^C で Webサーバーを停止

sencha app build

build/production/App に移動

sencha web -port 8080 start -map ./
  • Devツールを開いた状態でブラウザでアクセス。
  • ロードするファイルが少ないのを確認
  • リロードするとさらに少なくなるのを確認
  • Webサーバー止めてリロードしても動作するのを確認
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment