最近のトラックバック

Twitter

楽天

仕事ネタ

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

仕事でSenchaを使いそうなので勉強しろとのことなので、Senchaを初めてみる。
目標はこんなWebDesktop。
ま、sample持ってくればそれなりのが動いちゃいそうな気がしますが、とりあえず基本からおさえようかと。

というわけでGetting Startedにあるサンプルを作ってみます。

環境はサーバ側はubuntu12.04、apache2、クライアントのブラウザはChromeかFirefox+Firebugでいきます。
apacheは/var/www/がDocumentRootになってます。
またSehcha(ExtJS)のバージョンは4.2.1です。

  1. Ext JS4SDKをダウンロードしてきます。
  2. 適当なところに展開します。zipファイルなので、unzipをaptあたりでインストールしときます。
    今回は/var/www/extjsに展開しときました。
  3. Sencha Cmdをダウンロード
  4. 適当なところに展開します。「SenchaCmd-4.0.2.67-linux.run」なんてファイルが展開されるので、実行権限をつけます。
  5. SenchaCmd-4.0.2.67-linux.runを実行します。ライセンス条項の表示があって、インストール先のパスを聞かれますので、適当に入力します。今回は/usr/local/にしました。
  6. /usr/local/Sencha/Cmd/4.0.2.67/にパスを通しておきます。
  7. senchaコマンドを実行してみます。バージョンとかオプションとか表示されます。
  8. senchaコマンドを実行してアプリを生成します。
    sencha -sdk /var/www/extjs generate app Myapp /var/www/sencha/
    ※-sdkの引数にはExt JS4 SDKを配置したパス
    ※Myappは任意のアプリケーション名
    ※/var/www/sencha/はアプリの生成先ディレクトリ
  9. 8でDocumentRoot直下に生成したので、http://hostname/sencha/でアクセスします。
    ↓こんな画面が表示されます
    Sencha1
  10. ちなみに本体を/var/www/extjsにおいたのでhttp://hostname/extjsにアクセスすると、サンプルとかドキュメントとか見えるっぽいです。

とりあえずここまで。

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      
無料ブログはココログ