ExtJSでカレンダーを使う - uhiaha888’s diary

ExtensibleのCalendar Proというやつを使います。

http://ext.ensible.com/

extensible-1.6.0-rc.1.zipをダウンロードしておきます。

ExtJS 4.2.1.883と
sencha cmd 4.0.2.67を使っています

プロジェクトを作成します

sencha -sdk /path/to/ext-4.2.1.883/ generate app calendarsample /path/to/calendarsample

/path/to/calendarsampleに必要なファイル一式が展開されます。

extensibleをプロジェクトディレクトリ内にコピーします。

cp -r /path/to/extensible-1.6.0-rc.1 /path/to/calendarsample/extensible

extensible calendar proはどうやらsencha app buildでビルドできないっぽいので
http://ext.ensible.com/forum/viewtopic.php?f=2&t=763&start=10
を参考にextensible/src/Extensible.jsを修正してしまいます。

// ....

Ext.define('Extensible', {
    // ここから
    calendar: {
        data: {},
        dd: {},
        form: {
            field: {}
        },
        gadget: {},
        menu: {},
        template: {},
        util: {},
        view: {}
    },
    data: {},
    form: {
        field: {},
        recurrence: {
            option: {}
        }
    },
    lang: {},

    // ここまで追加

    singleton: true,

    // ...

ライブラリの中身をいじらなきゃいけないとか微妙すぎますが他の方法が見つかりませんでしたのでこれでいきます。

Viewport.jsを修正します

   // ....
   items: [{
        xtype: 'extensible.calendarpanel',
        store: Ext.create('Extensible.calendar.data.MemoryCalendarStore')
    }],
    // ....

calendarsample/.sencha/app/sencha.cfgのクラスパスにextensible/srcを追加します

app.classpath=${app.dir}/extensible/src,${app.dir}/app,${app.dir}/app.js

あと、extensibleのリソース類もコピーしてもらうためにsencha.cfgのapp.resource.pathsも修正します

app.resource.paths=${app.dir}/resources,${app.dir}/extensible/resources

extensibleのcssをデプロイする方法が良く分かりませんでした。

ってことで無理やりコピーします。

build.xmlを編集します

 <target name="-after-build">
      <copy file="${basedir}/extensible/resources/css/extensible-all.css"
            todir="${basedir}/build/production/calendarsample/resources" />
    </target>

また、index.htmlを修正します。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>calendarsample</title>
    <link rel="stylesheet" href="resources/extensible-all.css">
    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <link rel="stylesheet" href="bootstrap.css">
            <script src="ext/ext-dev.js"></script>
            <script src="bootstrap.js"></script>
            <script src="extensible/src/Extensible.js"></script>
        <!-- </x-bootstrap> -->
        <script src="app.js"></script>
    <!-- </x-compile> -->
</head>
<body></body>
</html>

ここまできたらビルドします。

プロジェクトのトップディレクトリで

sencha app build

これでbuild/production/calendarsampleフォルダ下にデプロイに必要なファイルだけが展開されます。

build/production/calenarsampleフォルダをhttpサーバのフォルダにおいてやるとカレンダーが表示されると思います。