Sencha Architectの中でExt Schedulerを使う

この記事は、 Using Ext Scheduler in Sencha Architect の翻訳です。

私たちはこれまでSencha Architectの中で我々のコンポーネントを使う方法について、口が酸っぱくなるほど尋ねてきました。 最新リリースのSencha Architect 2.2において、このことを簡単に解決できるようになりました。 サードパーティーのコンポーネントは未だに完全にサポートされてはおらず、キャンバスには描画されない点は覚えておいてください(それでもとても素晴らしいことです)。 すぐにでもそのやり方を見たいのであれば、次のYouTubeビデオでサンプルをご覧ください。

読む方をお望みのかたのために、では始めましょうか。

Architect 2.2を起動する

まず始めに、新しいArchitectプロジェクトをExt JS 4.2を使って生成します。 その後、Ext.Panelをキャンバスにドラッグします。 このパネルはこのデモのコンテナーになります。 パネルの'layout'プロパティをfitに設定するのを忘れずに。 ArchitectのUIは次のようになります。

Screen Shot 2013-04-03 at 8.53.12 PM

続いて他のExt.Panelをトップパネルに追加します。 次にキャンバスの中で子パネルを選択すると、Schedulerのタイトルを設定するなど、そこにコンフィグプロパティが設定できるようになります。 さてcreateAliasを使って最初の技を使う時です。

Screen Shot 2013-04-03 at 9.01.24 PM

'createAlias'オプションを使うと実際に自分たちが必要とするコンポーネントのカスタムxtypeを設定する事ができます。 そこでこの値をSch.panel.SchedulerGridのコンストラクターに割り付けられた'**schedulergrid**'に設定します。

“Uncaught TypeError: Cannot call method ‘substring’ of undefined”.

これはExt JSが「わかりません」と言うときのおきまりのセリフです。 そしてこのエラーメッセージは理解しにくいですが、 Ext JSは、Ext Schedulerのリソースへの参照が追加されていないせいで、このエラーが発生したのだと言おうとしているのです。

Ext Schedulerのリソースをインポートする

Project Inspectorパネルの中で、Resourcesノードを探し上のツールバーにある + 記号をクリックします。 JSリソースを一つとCSSリソースを一つ追加します。 JSリソースを選択し、sch-all-debug.jsのローカルコピーを指定し、 CSSリソースにも同じ操作(resources/css/sch-all.css)をします。 この操作の後のProject Inspectorパネルは、次のようになります。

Screen Shot 2013-04-03 at 9.11.16 PM

Adding Ext Scheduler config properties

この時点でプロジェクトをビルドしてみると、次のようなエラーがコンソールに記録されます。

Uncaught Sch.mixin.AbstractSchedulerPanel.initStores(): You must specify a resourceStore config

ご心配なく。 これもまた、この設定されるべきSchedulerプロパティ(resourceStoreとeventStoreは必須項目です)がまだ設定されていないことを指摘しているのです。 簡単なカスタムコンフィグプロパティを追加するには、Configパネルの上部にあるテキストボックスを使います(試しに'startDate''endDate''viewPreset'を設定してみてください)。 Schedulerに必要なカスタムストアなどの複雑なコンフィグプロパティを設定するには、ConfigパネルでProcess Configを探しそこの + 記号をクリックすると、'processMyScheduler'関数フックがコンポーネントに追加されます。 そうすると上にあるProject Inspectorにその関数フックが表示されますので、それをダブルクリックします。 するとコードエディターが表示されます。

Screen Shot 2013-04-03 at 9.16.33 PM

ご覧の通り、デフォルトの実装ではスケジューラーのコンフィグオブジェクトを受け取り、それをそのまま返しています。 そこに設定したいコンフィグコードを適用することができます。

    var startDate = config.startDate || new Date();

    return Ext.applyIf(config, {
        colums: [{
                header: 'Name',
                dataIndex: 'Name'
            }
        ],

        resourceStore: new Sch.data.ResourceStore({
            // Here you'll configure your resource store properties
            // for now we use dummy data
            data: [{
                    Id: 1,
                    Name: 'Mike'
                }, {
                    Id: 2,
                    Name: 'Kate'
                }
            ]
        }),
        eventStore: new Sch.data.EventStore({
            // Here you'll configure your event store properties
            // for now we use dummy data
            data: [{
                    ResourceId: 1,
                    Name: 'Bake the cake',
                    StartDate: startDate,
                    EndDate: Ext.Date.add(startDate, Ext.Date.DAY, 5)
                }, {
                    ResourceId: 2,
                    Name: 'Brew some coffee',
                    StartDate: startDate,
                    EndDate: Ext.Date.add(startDate, Ext.Date.DAY, 5)
                }
            ]
        })
    });

ここはグリッドコラムと二つのストアを作り、ちゃんと動作するように基本的なダミーデータを設定しています。 ここで実行してみると、次のような画面が表示されます。

Screen Shot 2013-04-03 at 9.48.32 PM

…これで任務を完了しました! 背後で実際に生成されたものを理解するために、MyPanel.jsに生成されたソースファイルを開いてみましょう。

    /*
     * File: app/view/MyPanel.js
     *
     * This file was generated by Sencha Architect version 2.2.0.
     * http://www.sencha.com/products/architect/
     *
     * This file requires use of the Ext JS 4.2.x library, under independent license.
     * License of Sencha Architect does not include license for Ext JS 4.2.x. For more
     * details see http://www.sencha.com/license or contact license@sencha.com.
     *
     * This file will be auto-generated each and everytime you save your project.
     *
     * Do NOT hand edit this file.
     */
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',

        height: 250,
        width: 400,
        layout: {
            type: 'fit'
        },
        title: 'My Panel',

        initComponent: function () {
            var me = this;

            Ext.applyIf(me, {
                items: [
                        me.processMyScheduler({
                        xtype: 'schedulergrid',
                        title: 'My Scheduler'
                    })
                ]
            });

            me.callParent(arguments);
        },

        processMyScheduler: function (config) {
            var startDate = config.startDate || new Date();

            return Ext.applyIf(config, {
                columns: [{
                        header: 'Name',
                        dataIndex: 'Name'
                    }
                ],

                resourceStore: new Sch.data.ResourceStore({
                    // Here you'll configure your resource store properties
                    // for now we use dummy data
                    data: [{
                            Id: 1,
                            Name: 'Mike'
                        }, {
                            Id: 2,
                            Name: 'Kate'
                        }
                    ]
                }),
                eventStore: new Sch.data.EventStore({
                    // Here you'll configure your event store properties
                    // for now we use dummy data
                    data: [{
                            ResourceId: 1,
                            Name: 'Bake the cake',
                            StartDate: startDate,
                            EndDate: Ext.Date.add(startDate, Ext.Date.DAY, 5)
                        }, {
                            ResourceId: 2,
                            Name: 'Brew some coffee',
                            StartDate: startDate,
                            EndDate: Ext.Date.add(startDate, Ext.Date.DAY, 5)
                        }
                    ]
                })
            });
        }
    });

“Sencha Architectの中でExt Schedulerを使う” への1件の返信

  1. Bij deze denk ik terug aan een klaslokaal, een warme kachel, een kring kinderen en een juf die voersoelt.Het wegdromen bij elke alinea,het vragen naar wat wordt jij later,de fantasie en nu toch vast stellen dat elk zijn richting heeft gekozen.Mooi Christiene, het verhaal en prent!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です