を使ってみる13年4月13日土曜日
1 Ext.create(My.person.Model, {        2     name:    Hisashi Nakamura,        3     company: Xenophy CO.,LTD,        4   ...
Mats Bryntse13年4月13日土曜日
の製品13年4月13日土曜日
Ext Scheduler              スケジュールを表示・入力              ドラッグで移動・リサイズ              もちろんクロスブラウザー対応              Sencha Touch用には...
基本的なこと              二つのストアが必要              resourceStore               人物・会議室など              eventStore               行事・予...
resorceStore                  Sch.data.ResourceStore                  Name: リソースの名前              1 var resourceStore = Ext...
eventStore              ResourceId: リソースのID              Name: イベントの名前              StartDate: 開始日時              EndDate: ...
eventStore          2   ResourceId: リソースのID          1 var eventStore = Ext.create(Sch.data.EventStore, {                d...
viewPreset              スケジュールの表示方法を指定する              コンフィグオプション              Schedulerはヘッダが2段になって              いて、それぞれの表示...
viewPreset              weekAndDay              weekAndMonth              monthAndYear              year              week...
viewPreset13年4月13日土曜日
viewPreset              Presetという通り、これらは事前              に設定されたコンフィグオプション              のかたまり              自分で定義したコンフィグオプショ ...
Sch.panelSchedulerGrid         1 Ext.create(Sch.panel.SchedulerGrid, {         2     width       : 600,         3     heig...
Sch.panelSchedulerGrid         1 Ext.create(Sch.panel.SchedulerGrid, {         2     width       : 600,         3     heig...
日本語使える?              使えます。              Ext JS自体がlocaleファイルを読              み込むことでローカライズできます              ext/locale/ext-la...
日本語使える?              使えます。                        日本語にはなったが              Ext JS自体がlocaleファイルを読              み込むことでローカライズでき...
表示のカスタマイズ              Sch.preset.Managerの              registerPresetメソッドで定義              日付の書式も設定できる              多岐にわたる...
表示のカスタマイズ               1 Sch.preset.Manager.registerPreset("dayNightShift", {                2     timeColumnWidth : 35, ...
そこで盗む              日付の形式を変えるだけなら、標準              のviewPresetを取得して、カスタ              マイズし、別な名前で登録してあげ              ればよい     ...
時間粒度の設定                スケジュールの時間単位の変更                PresetのtimeResolutionで変更                可能       1   var preset = Sch...
EventEditor              Sch.plugin.EventEditor              スケジュールの入力・変更用エディ              タのプラグイン              設定すると新しい予定...
EventEditor              かなり自由にカスタマイズ可能              EventTypeフィールドによる表示              内容切り替えもサポート13年4月13日土曜日
実際に使ってみる              MVCで使ってみる              カスタム項目              日付書式の変更              EventEditorで予定入力              ここからは実...
GitHub              https://github.com/sunvisor/ExtSchedulerSample13年4月13日土曜日
ご清聴ありがとう              ございました。13年4月13日土曜日
Upcoming SlideShare
Loading in …5
×

Ext Schedulerを使ってみる

1,072 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,072
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ext Schedulerを使ってみる

  1. 1. を使ってみる13年4月13日土曜日
  2. 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. 3. Mats Bryntse13年4月13日土曜日
  4. 4. の製品13年4月13日土曜日
  5. 5. Ext Scheduler スケジュールを表示・入力 ドラッグで移動・リサイズ もちろんクロスブラウザー対応 Sencha Touch用にはTouch Schedulerもある13年4月13日土曜日
  6. 6. 基本的なこと 二つのストアが必要 resourceStore 人物・会議室など eventStore 行事・予定13年4月13日土曜日
  7. 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. 8. eventStore ResourceId: リソースのID Name: イベントの名前 StartDate: 開始日時 EndDate: 終了日時13年4月13日土曜日
  9. 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. 10. viewPreset スケジュールの表示方法を指定する コンフィグオプション Schedulerはヘッダが2段になって いて、それぞれの表示単位の組み合 わせがプリセットされている13年4月13日土曜日
  11. 11. viewPreset weekAndDay weekAndMonth monthAndYear year weekAndDayLetter weekDateAndMonth13年4月13日土曜日
  12. 12. viewPreset13年4月13日土曜日
  13. 13. viewPreset Presetという通り、これらは事前 に設定されたコンフィグオプション のかたまり 自分で定義したコンフィグオプショ ンを作成することができる13年4月13日土曜日
  14. 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. 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. 16. 日本語使える? 使えます。 Ext JS自体がlocaleファイルを読 み込むことでローカライズできます ext/locale/ext-lang.ja.js13年4月13日土曜日
  17. 17. 日本語使える? 使えます。 日本語にはなったが Ext JS自体がlocaleファイルを読 み込むことでローカライズできます ext/locale/ext-lang.ja.js13年4月13日土曜日
  18. 18. 表示のカスタマイズ Sch.preset.Managerの registerPresetメソッドで定義 日付の書式も設定できる 多岐にわたるオプション13年4月13日土曜日
  19. 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. 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. 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. 22. EventEditor Sch.plugin.EventEditor スケジュールの入力・変更用エディ タのプラグイン 設定すると新しい予定を作ったり、 既存の予定をダブルクリックすると 表示される。13年4月13日土曜日
  23. 23. EventEditor かなり自由にカスタマイズ可能 EventTypeフィールドによる表示 内容切り替えもサポート13年4月13日土曜日
  24. 24. 実際に使ってみる MVCで使ってみる カスタム項目 日付書式の変更 EventEditorで予定入力 ここからは実際のコードで13年4月13日土曜日
  25. 25. GitHub https://github.com/sunvisor/ExtSchedulerSample13年4月13日土曜日
  26. 26. ご清聴ありがとう ございました。13年4月13日土曜日

×