Your SlideShare is downloading. ×
  • Like
Ext Schedulerを使ってみる
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ext Schedulerを使ってみる

  • 484 views
Published

SenchaUG 勉強会 第7回@大阪での発表の資料です。 …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
484
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 Bryntse13年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 weekDateAndMonth13年4月13日土曜日
  • 12. viewPreset13年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.js13年4月13日土曜日
  • 17. 日本語使える? 使えます。 日本語にはなったが Ext JS自体がlocaleファイルを読 み込むことでローカライズできます ext/locale/ext-lang.ja.js13年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/ExtSchedulerSample13年4月13日土曜日
  • 26. ご清聴ありがとう ございました。13年4月13日土曜日