最近のトラックバック

Twitter

楽天

« Sencha(Ext JS4) 1 | トップページ | MIIX2 8のGPS »

Sencha(Ext JS4) 2

前回 の続き。
前回は環境整えるところと、アプリの雛形っぽいものを作るところまでやったので、そのアプリをいじって見るところから。
getting_startedの続きをやってきます。

  1. 前回のsenchaコマンドで生成したディレクトリを確認します。
    /var/www/sencha
    drwxr-xr-x  4 root     root     4.0K  2月 26 09:29 .sencha
    -rw-r--r--  1 root     root     1.3K  2月 26 09:29 Readme.md
    drwxr-xr-x  6 root     root     4.0K  2月 26 09:29 app
    -rw-r--r--  1 root     root      302  2月 26 09:29 app.js
    -rw-r--r--  1 root     root      100  2月 26 09:29 app.json
    -rw-r--r--  1 root     root      291  2月 26 09:29 bootstrap.css
    -rw-r--r--  1 root     root      49K  2月 26 09:29 bootstrap.js
    -rw-r--r--  1 root     root      283  2月 26 09:29 bootstrap.json
    drwxr-xr-x  3 root     root     4.0K  2月 26 09:29 build
    -rw-r--r--  1 root     root     1.5K  2月 26 09:29 build.xml
    drwxr-xr-x  7 root     root     4.0K  2月 26 09:29 ext
    -rw-r--r--  1 root     root      422  2月 26 09:29 index.html
    drwxr-xr-x  2 root     root     4.0K  2月 26 09:29 overrides
    drwxr-xr-x  2 root     root     4.0K  2月 26 09:29 packages
    drwxr-xr-x  2 root     root     4.0K  2月 26 09:29 resources
    drwxr-xr-x  6 root     root     4.0K  2月 26 09:29 sass
      色々出来てますが、とりあえずはindex.html、app.js、appディレクトリをいじる形になるみたい
      そのappディレクトリ
    /var/www/sencha/app
    -rw-r--r--  1 root root  265  2月 26 09:29 Application.js
    -rw-r--r--  1 root root  182  2月 26 09:29 Readme.md
    drwxr-xr-x  2 root root 4.0K  2月 26 09:29 controller
    drwxr-xr-x  2 root root 4.0K  2月 26 09:29 model
    drwxr-xr-x  2 root root 4.0K  2月 26 09:29 store
    drwxr-xr-x  2 root root 4.0K  2月 26 09:29 view
     Application.jsというコアになるファイルと、MVCモデルのディレクトリ、storeディレクトリがあります。どうやらMVCモデルに対応してるらしい。サンプルのディレクトリ除く限りでは必ずしもMVCモデルにしなければならないわけではなさそうですが。
  2. Application.jsを編集します。
    デフォルトではこんな中身ですが、
    Ext.define('Myapp.Application', {
        name: 'Myapp',

        extend: 'Ext.app.Application',

        views: [
            // TODO: add views here
        ],

        controllers: [
            // TODO: add controllers here
        ],

        stores: [
            // TODO: add stores here
        ]
    });
    一度すべて削除して↓の内容に書き換えます。
    Ext.define('MyApp.Application', {
        name: 'MyApp',
        extend: 'Ext.app.Application',
        launch: function() {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [
                    {
                        title: 'Hello Ext',
                        html : 'Hello! Welcome to Ext JS.'
                    }
                ]
            });
        }
    });
    launchが読み込まれた時に動作する関数を定義する箇所の模様。
  3. ブラウザでアクセスし直すと、↓の画面に変わります。
    Sencha2

とりあえずドキュメントの取っ掛かりをやってみましたが、全然わからん。。なんとなーく単体のアプリっぽいものの作り方は見えてきた気がしますが、デスクトップアプリみたいなんになるとまだ検討も付きません。。

« Sencha(Ext JS4) 1 | トップページ | MIIX2 8のGPS »

仕事ネタ」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: Sencha(Ext JS4) 2:

« Sencha(Ext JS4) 1 | トップページ | MIIX2 8のGPS »

2018年10月
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
無料ブログはココログ