Más contenido relacionado
Ext Schedulerを使ってみる
- 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日土曜日
- 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日土曜日
- 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日土曜日