Support Forum
I'm a Korean. my English is not very good. I hope you understand.
I bought a calendar for your company, and I am using it for project development.
I tried to create a new EventEditor by extending Cal.window.EventEditor
However, an error occurred. So I checked and I needed to fix many sources in the package.
Could you provide a sample for customization?
We want to develop the module separately without changing the source within the package.
I bought a calendar for your company, and I am using it for project development.
I tried to create a new EventEditor by extending Cal.window.EventEditor
However, an error occurred. So I checked and I needed to fix many sources in the package.
Could you provide a sample for customization?
We want to develop the module separately without changing the source within the package.
What customizations do you need?geungi wrote: Could you provide a sample for customization?
Yes, that's a good point. You do not need to change our sources. You have to extend and override the sources to fit your needs.geungi wrote: We want to develop the module separately without changing the source within the package.
The calendar will be changed in accordance with the scheduler to have maximum of compatibility level. Event editor will be defined on the top level component and the calendar will have "eventEditorConfig". Stay tuned for updates.
For now you can override Cal.container.Month#eventEditorConfig to provide a config or Cal.container.Month#eventEditor to provide your own event editor.
Pavlo Miklashevych
Sr. Frontend Developer
If you need to override our code - this is common sencha approach:
If you need to extend our code - this is common sencha approach:
Ext.define(null, {
override : 'Cal.container.Month',
// you overrides go here
eventEditorConfig : {
}
});
Ext.define('MyMonthContainer', {
extend : 'Cal.container.Month',
// you extensions go here
eventEditorConfig : {
}
});
Pavlo Miklashevych
Sr. Frontend Developer
I created a new window panel as shown below.
How should I put it in eventEditorConfig?
How should I put it in eventEditorConfig?
===================================================================
Ext.define('Ysn.view.salesactivity.modify',{
extend: 'Ext.window.Window',
alias: ['widget.salesactivity_modify', 'plugin.salesactivity_modify'],
xtype: 'salesactivity_modify',
requires: [
],
//controller: 'common-searchPartUser',
title: '활동실적 상세내용',
reference: 'salesactivity-modify',
//id: 'salesactivity-modify',
modal:true,
width: 800,
height: 400,
bodyBorder: false,
resizable: false,
reader: {
type: 'json',
//model: 'Ysn.model.approvalDetail',
rootProperty: ''
},
fieldDefaults: {
labelAlign: 'right',
msgTarget: 'side' ,
allowBlank:true
},
items: [{
xtype: 'fieldset',
scrollable:true,
title: '활동개요',
layout: {
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [
{
colspan: 3,
xtype: 'fieldcontainer',
fieldLabel: '*샘플품목',
labelWidth: 80,
style:{width:'100%'},
combineErrors: true,
layout: 'hbox',
defaults: {
//flex: 1,
hideLabel: true
},
items: [{
xtype: 'textfield',
name: 'smp_cd',
reference: 'smp_cd',
itemId: 'smp_cd',
allowBlank:false,
width: 150,
margin: '0 5 0 0'
},{
xtype: 'textfield',
name: 'item_nm',
reference: 'item_nm',
itemId: 'item_nm',
allowBlank:false,
width:350,
margin: '0 5 0 0'
}, {
xtype: 'hiddenfield',
reference: 'item_cd',
name: 'item_cd',
itemId: 'item_cd'
}, {
xtype: 'hiddenfield',
name: 'mod_usr',
value: loginUser
}, {
iconCls: 'x-fa fa-search',
xtype: 'button',
scale: 'small',
margin: '0 5 0 0',
handler: 'openWindow',
style: {
'border': 'none'
}
}, {
iconCls: 'x-fa fa-remove',
xtype: 'button',
scale: 'small',
handler: 'resetVal',
style: {
'background-color': 'red !important',
'background-image': 'none',
'border': 'none'
}
}]
},
{ fieldLabel: '진행상태', xtype: 'textfield',labelWidth: 100, width: 150, name: 'smp_status', readOnly: true },
{ fieldLabel: '거래처', colspan: 3, xtype: 'textfield',labelWidth: 80, style:{width:'100%'},name: 'cust_nm', readOnly: true},
{ fieldLabel: '고객의뢰번호', xtype: 'textfield',labelWidth: 100, name: 'cust_smp_cd' },
{ fieldLabel: 'EndUser', colspan: 3, xtype: 'textfield',labelWidth: 80, style:{width:'100%'}, name: 'end_user_nm', readOnly: true},
{ fieldLabel: '*접수일', xtype: 'datefield', labelWidth: 100, width:230, format: 'Y-m-d', name: 'smp_rdate'},
{ fieldLabel: '유통구조', xtype: 'textfield',labelWidth: 80, name: 'dstr_type', readOnly: true },
{ fieldLabel: '*샘플유형', labelWidth: 100, name: 'smp_type',
xtype: 'combobox',
reference: 'smp_type',
publishes: 'value',
displayField: 'CODE_NM',
valueField: 'CODE_ID',
emptyText: '선택',
store: {
type: 'Tcode'
},
minChars: 0,
queryMode: 'local',
typeAhead: true
},
{ fieldLabel: '*사업유형', labelWidth: 80, name: 'biz_type',
xtype: 'combobox',
reference: 'biz_type',
publishes: 'value',
displayField: 'CODE_NM',
valueField: 'CODE_ID',
emptyText: '선택',
store: {
type: 'Tcode'
},
minChars: 0,
queryMode: 'local',
typeAhead: true
},
{ fieldLabel: '제품런칭일', xtype: 'datefield', labelWidth: 100, width:230, format: 'Y-m-d', name: 'prdt_rcdate'},
{ fieldLabel: '영업담당', xtype: 'textfield',labelWidth: 80, name: 'user_nm', readOnly: true },
{ fieldLabel: '양산가능성', colspan: 2, labelWidth: 100, name: 'prdt_psblt',
xtype: 'combobox',
reference: 'prdt_psblt',
publishes: 'value',
displayField: 'CODE_NM',
valueField: 'CODE_ID',
emptyText: '선택',
store: {
type: 'Tcode'
},
minChars: 0,
queryMode: 'local',
typeAhead: true
},
{ fieldLabel: '필름전달예정일', xtype: 'datefield', labelWidth: 100, width:230, format: 'Y-m-d', name: 'film_fdate'},
{ fieldLabel: '매출조직', xtype: 'textfield',labelWidth: 80, name: 'dept_nm', readOnly: true},
{ fieldLabel: '의뢰접수담당', colspan: 2, xtype: 'textfield',labelWidth: 100, name: 'ruser_nm', readOnly: true},
{ fieldLabel: '*완료요청일', xtype: 'datefield', labelWidth: 100, width:230, format: 'Y-m-d', name: 'cmpt_rdate',allowBlank:false},
{ fieldLabel: '금형번호', xtype: 'textfield',labelWidth: 80, name: 'mold_no'},
{
xtype: 'fieldcontainer',
fieldLabel: '*제작의뢰수량',
colspan: 2,
labelWidth: 100,
combineErrors: true,
layout: 'hbox',
defaults: {
//flex: 1,
hideLabel: true
},
items: [{ xtype: 'numberfield', minValue:1, width:150, name: 'smp_rqty', allowBlank:false, margin: '0 5 0 0'},
{ xtype: 'label', html: '<b>+</b>', margin: '6 5 0 0'},
{ xtype: 'numberfield', minValue:1, width:150, name: 'smp_rqty_extra', allowBlank:false}]
},
{ fieldLabel: '제작의뢰일', xtype: 'datefield', labelWidth: 100, width:230, format: 'Y-m-d', name: 'prdt_rdate',allowBlank:false},
{ fieldLabel: '특이사항', rowspan:2, colspan:3, xtype: 'textareafield', labelWidth: 80, name: 'smp_sumry', style:{width:'100%'}},
{ fieldLabel: '배송(선적)일', xtype: 'datefield', labelWidth: 100, width:230, format: 'Y-m-d', name: 'ship_pdate',allowBlank:false},
{
xtype: 'fieldcontainer',
fieldLabel: '*기준통화',
labelWidth: 100,
combineErrors: true,
layout: 'hbox',
defaults: {
//flex: 1,
hideLabel: true
},
items: [{ xtype: 'button', text:'통화'}]
}
]
},{
xtype: 'fieldset',
scrollable:true,
title: '제작 정보',
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [
{ fieldLabel: '제작담당', xtype: 'textfield',labelWidth: 100, name: 'prdt_cuser_nm', readOnly: true },
{ fieldLabel: '제작승인일', xtype: 'datefield', labelWidth: 100, format: 'Y-m-d', name: 'prdt_adate', readOnly: true},
{ fieldLabel: '완료예정일', xtype: 'datefield', labelWidth: 100, format: 'Y-m-d', name: 'prdt_pdate', readOnly: true},
{ fieldLabel: '제작수량', xtype: 'numberfield', minValue:1, labelWidth:100, name: 'smp_qty', allowBlank:false, readOnly: true},
{ fieldLabel: '사양확정일', xtype: 'datefield', labelWidth: 100, format: 'Y-m-d', name: 'film_rdate', readOnly: true},
{ fieldLabel: '제작완료일', xtype: 'datefield', labelWidth: 100, format: 'Y-m-d', name: 'prdt_cdate', readOnly: true},
{ fieldLabel: '제작지시사항', colspan:3, xtype: 'textareafield', labelWidth: 100, name: 'prdt_cmt', style:{width:'100%'}}
]
},{
xtype: 'fieldset',
scrollable:true,
title: '영업관련자료',
layout: {
type: 'table',
columns: 1,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [
{
xtype: 'fieldcontainer',
fieldLabel: '첨부파일',
labelWidth: 80,
combineErrors: true,
reference: 'attach_grp1',
layout: 'column',
defaults: {
//flex: 1,
hideLabel: true
},
items: [{
xtype: 'label',
reference: 'attachFile1',
name: 'attachFile1',
margin: '0 5 0 0'
},{
iconCls: 'x-fa fa-plus',
xtype: 'button',
scale: 'small',
handler: 'itemAdd',
style: {
/* 'background-color': 'red !important',
'background-image': 'none',
'border': 'none'*/
},
margin: '0 5 0 0'
},{
iconCls: 'x-fa fa-minus',
xtype: 'button',
scale: 'small',
handler: 'itemRemove',
style: {
/* 'background-color': 'red !important',
'background-image': 'none',
'border': 'none'*/
}
}]
}
]
},{
xtype: 'fieldset',
scrollable:true,
title: '제작관련자료',
layout: {
type: 'table',
columns: 1,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [
{
xtype: 'fieldcontainer',
fieldLabel: '첨부파일',
labelWidth: 80,
combineErrors: true,
reference: 'attach_grp1',
layout: 'column',
defaults: {
//flex: 1,
hideLabel: true
},
items: [{
xtype: 'label',
reference: 'attachFile1',
name: 'attachFile1',
margin: '0 5 0 0'
},{
iconCls: 'x-fa fa-plus',
xtype: 'button',
scale: 'small',
handler: 'itemAdd',
style: {
/* 'background-color': 'red !important',
'background-image': 'none',
'border': 'none'*/
},
margin: '0 5 0 0'
},{
iconCls: 'x-fa fa-minus',
xtype: 'button',
scale: 'small',
handler: 'itemRemove',
style: {
/* 'background-color': 'red !important',
'background-image': 'none',
'border': 'none'*/
}
}]
}
]
},{
xtype: 'fieldset',
scrollable:true,
title: '샘플요청관련자료',
layout: {
type: 'table',
columns: 1,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [
{
xtype: 'fieldcontainer',
fieldLabel: '첨부파일',
labelWidth: 80,
combineErrors: true,
reference: 'attach_grp1',
layout: 'column',
defaults: {
//flex: 1,
hideLabel: true
},
items: [{
xtype: 'label',
reference: 'attachFile1',
name: 'attachFile1',
margin: '0 5 0 0'
},{
iconCls: 'x-fa fa-plus',
xtype: 'button',
scale: 'small',
handler: 'itemAdd',
style: {
/* 'background-color': 'red !important',
'background-image': 'none',
'border': 'none'*/
},
margin: '0 5 0 0'
},{
iconCls: 'x-fa fa-minus',
xtype: 'button',
scale: 'small',
handler: 'itemRemove',
style: {
/* 'background-color': 'red !important',
'background-image': 'none',
'border': 'none'*/
}
}]
}
]
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
defaults: {
minWidth: 100
},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: '저장', margin: '5 5 5 -10',
listeners: {click : 'onSubmit'}
}
]
}]
});
You don't need our default editor. You may turn it off and implement your own.
1. Define the override and require somewhere in your app.
2. Implement your editor class
1. Define the override and require somewhere in your app.
Ext.define('Ysn.MonthContainerOverride', {
override : 'Cal.container.Month',
getEventEditor : function (justCheck) {
if (!justCheck && !this.eventEditor) {
this.eventEditor = Ext.create(Ext.apply({
// HERE IS YOUR EDITOR XTYPE (ALIAS)
xtype : 'salesactivity_modify'
}, this.eventEditorConfig));
}
return this.eventEditor;
}
});
Ext.define('Ysn.view.salesactivity.Editor', {
extend : 'Ext.window.Window',
alias : ['widget.salesactivity_modify'],
// IMPLEMENT THIS METHOD
showForEvent : function() {
this.show();
},
// USE HIDE ACTION
closeAction : 'hide'
/**
HERE IS YOUR EDITOR CODE FROM Ysn.view.salesactivity.modify
*/
Pavlo Miklashevych
Sr. Frontend Developer