ext schedulerを使ってみる
DESCRIPTION
SenchaUG 勉強会 第7回@大阪での発表の資料です。 Bryntum社のExt Schedulerの使い方を解説します。TRANSCRIPT
![Page 1: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/1.jpg)
を使ってみる
13年4月13日土曜日
![Page 2: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/2.jpg)
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日土曜日
![Page 3: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/3.jpg)
Mats Bryntse
13年4月13日土曜日
![Page 4: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/4.jpg)
の製品
13年4月13日土曜日
![Page 5: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/5.jpg)
Ext Scheduler
スケジュールを表示・入力
ドラッグで移動・リサイズ
もちろんクロスブラウザー対応
Sencha Touch用にはTouch Schedulerもある
13年4月13日土曜日
![Page 6: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/6.jpg)
基本的なこと二つのストアが必要
resourceStore
人物・会議室など
eventStore
行事・予定
13年4月13日土曜日
![Page 7: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/7.jpg)
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日土曜日
![Page 8: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/8.jpg)
eventStore
ResourceId: リソースのID
Name: イベントの名前
StartDate: 開始日時
EndDate: 終了日時
13年4月13日土曜日
![Page 9: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/9.jpg)
eventStore
ResourceId: リソースのID
Name: イベントの名前
StartDate: 開始日時
EndDate: 終了日時
1 var eventStore = Ext.create('Sch.data.EventStore', { 2 data: [ 3 { 4 ResourceId : 1, 5 Name : 'Some task', 6 StartDate : '2013-05-22 10:00', 7 EndDate : '2013-05-22 12:00' 8 }, 9 {10 ResourceId : 2,11 Name : 'Some other task',12 StartDate : '2013-05-22 13:00',13 EndDate : '2013-05-22 16:00'14 }15 ]16 });
13年4月13日土曜日
![Page 10: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/10.jpg)
viewPreset
スケジュールの表示方法を指定するコンフィグオプション
Schedulerはヘッダが2段になっていて、それぞれの表示単位の組み合わせがプリセットされている
13年4月13日土曜日
![Page 11: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/11.jpg)
viewPreset
weekAndDay
weekAndMonth
monthAndYear
year
weekAndDayLetter
weekDateAndMonth
13年4月13日土曜日
![Page 12: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/12.jpg)
viewPreset
13年4月13日土曜日
![Page 13: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/13.jpg)
viewPreset
Presetという通り、これらは事前に設定されたコンフィグオプションのかたまり
自分で定義したコンフィグオプションを作成することができる
13年4月13日土曜日
![Page 14: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/14.jpg)
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日土曜日
![Page 15: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/15.jpg)
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日土曜日
![Page 16: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/16.jpg)
日本語使える?使えます。
Ext JS自体がlocaleファイルを読み込むことでローカライズできます
ext/locale/ext-lang.ja.js
13年4月13日土曜日
![Page 17: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/17.jpg)
日本語使える?使えます。
Ext JS自体がlocaleファイルを読み込むことでローカライズできます
ext/locale/ext-lang.ja.js
日本語にはなったが
13年4月13日土曜日
![Page 18: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/18.jpg)
表示のカスタマイズSch.preset.ManagerのregisterPresetメソッドで定義
日付の書式も設定できる
多岐にわたるオプション
13年4月13日土曜日
![Page 19: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/19.jpg)
表示のカスタマイズSch.preset.ManagerのregisterPresetメソッドで定義
日付の書式も設定できる
多岐にわたるオプション
1 Sch.preset.Manager.registerPreset("dayNightShift", { 2 timeColumnWidth : 35, 3 rowHeight : 32, 4 displayDateFormat : 'G:i', 5 shiftIncrement : 1, 6 shiftUnit :"DAY", 7 timeResolution : { 8 unit :"MINUTE", 9 increment : 1510 },11 defaultSpan : 24,12 headerConfig : {13 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 element30 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日土曜日
![Page 20: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/20.jpg)
そこで盗む日付の形式を変えるだけなら、標準の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日土曜日
![Page 21: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/21.jpg)
時間粒度の設定スケジュールの時間単位の変更
PresetのtimeResolutionで変更可能
1 var preset = Sch.preset.Manager.getPreset('hourAndDay');2 preset.timeResolution = {3 unit: "MINUTE",4 increment: 105 };6 Sch.preset.Manager.registerPreset('myHourAndDay', preset);
13年4月13日土曜日
![Page 22: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/22.jpg)
EventEditor
Sch.plugin.EventEditor
スケジュールの入力・変更用エディタのプラグイン
設定すると新しい予定を作ったり、既存の予定をダブルクリックすると表示される。
13年4月13日土曜日
![Page 23: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/23.jpg)
EventEditor
かなり自由にカスタマイズ可能
EventTypeフィールドによる表示内容切り替えもサポート
13年4月13日土曜日
![Page 24: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/24.jpg)
実際に使ってみるMVCで使ってみる
カスタム項目
日付書式の変更
EventEditorで予定入力
ここからは実際のコードで
13年4月13日土曜日
![Page 25: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/25.jpg)
GitHubhttps://github.com/sunvisor/ExtSchedulerSample
13年4月13日土曜日
![Page 26: Ext Schedulerを使ってみる](https://reader035.vdocuments.mx/reader035/viewer/2022081800/559c07a11a28ab19528b456a/html5/thumbnails/26.jpg)
ご清聴ありがとうございました。
13年4月13日土曜日