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