SenchaUG 勉強会 第7回@大阪での発表の資料です。 Bryntum社のExt Schedulerの使い方を解説します。

1. を使ってみる
13年4月13日土曜日

2. 1 Ext.create('My.person.Model', {
2 name: 'Hisashi Nakamura',
3 company: 'Xenophy CO.,LTD',
4 twitter: '@martini3oz',
5 site: 'http://extjs.sunvisor.net'
6 });
13年4月13日土曜日

3. Mats Bryntse
13年4月13日土曜日

4. の製品
13年4月13日土曜日

5. Ext Scheduler
スケジュールを表示・入力
ドラッグで移動・リサイズ
もちろんクロスブラウザー対応
Sencha Touch用にはTouch
Schedulerもある
13年4月13日土曜日

6. 基本的なこと
二つのストアが必要
resourceStore
人物・会議室など
eventStore
行事・予定
13年4月13日土曜日

7. resorceStore
Sch.data.ResourceStore
Name: リソースの名前
1 var resourceStore = Ext.create('Sch.data.ResourceStore', {
2 data: [
3 {Id: 1, Name: '小堤'},
4 {Id: 2, Name: '中村'}
5 ]
6 });
13年4月13日土曜日

8. eventStore
ResourceId: リソースのID
Name: イベントの名前
StartDate: 開始日時
EndDate: 終了日時
13年4月13日土曜日

9. eventStore
2 ResourceId: リソースのID
1 var eventStore = Ext.create('Sch.data.EventStore', {
data: [
3 {
4 ResourceId : 1,
Name: イベントの名前
5 Name : 'Some task',
6 StartDate : '2013-05-22 10:00',
7 EndDate : '2013-05-22 12:00'
8 },
StartDate: 開始日時
9 {
10 ResourceId : 2,
11 Name : 'Some other task',
12 StartDate : '2013-05-22 13:00',
EndDate: 終了日時
13 EndDate : '2013-05-22 16:00'
14 }
15 ]
16 });
13年4月13日土曜日

10. viewPreset
スケジュールの表示方法を指定する
コンフィグオプション
Schedulerはヘッダが2段になって
いて、それぞれの表示単位の組み合
わせがプリセットされている
13年4月13日土曜日

11. viewPreset
weekAndDay
weekAndMonth
monthAndYear
year
weekAndDayLetter
weekDateAndMonth
13年4月13日土曜日

12. viewPreset
13年4月13日土曜日

13. viewPreset
Presetという通り、これらは事前
に設定されたコンフィグオプション
のかたまり
自分で定義したコンフィグオプショ
ンを作成することができる
13年4月13日土曜日

14. Sch.panelSchedulerGrid
1 Ext.create('Sch.panel.SchedulerGrid', {
2 width : 600,
3 height : 200,
4
5 startDate : new Date(2013, 4, 22, 8),
6 endDate : new Date(2013, 4, 22, 18),
7 viewPreset : 'hourAndDay',
8
9 columns : [
10 { header : 'Staff', width : 130, dataIndex : 'Name'}
11 ],
12
13 resourceStore : resourceStore,
14 eventStore : eventStore,
15 renderTo: Ext.getBody()
16 });
13年4月13日土曜日

15. Sch.panelSchedulerGrid
1 Ext.create('Sch.panel.SchedulerGrid', {
2 width : 600,
3 height : 200,
4
5 startDate : new Date(2013, 4, 22, 8),
6 endDate : new Date(2013, 4, 22, 18),
7 viewPreset : 'hourAndDay',
8
9 columns : [
10 { header : 'Staff', width : 130, dataIndex : 'Name'}
11 ],
12
13 resourceStore : resourceStore,
14 eventStore : eventStore,
15 renderTo: Ext.getBody()
16 });
13年4月13日土曜日

16. 日本語使える？
使えます。
Ext JS自体がlocaleファイルを読
み込むことでローカライズできます
ext/locale/ext-lang.ja.js
13年4月13日土曜日

17. 日本語使える？
使えます。
日本語にはなったが
Ext JS自体がlocaleファイルを読
み込むことでローカライズできます
ext/locale/ext-lang.ja.js
13年4月13日土曜日

18. 表示のカスタマイズ
Sch.preset.Managerの
registerPresetメソッドで定義
日付の書式も設定できる
多岐にわたるオプション
13年4月13日土曜日

19. 表示のカスタマイズ
1 Sch.preset.Manager.registerPreset("dayNightShift", {
2 timeColumnWidth : 35,
3 rowHeight : 32,
4 displayDateFormat : 'G:i',
5 shiftIncrement : 1,
Sch.preset.Managerの
6 shiftUnit :"DAY",
7 timeResolution : {
8 unit :"MINUTE",
9 increment : 15
10 },
registerPresetメソッドで定義
11
12
13
defaultSpan : 24,
headerConfig : {
bottom : {
14 unit :"HOUR",
15 increment : 1,
16 dateFormat : 'G'
日付の書式も設定できる
17 },
18 middle : {
19 unit :"HOUR",
20 increment : 12,
21 renderer : function(startDate, endDate, headerConfig, cellIdx) {
22 headerConfig.align = 'center';
23
多岐にわたるオプション
24 if (startDate.getHours()===0) {
25 headerConfig.headerCls = 'nightShift';
26 return Ext.Date.format(startDate, 'M d') + ' Night Shift';
27 }
28 else {
多岐にわたりすぎ(;́д｀)
29 // Setting a custom CSS on the header cell element
30 headerConfig.headerCls = 'dayShift';
31 return Ext.Date.format(startDate, 'M d') + ' Day Shift';
32 }
33 }
34 },
35 top : {
36 unit :"DAY",
37 increment : 1,
38 dateFormat : 'd M Y'
39 }
40 }
41 });
13年4月13日土曜日

20. そこで盗む
日付の形式を変えるだけなら、標準
のviewPresetを取得して、カスタ
マイズし、別な名前で登録してあげ
ればよい
1 var preset = Sch.preset.Manager.getPreset('hourAndDay');
2 preset.headerConfig.top.dateFormat = 'Y年m月d日';
3 Sch.preset.Manager.registerPreset('myHourAndDay', preset);
13年4月13日土曜日

21. 時間粒度の設定
スケジュールの時間単位の変更
PresetのtimeResolutionで変更
可能
1 var preset = Sch.preset.Manager.getPreset('hourAndDay');
2 preset.timeResolution = {
3 unit: "MINUTE",
4 increment: 10
5 };
6 Sch.preset.Manager.registerPreset('myHourAndDay', preset);
13年4月13日土曜日

22. EventEditor
Sch.plugin.EventEditor
スケジュールの入力・変更用エディ
タのプラグイン
設定すると新しい予定を作ったり、
既存の予定をダブルクリックすると
表示される。
13年4月13日土曜日

23. EventEditor
かなり自由にカスタマイズ可能
EventTypeフィールドによる表示
内容切り替えもサポート
13年4月13日土曜日

24. 実際に使ってみる
MVCで使ってみる
カスタム項目
日付書式の変更
EventEditorで予定入力
ここからは実際のコードで
13年4月13日土曜日

25. GitHub
https://github.com/sunvisor/ExtSchedulerSample
13年4月13日土曜日

26. ご清聴ありがとう
ございました。
13年4月13日土曜日