Ext Schedulerを使ってみる

を使ってみる

13年4月13日土曜日

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 });


http://www.sunvisor.net/

http://www.sunvisor.net/

Mats Bryntse


の製品


Ext Scheduler

スケジュールを表示・入力

ドラッグで移動・リサイズ

もちろんクロスブラウザー対応

Sencha Touch用にはTouch Schedulerもある


基本的なこと二つのストアが必要

resourceStore

人物・会議室など

eventStore

行事・予定


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 });


eventStore

ResourceId: リソースのID

Name: イベントの名前

StartDate: 開始日時

EndDate: 終了日時


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 });


viewPreset

スケジュールの表示方法を指定するコンフィグオプション

Schedulerはヘッダが2段になっていて、それぞれの表示単位の組み合わせがプリセットされている


viewPreset

weekAndDay

weekAndMonth

monthAndYear

year

weekAndDayLetter

weekDateAndMonth


viewPreset


viewPreset

Presetという通り、これらは事前に設定されたコンフィグオプションのかたまり

自分で定義したコンフィグオプションを作成することができる


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 });


日本語使える？使えます。

Ext JS自体がlocaleファイルを読み込むことでローカライズできます

ext/locale/ext-lang.ja.js


日本語使える？使えます。

Ext JS自体がlocaleファイルを読み込むことでローカライズできます

ext/locale/ext-lang.ja.js

日本語にはなったが


表示のカスタマイズSch.preset.ManagerのregisterPresetメソッドで定義

日付の書式も設定できる

多岐にわたるオプション


表示のカスタマイズ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 });

多岐にわたりすぎ(;́д｀)


そこで盗む日付の形式を変えるだけなら、標準のviewPresetを取得して、カスタマイズし、別な名前で登録してあげればよい

1 var preset = Sch.preset.Manager.getPreset('hourAndDay');　2 preset.headerConfig.top.dateFormat = 'Y年m月d日';3 Sch.preset.Manager.registerPreset('myHourAndDay', preset);　


時間粒度の設定スケジュールの時間単位の変更

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);


EventEditor

Sch.plugin.EventEditor

スケジュールの入力・変更用エディタのプラグイン

設定すると新しい予定を作ったり、既存の予定をダブルクリックすると表示される。


EventEditor

かなり自由にカスタマイズ可能

EventTypeフィールドによる表示内容切り替えもサポート


実際に使ってみるMVCで使ってみる

カスタム項目

日付書式の変更

EventEditorで予定入力

ここからは実際のコードで


GitHubhttps://github.com/sunvisor/ExtSchedulerSample


https://github.com/sunvisor/ExtSchedulerSample

https://github.com/sunvisor/ExtSchedulerSample

ご清聴ありがとうございました。


Ext Schedulerを使ってみる

Technology

Transcript of Ext Schedulerを使ってみる