1
|
// COLUMN
|
2
|
Ext.define('MinovaUtil.com.column.MinovaStoreColumn', {
|
3
|
extend: 'Ext.grid.column.Column',
|
4
|
alias: ['widget.minovastorecolumn'],
|
5
|
requires: ['Ext.XTemplate'],
|
6
|
alternateClassName: 'Ext.grid.TemplateColumn',
|
7
|
initComponent: function () {
|
8
|
this.displayField = this.displayField
|
9
|
? this.displayField
|
10
|
: 'desc';
|
11
|
this.valueField = this.valueField ? this.valueField : 'code';
|
12
|
this.callParent(arguments);
|
13
|
},
|
14
|
defaultRenderer: function (value) {
|
15
|
if (typeof(this.store) !== 'object') {
|
16
|
this.store = Ext.data.StoreManager.lookup(this.store);
|
17
|
}
|
18
|
var idx = this.store.findExact(this.valueField, value);
|
19
|
if (this.store.getAt(idx)) {
|
20
|
var result = this.store.getAt(idx).get(this.displayField);
|
21
|
value = result ? result : value;
|
22
|
}
|
23
|
return value;
|
24
|
}
|
25
|
});
|
26
|
Ext.define('MinovaUtil.com.column.MinovaDateColumn', {
|
27
|
extend: 'Ext.grid.column.Column',
|
28
|
alias: ['widget.minovadatecolumn'],
|
29
|
requires: ['Ext.XTemplate'],
|
30
|
alternateClassName: 'Ext.grid.TemplateColumn',
|
31
|
initComponent: function () {
|
32
|
// var a = arguments[0]
|
33
|
// a.format = a.hasOwnProperty('format')
|
34
|
// ? a.format
|
35
|
// : MinovaUtil.SESSIONS.APPSETINGS.dateFormat;
|
36
|
// a.submitFormat = a.hasOwnProperty('submitFormat')
|
37
|
// ? a.submitFormat
|
38
|
// : MinovaUtil.SESSIONS.APPSETINGS.dateFormatSubmit;
|
39
|
|
40
|
this.format = this.format
|
41
|
? this.format
|
42
|
: MinovaUtil.SESSIONS.APPSETINGS.dateFormat;
|
43
|
this.submitFormat = this.submitFormat
|
44
|
? this.submitFormat
|
45
|
: MinovaUtil.SESSIONS.APPSETINGS.dateFormatSubmit;
|
46
|
this.callParent(arguments);
|
47
|
},
|
48
|
defaultRenderer: function (value) {
|
49
|
try {
|
50
|
var val = Ext.Date.format(Ext.Date.parse(value,
|
51
|
MinovaUtil.SESSIONS.APPSETINGS.dateFormatSubmit),
|
52
|
MinovaUtil.SESSIONS.APPSETINGS.dateFormat);
|
53
|
if (val == '')
|
54
|
val = Ext.Date
|
55
|
.format(
|
56
|
Ext.Date
|
57
|
.parse(
|
58
|
value,
|
59
|
MinovaUtil.SESSIONS.APPSETINGS.dateFormatSubmitLong),
|
60
|
MinovaUtil.SESSIONS.APPSETINGS.dateFormatLong);
|
61
|
} catch (e) {
|
62
|
}
|
63
|
|
64
|
return val;
|
65
|
}
|
66
|
});
|
67
|
// DATA
|
68
|
Ext.define('MinovaUtil.com.data.MinovaReaderGrid', {
|
69
|
extend: 'Ext.data.reader.Json',
|
70
|
alias: 'reader.dynamicReaderGrid',
|
71
|
alternateClassName: 'Ext.data.reader.DynamicReaderGrid',
|
72
|
readRecords: function (data) {
|
73
|
var data = data.data;
|
74
|
if (data.length > 0) {
|
75
|
var item = data[0];
|
76
|
var hiddenColumns = this.hiddenColumns || [];
|
77
|
var fields = [];
|
78
|
var columns = [];
|
79
|
var p;
|
80
|
for (p in item) {
|
81
|
if (p && p != undefined) {
|
82
|
var col = {
|
83
|
xtype: 'gridcolumn',
|
84
|
text: p,
|
85
|
dataIndex: p,
|
86
|
hidden: Ext.Array.contains(hiddenColumns, p)
|
87
|
};
|
88
|
if (!this.isOverview) {
|
89
|
col.editor = {xtype: 'textfield'}
|
90
|
}
|
91
|
fields.push({name: p});
|
92
|
columns.push(col);
|
93
|
}
|
94
|
}
|
95
|
data.metaData = { fields: fields, columns: columns };
|
96
|
}
|
97
|
return this.callParent([data]);
|
98
|
}
|
99
|
});
|
100
|
Ext.define('MinovaUtil.com.data.MinovaReaderGri__d2', {
|
101
|
extend: 'Ext.data.reader.Json',
|
102
|
alias: 'reader.dynamicReaderGrid2',
|
103
|
alternateClassName: 'Ext.data.reader.DynamicReaderGrid2',
|
104
|
//prefix:undefined,
|
105
|
readRecords: function (records) {
|
106
|
//Ext.global.console.log(this)
|
107
|
var pre = this.prefix !== undefined ? this.prefix : '';
|
108
|
var datas = records.data;
|
109
|
|
110
|
if (pre === '')return this.callParent([datas]);
|
111
|
|
112
|
// build field with prefix
|
113
|
var datax = [];
|
114
|
Ext.each(datas, function (data) {
|
115
|
var txt = '';
|
116
|
for (var field in data) {
|
117
|
txt += pre + field + ':' + Ext.encode(data[field]) + ',';
|
118
|
}
|
119
|
txt = '{' + txt.substr(1, txt.length - 1) + '}';
|
120
|
datax.push(Ext.decode(txt));
|
121
|
});
|
122
|
return this.callParent([datax]);
|
123
|
}
|
124
|
});
|
125
|
Ext.define('MinovaUtil.com.data.MinovaReaderCombo', {
|
126
|
extend: 'Ext.data.reader.Json',
|
127
|
alias: 'reader.dynamicReaderCombo',
|
128
|
alternateClassName: 'Ext.data.reader.DynamicReaderCombo',
|
129
|
readRecords: function (data) {
|
130
|
var data = data.data;
|
131
|
if (data.length > 0) {
|
132
|
var item = data[0];
|
133
|
var fields = [];
|
134
|
var p;
|
135
|
for (p in item) {
|
136
|
if (p && p != undefined) {
|
137
|
fields.push({name: p});
|
138
|
}
|
139
|
}
|
140
|
data.metaData = { fields: fields };
|
141
|
}
|
142
|
return this.callParent([data]);
|
143
|
}
|
144
|
});
|
145
|
// TEMPLATE
|
146
|
Ext.define('MinovaUtil.com.xtype.template.MinovaEmpData', {
|
147
|
extend: 'Ext.form.Panel',
|
148
|
alias: 'widget.minovaempdata',
|
149
|
alternateClassName: 'Ext.form.MinovaEmpData',
|
150
|
layout: 'column',
|
151
|
autoScroll: true,
|
152
|
title: 'Employee Data',
|
153
|
name: 'MainForm',
|
154
|
bodyStyle: 'padding:10px 5px 0',
|
155
|
initComponent: function () {
|
156
|
var me = this;
|
157
|
Ext.applyIf(me, {
|
158
|
items: [
|
159
|
{
|
160
|
xtype: 'container',
|
161
|
columnWidth: 0.5,
|
162
|
border: true,
|
163
|
width: 350,
|
164
|
items: /* PutLeftFieldHere */
|
165
|
[
|
166
|
{
|
167
|
xtype: 'textfield',
|
168
|
name: 'main_emp_type',
|
169
|
fieldLabel: 'Employee Type',
|
170
|
readOnly: true
|
171
|
},
|
172
|
{
|
173
|
xtype: 'textfield',
|
174
|
name: 'main_emp_position',
|
175
|
fieldLabel: 'Position',
|
176
|
readOnly: true
|
177
|
},
|
178
|
{
|
179
|
xtype: 'textfield',
|
180
|
hidden: true,
|
181
|
name: 'main_seq',
|
182
|
fieldLabel: 'Seq',
|
183
|
readOnly: true,
|
184
|
value: 1
|
185
|
}
|
186
|
]
|
187
|
},
|
188
|
{
|
189
|
xtype: 'container',
|
190
|
columnWidth: 0.5,
|
191
|
border: true,
|
192
|
width: 350,
|
193
|
items: /* PutLeftFieldHere */
|
194
|
[
|
195
|
{
|
196
|
xtype: 'textfield',
|
197
|
name: 'main_emp_job',
|
198
|
fieldLabel: 'Job',
|
199
|
readOnly: true
|
200
|
},
|
201
|
{
|
202
|
xtype: 'textfield',
|
203
|
name: 'main_emp_organization',
|
204
|
fieldLabel: 'Organization',
|
205
|
readOnly: true
|
206
|
}
|
207
|
]
|
208
|
}
|
209
|
]
|
210
|
|
211
|
})
|
212
|
me.callParent(arguments);
|
213
|
},
|
214
|
/**
|
215
|
* load/get employee information
|
216
|
* @param {string} empId
|
217
|
*/
|
218
|
load: function (empId) {
|
219
|
var me = this;
|
220
|
var hasil = false;
|
221
|
MinovaAjaxPost('workflow/LoadDataQuery',
|
222
|
{
|
223
|
paramid: 'pms_get_headerdet',
|
224
|
emp_id: empId,
|
225
|
skarang: Ext.Date.format(new Date(), 'Ymd')
|
226
|
},
|
227
|
function (s) {
|
228
|
hasil = true;
|
229
|
var result = Ext.decode(s.responseText);
|
230
|
var _view = MinovaUtil.WORKFLOW.getViewWorkflow();
|
231
|
_view.down(me.alias[0].replace('widget.', '')).getForm().setValues({
|
232
|
main_emp_type: result.data[0].employee_type_desc,
|
233
|
main_emp_position: result.data[0].position_desc,
|
234
|
main_emp_job: result.data[0].job_desc,
|
235
|
main_emp_organization: result.data[0].organization_desc
|
236
|
});
|
237
|
},
|
238
|
function (f) {
|
239
|
});
|
240
|
return hasil;
|
241
|
}
|
242
|
});
|
243
|
// XTYPE
|
244
|
/**
|
245
|
* Komponen kustom untuk combo
|
246
|
*
|
247
|
* @example
|
248
|
* Ext.widget({
|
249
|
* xtype:'panel',
|
250
|
* renderTo:Ext.getBody(),
|
251
|
* width:100,
|
252
|
* height:100,
|
253
|
* items:[{
|
254
|
* xtype:'minovacombo',
|
255
|
* fieldName:'Kota asal',
|
256
|
* valueField:'kode',
|
257
|
* displayField:'deskripsi'
|
258
|
* // store... auto store dan auto field
|
259
|
* }]
|
260
|
* })
|
261
|
*/
|
262
|
Ext.define('MinovaUtil.com.xtype.MinovaComboBox', {
|
263
|
extend: 'Ext.form.field.ComboBox',
|
264
|
alias: ['widget.minovacombobox', 'widget.minovacombo'],
|
265
|
tableName: undefined,
|
266
|
tableSelect: undefined,
|
267
|
tableWhere: undefined,
|
268
|
initComponent: function () {
|
269
|
var me = this;
|
270
|
|
271
|
Ext.applyIf(me, {
|
272
|
store: Ext.create('Ext.data.Store', {
|
273
|
fields: [],
|
274
|
listeners: {
|
275
|
'metachange': function (store, meta) {
|
276
|
me.bindStore(store);
|
277
|
this.fields = meta.fields;
|
278
|
}
|
279
|
},
|
280
|
proxy: {
|
281
|
reader: new Ext.create('MinovaUtil.com.data.MinovaReaderCombo', {
|
282
|
type: 'json',
|
283
|
root: 'data'
|
284
|
}),
|
285
|
type: 'rest',
|
286
|
url: '/Workflow/LoadDataQuery'
|
287
|
|
288
|
// /?paramid=get_DataCombo&tn=' + me.tableName || ''
|
289
|
// +'&sf=' + me.tableSelect || '*'
|
290
|
// +'&wc=' + me.tableWhere || ''
|
291
|
// params:{
|
292
|
// paramid:'get_DataCombo',
|
293
|
// tn:me.tableName || '',
|
294
|
// sf:me.tableSelect || ' * ',
|
295
|
// wc:me.tableWhere || ''
|
296
|
// }
|
297
|
}
|
298
|
})
|
299
|
});
|
300
|
me.callParent(arguments);
|
301
|
|
302
|
if (me.tableName)
|
303
|
me.store.load({
|
304
|
params: {
|
305
|
paramid: 'get_DataCombo',
|
306
|
tn: me.tableName || '',
|
307
|
sf: me.tableSelect || ' * ',
|
308
|
wc: me.tableWhere || ''
|
309
|
}
|
310
|
});
|
311
|
|
312
|
}
|
313
|
});
|
314
|
/**
|
315
|
* Komponen kustom untuk numberField
|
316
|
*
|
317
|
* @example
|
318
|
* Ext.widget({
|
319
|
* xtype:'panel',
|
320
|
* renderTo:Ext.getBody(),
|
321
|
* width:100,
|
322
|
* height:100,
|
323
|
* items:[{
|
324
|
* xtype:'minovanumberfield',
|
325
|
* fieldName:'Quantity'
|
326
|
* }]
|
327
|
* })
|
328
|
*/
|
329
|
Ext.define('MinovaUtil.com.xtype.MinovaFloatField', {
|
330
|
extend: 'Ext.form.field.Number',
|
331
|
alias: 'widget.minovafloatfield',
|
332
|
hideTrigger: true,
|
333
|
|
334
|
isValid: function () {
|
335
|
var b = this, a = b.disabled, c = b.forceValidation || !a;
|
336
|
//return c ? b.validateValue(b.processRawValue(b.getRawValue())) : a
|
337
|
return c ? b.validateValue(b.processRawValue(b.getValue())) : a
|
338
|
},
|
339
|
|
340
|
setValue: function (v) {
|
341
|
this.setRawValue(this.getFormattedValue(v));
|
342
|
},
|
343
|
getValue: function () {
|
344
|
var val = this.removeFormat(this.getRawValue());
|
345
|
this.value = val;
|
346
|
return val;
|
347
|
},
|
348
|
getSubmitValue: function () {
|
349
|
return this.removeFormat(this.getRawValue());
|
350
|
},
|
351
|
removeFormat: function (v) {
|
352
|
if (Ext.isEmpty(v))
|
353
|
return v;
|
354
|
else {
|
355
|
v = v.replace(Ext.util.Format.currencySign, '');
|
356
|
v = v.replace(new RegExp('[' + Ext.util.Format.thousandSeparator + ']', 'g'), '');
|
357
|
return v;
|
358
|
}
|
359
|
},
|
360
|
onFocus: function () {
|
361
|
//if (!this.readOnly)
|
362
|
this.setRawValue(this.removeFormat(this.getRawValue()));
|
363
|
},
|
364
|
onBlur: function () {
|
365
|
this.setRawValue(this.getFormattedValue(this.getValue()));
|
366
|
},
|
367
|
getFormattedValue: function (v) {
|
368
|
return Ext.util.Format.number(v, '0,000.00');
|
369
|
}
|
370
|
});
|
371
|
/**
|
372
|
* Komponen kustom untuk numberField
|
373
|
*
|
374
|
* @example
|
375
|
* Ext.widget({
|
376
|
* xtype:'panel',
|
377
|
* renderTo:Ext.getBody(),
|
378
|
* width:100,
|
379
|
* height:100,
|
380
|
* items:[{
|
381
|
* xtype:'minovanumberfield',
|
382
|
* fieldName:'Quantity'
|
383
|
* }]
|
384
|
* })
|
385
|
*/
|
386
|
Ext.define('MinovaUtil.com.xtype.MinovaNumberField', {
|
387
|
extend: 'Ext.form.field.Number',
|
388
|
alias: 'widget.minovanumberfield',
|
389
|
hideTrigger: true,
|
390
|
|
391
|
isValid: function () {
|
392
|
var b = this, a = b.disabled, c = b.forceValidation || !a;
|
393
|
//return c ? b.validateValue(b.processRawValue(b.getRawValue())) : a
|
394
|
return c ? b.validateValue(b.processRawValue(b.getValue())) : a
|
395
|
},
|
396
|
|
397
|
setValue: function (v) {
|
398
|
this.setRawValue(this.getFormattedValue(v));
|
399
|
},
|
400
|
getValue: function () {
|
401
|
var val = this.removeFormat(this.getRawValue());
|
402
|
this.value = val;
|
403
|
return val;
|
404
|
},
|
405
|
getSubmitValue: function () {
|
406
|
return this.removeFormat(this.getRawValue());
|
407
|
},
|
408
|
removeFormat: function (v) {
|
409
|
if (Ext.isEmpty(v))
|
410
|
return v;
|
411
|
else {
|
412
|
v = v.replace(Ext.util.Format.currencySign, '');
|
413
|
v = v.replace(new RegExp('[' + Ext.util.Format.thousandSeparator + ']', 'g'), '');
|
414
|
return v;
|
415
|
}
|
416
|
},
|
417
|
onFocus: function () {
|
418
|
//if (!this.readOnly)
|
419
|
this.setRawValue(this.removeFormat(this.getRawValue()));
|
420
|
},
|
421
|
onBlur: function () {
|
422
|
this.setRawValue(this.getFormattedValue(this.getValue()));
|
423
|
},
|
424
|
getFormattedValue: function (v) {
|
425
|
return Ext.util.Format.number(v, '0,000');
|
426
|
}
|
427
|
});
|
428
|
Ext.define('MinovaUtil.com.xtype.MinovaForm', {
|
429
|
extend: 'Ext.form.Panel',
|
430
|
alias: 'widget.minovaform',
|
431
|
alternateClassName: 'Ext.form.MinovaForm',
|
432
|
autoScroll: true,
|
433
|
bodySyle: 'padding:10px 5px 0',
|
434
|
constructor: function (cfg) {
|
435
|
var me = this;
|
436
|
},
|
437
|
initComponent: function () {
|
438
|
var me = this;
|
439
|
Ext.applyIf(me, {});
|
440
|
me.callParent(arguments);
|
441
|
},
|
442
|
reconfigureWORKFLOW: function () {
|
443
|
var me = this;
|
444
|
var bizprocId = MinovaUtil.WORKFLOW.getBizprocId();
|
445
|
var thisName = this.name;
|
446
|
|
447
|
var generateXtype = {
|
448
|
datefield: Ext.widget({xtype: 'datefield'}),
|
449
|
textfield: Ext.widget({xtype: 'textfield'}),
|
450
|
nunberfield: Ext.widget({xtype: 'numberfield'}),
|
451
|
combobox: Ext.widget({xtype: 'combobox'}),
|
452
|
boolean: Ext.widget({xtype: 'combobox',
|
453
|
editable: false,
|
454
|
store: [
|
455
|
[ true, 'True' ],
|
456
|
[false, 'False' ]
|
457
|
]
|
458
|
})
|
459
|
};
|
460
|
|
461
|
MinovaUtil.executeParamQuery({
|
462
|
paramid: 'wf_base_auto_load_biz_data',
|
463
|
bizproc_id: bizprocId,
|
464
|
cmp_name: thisName
|
465
|
}, function (s) {
|
466
|
var result = Ext.decode(s.responseText);
|
467
|
var datas = result.data;
|
468
|
me.bizdata = datas;
|
469
|
var fields = [];
|
470
|
Ext.each(datas, function (d) {
|
471
|
var xField = generateXtype[d.ui_type];
|
472
|
fields.push(xField);
|
473
|
});
|
474
|
},
|
475
|
function (f) {
|
476
|
var result = Ext.decode(s.responseText);
|
477
|
});
|
478
|
|
479
|
}
|
480
|
});
|
481
|
Ext.define('MinovaUtil.com.xtype.MinovaWorflowEditor', {
|
482
|
extend: 'Ext.panel.Panel', // 'Ext.AbstractComponent',
|
483
|
// 'Ext.panel.Panel','Ext.window.Window'
|
484
|
alias: ['widget.minovawfeditor'],
|
485
|
initComponent: function () {
|
486
|
// this.layout = 'fit';
|
487
|
this.readOnly = this.readOnly ? this.readOnly : false;
|
488
|
this.autoScroll = true;
|
489
|
this.height = 480;
|
490
|
this.title = this.title ? this.title : 'Workflow editor';
|
491
|
this.html = '<div id="minovaGraphContainer" title="' + this.title
|
492
|
+ '" style="background:url(\'' + mxBasePath
|
493
|
+ '/editors/images/grid.gif\')"></div>';
|
494
|
this.tbar = [
|
495
|
{
|
496
|
xtype: 'button',
|
497
|
hidden: true,
|
498
|
text: 'add Task',
|
499
|
handler: this.addTask
|
500
|
|
501
|
},
|
502
|
{
|
503
|
xtype: 'button',
|
504
|
text: 'Remove',
|
505
|
hidden: true,
|
506
|
handler: this.removeCells
|
507
|
},
|
508
|
'->',
|
509
|
{
|
510
|
xtype: 'cycle',
|
511
|
text: 'layout',
|
512
|
menu: {
|
513
|
// id : 'view-type-menu',
|
514
|
items: [
|
515
|
{
|
516
|
text: 'mxCircleLayout'
|
517
|
},
|
518
|
{
|
519
|
text: 'mxCompactTreeLayout'
|
520
|
},
|
521
|
{
|
522
|
text: 'mxCompositeLayout'
|
523
|
},
|
524
|
{
|
525
|
text: 'mxEdgeLabelLayout'
|
526
|
},
|
527
|
{
|
528
|
text: 'mxFastOrganicLayout'
|
529
|
},
|
530
|
{
|
531
|
text: 'mxGraphLayout'
|
532
|
},
|
533
|
{
|
534
|
text: 'mxHierarchicalLayout'
|
535
|
}
|
536
|
// , {
|
537
|
// text : 'mxParallelEdgeLayout'
|
538
|
// }
|
539
|
// , {
|
540
|
// text : 'mxPartitionLayout'
|
541
|
// },
|
542
|
// {
|
543
|
// text : 'mxStackLayout'
|
544
|
// }
|
545
|
]
|
546
|
},
|
547
|
changeHandler: function (cycleBtn, activeItem) {
|
548
|
// Ext.Msg.alert('Change View', activeItem.text);
|
549
|
try {
|
550
|
switch (activeItem.text) {
|
551
|
case 'mxCircleLayout' :
|
552
|
var layout = new mxCircleLayout(graph);
|
553
|
layout.execute(graph.getDefaultParent());
|
554
|
break;
|
555
|
case 'mxCompactTreeLayout' :
|
556
|
var layout = new mxCompactTreeLayout(graph,
|
557
|
false);
|
558
|
layout.execute(graph.getDefaultParent());
|
559
|
break;
|
560
|
case 'mxCompositeLayout' :
|
561
|
var first = new mxFastOrganicLayout(graph);
|
562
|
var second = new mxParallelEdgeLayout(graph);
|
563
|
var layout = new mxCompositeLayout(graph, [
|
564
|
first, second], first);
|
565
|
layout.execute(graph.getDefaultParent());
|
566
|
break;
|
567
|
case 'mxEdgeLabelLayout' :
|
568
|
var layout = new mxEdgeLabelLayout(graph);
|
569
|
layout.execute(graph.getDefaultParent());
|
570
|
break;
|
571
|
case 'mxFastOrganicLayout' :
|
572
|
var layout = new mxCircleLayout(graph);
|
573
|
layout.execute(graph.getDefaultParent());
|
574
|
break;
|
575
|
case 'mxGraphLayout' :
|
576
|
var layout = new mxFastOrganicLayout(graph);
|
577
|
layout.execute(graph.getDefaultParent());
|
578
|
break;
|
579
|
case 'mxParallelEdgeLayout' :
|
580
|
var layout = new mxParallelEdgeLayout(graph);
|
581
|
layout.execute(graph.getDefaultParent());
|
582
|
break;
|
583
|
case 'mxPartitionLayout' :
|
584
|
var layout = new mxPartitionLayout(graph,
|
585
|
true, 10, 20);
|
586
|
layout.execute(graph.getDefaultParent());
|
587
|
break;
|
588
|
case 'mxStackLayout' :
|
589
|
var layout = new mxStackLayout(graph, false);
|
590
|
layout.execute(graph.getDefaultParent());
|
591
|
break;
|
592
|
case 'mxHierarchicalLayout' :
|
593
|
var layout = new mxHierarchicalLayout(graph);
|
594
|
layout.parallelEdgeSpacing = 100;
|
595
|
layout.moveParent = true;
|
596
|
layout.parentBorder = 100;
|
597
|
layout.intraCellSpacing = 100;
|
598
|
layout.interRankCellSpacing = 100;
|
599
|
layout.interHierarchySpacing = 0;
|
600
|
layout.orientation = mxConstants.DIRECTION_NORTH;
|
601
|
//layout.traverseAncestors = false;
|
602
|
layout.execute(parent);
|
603
|
break;
|
604
|
|
605
|
}
|
606
|
} catch (e) {
|
607
|
}
|
608
|
}
|
609
|
},
|
610
|
{
|
611
|
xtype: 'tbseparator'
|
612
|
},
|
613
|
{
|
614
|
text: 'In',
|
615
|
name: 'zoomin',
|
616
|
handler: function () {
|
617
|
graph.zoomIn();
|
618
|
graph.fit();
|
619
|
}
|
620
|
},
|
621
|
{
|
622
|
text: 'Out',
|
623
|
name: 'zoomout',
|
624
|
handler: function () {
|
625
|
graph.zoomOut();
|
626
|
graph.fit();
|
627
|
}
|
628
|
}
|
629
|
// , {
|
630
|
// text : 'Fit',
|
631
|
// name : 'zoomfit',
|
632
|
// handler : function() {
|
633
|
// graph.fit();
|
634
|
// }
|
635
|
// }
|
636
|
,
|
637
|
{
|
638
|
xtype: 'tbseparator'
|
639
|
},
|
640
|
{
|
641
|
xtype: 'button',
|
642
|
text: 'print',
|
643
|
name: 'print',
|
644
|
handler: this.printPreview
|
645
|
}
|
646
|
]
|
647
|
|
648
|
this.autoScroll = true;
|
649
|
this.listeners = {
|
650
|
afterrender: this.onAfterRender,
|
651
|
resize: this.onResize
|
652
|
}
|
653
|
|
654
|
this.callParent(arguments);
|
655
|
},
|
656
|
printPreview: function () {
|
657
|
var preview = new mxPrintPreview(graph);
|
658
|
preview.print();
|
659
|
},
|
660
|
onAfterRender: function (_this) {
|
661
|
this.main(document.getElementById('minovaGraphContainer'));
|
662
|
},
|
663
|
removeCells: function () {
|
664
|
graph.removeCells();
|
665
|
},
|
666
|
onResize: function () {
|
667
|
try {
|
668
|
graph.sizeDidChange();
|
669
|
} catch (e) {
|
670
|
}
|
671
|
},
|
672
|
|
673
|
addTask: function () {
|
674
|
graph.insertVertex(graph.getDefaultParent(), null, 'Task-' + Ext.id(),
|
675
|
0, 0, 80, 30);
|
676
|
},
|
677
|
main: function (container) {
|
678
|
// Checks if the browser is supported
|
679
|
if (!mxClient.isBrowserSupported()) {
|
680
|
// Displays an error message if the browser is not supported.
|
681
|
// mxUtils.error('Browser is not supported!', 200, false);
|
682
|
alert('Browser is not supported!');
|
683
|
} else {
|
684
|
// // Creates the graph inside the given container
|
685
|
// graph = new mxGraph(container);
|
686
|
// var keyHandler = new mxKeyHandler(graph);
|
687
|
// // keyHandler.bindKey(46, function(evt) {
|
688
|
// // if (graph.isEnabled()) {
|
689
|
// // graph.removeCells();
|
690
|
// // }
|
691
|
// // });
|
692
|
// wfEditor = new mxEditor();
|
693
|
//
|
694
|
// // Enables rubberband selection
|
695
|
//
|
696
|
// new mxRubberband(graph);
|
697
|
// graph.setPanning(true);
|
698
|
// graph.setTooltips(true);
|
699
|
//
|
700
|
// // graph.setConnectable(true);
|
701
|
// // graph.setDropEnabled(true);
|
702
|
// // graph.connectionHandler.setCreateTarget(true);
|
703
|
//
|
704
|
// // Gets the default parent for inserting new cells. This
|
705
|
// // is normally the first child of the root (ie. layer 0).
|
706
|
// var parent = graph.getDefaultParent();
|
707
|
|
708
|
// Enables crisp rendering in SVG
|
709
|
// mxShape.prototype.crisp = true;
|
710
|
|
711
|
// Enables guides
|
712
|
// mxGraphHandler.prototype.guidesEnabled = true;
|
713
|
|
714
|
// Alt disables guides
|
715
|
// mxGuide.prototype.isEnabledForEvent = function(evt) {
|
716
|
// return !mxEvent.isAltDown(evt);
|
717
|
// };
|
718
|
|
719
|
// Enables snapping waypoints to terminals
|
720
|
// mxEdgeHandler.prototype.snapToTerminals = true;
|
721
|
|
722
|
// Enables orthogonal connect preview in IE
|
723
|
// mxConnectionHandler.prototype.movePreviewAway = true;
|
724
|
|
725
|
// Creates the graph inside the given container
|
726
|
graph = new mxGraph(container);
|
727
|
// graph.disconnectOnMove = false;
|
728
|
// graph.foldingEnabled = false;
|
729
|
// graph.cellsResizable = false;
|
730
|
// graph.extendParents = false;
|
731
|
// graph.setConnectable(true);
|
732
|
graph.setAllowDanglingEdges(false);
|
733
|
|
734
|
// Implements perimeter-less connection points as fixed points
|
735
|
// (computed before the edge style).
|
736
|
// graph.view.updateFixedTerminalPoint = function(edge, terminal,
|
737
|
// source, constraint) {
|
738
|
// mxGraphView.prototype.updateFixedTerminalPoint.apply(this,
|
739
|
// arguments);
|
740
|
//
|
741
|
// var pts = edge.absolutePoints;
|
742
|
// var pt = pts[(source) ? 0 : pts.length - 1];
|
743
|
//
|
744
|
// if (terminal != null && pt == null
|
745
|
// && this.getPerimeterFunction(terminal) == null) {
|
746
|
// edge.setAbsoluteTerminalPoint(new mxPoint(this
|
747
|
// .getRoutingCenterX(terminal), this
|
748
|
// .getRoutingCenterY(terminal)),
|
749
|
// source)
|
750
|
// }
|
751
|
// };
|
752
|
|
753
|
// Changes the default edge style
|
754
|
graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
|
755
|
// delete graph.getStylesheet().getDefaultEdgeStyle()['endArrow'];
|
756
|
|
757
|
// Implements the connect preview
|
758
|
graph.connectionHandler.createEdgeState = function (me) {
|
759
|
var edge = graph.createEdge(null, null, null, null, null);
|
760
|
|
761
|
return new mxCellState(this.graph.view, edge, this.graph
|
762
|
.getCellStyle(edge));
|
763
|
};
|
764
|
|
765
|
// Uncomment the following if you want the container
|
766
|
// to fit the size of the graph
|
767
|
// graph.setResizeContainer(true);
|
768
|
|
769
|
// Enables rubberband selection
|
770
|
new mxRubberband(graph);
|
771
|
|
772
|
// Disables basic selection and cell handling
|
773
|
graph.setEnabled(false);
|
774
|
|
775
|
// Gets the default parent for inserting new cells. This
|
776
|
// is normally the first child of the root (ie. layer 0).
|
777
|
var parent = graph.getDefaultParent();
|
778
|
|
779
|
// Enables HTML labels as wrapping is only available for those
|
780
|
graph.htmlLabels = true;
|
781
|
|
782
|
// Disables in-place editing for edges
|
783
|
// graph.isCellEditable = function(cell) {
|
784
|
// return !this.model.isEdge(cell);
|
785
|
// };
|
786
|
|
787
|
// Changes the default vertex style in-place
|
788
|
var style = graph.getStylesheet().getDefaultVertexStyle();
|
789
|
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
790
|
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
791
|
style[mxConstants.STYLE_PERIMETER_SPACING] = 1;// 6;
|
792
|
style[mxConstants.STYLE_ROUNDED] = true;
|
793
|
style[mxConstants.STYLE_SHADOW] = true;
|
794
|
|
795
|
style = graph.getStylesheet().getDefaultEdgeStyle();
|
796
|
style[mxConstants.STYLE_ROUNDED] = true;
|
797
|
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.SegmentConnector;
|
798
|
|
799
|
// Adds cells to the model in a single step
|
800
|
graph.getModel().beginUpdate();
|
801
|
try {
|
802
|
// var v1 = graph.insertVertex(parent, null, '1', 20, 0, 150,
|
803
|
// 80);
|
804
|
// var v2 = graph.insertVertex(parent, null, '2', 20, 50, 150,
|
805
|
// 80);
|
806
|
// var v3 = graph
|
807
|
// .insertVertex(parent, null, '3', 20, 100, 150, 80);
|
808
|
// var v4 = graph
|
809
|
// .insertVertex(parent, null, '4', 120, 50, 150, 80);
|
810
|
// var v5 = graph.insertVertex(parent, null, '5', 120, 100, 150,
|
811
|
// 80);
|
812
|
//
|
813
|
// var e1 = graph.insertEdge(parent, null, '', v1, v2);
|
814
|
// var e2 = graph.insertEdge(parent, null, '', v2, v3);
|
815
|
// var e3 = graph.insertEdge(parent, null, '', v2, v4);
|
816
|
// var e4 = graph.insertEdge(parent, null, '', v4, v5);
|
817
|
// var e5 = graph.insertEdge(parent, null, '', v3, v5);
|
818
|
} finally {
|
819
|
// Updates the display
|
820
|
graph.getModel().endUpdate();
|
821
|
}
|
822
|
|
823
|
}
|
824
|
}
|
825
|
});
|
826
|
/**
|
827
|
* Komponen kustom untuk grid, sudah disediakan tombol navigator dll
|
828
|
*
|
829
|
* @example
|
830
|
* Ext.widget({
|
831
|
* xtype:'panel',
|
832
|
* renderTo:Ext.getBody(),
|
833
|
* width:100,
|
834
|
* height:100,
|
835
|
* items:[{
|
836
|
* xtype:'MinovaGrid'
|
837
|
* }]
|
838
|
* })
|
839
|
*/
|
840
|
Ext.define('MinovaUtil.com.xtype.MinovaGrid', {
|
841
|
extend: 'Ext.grid.Panel',
|
842
|
//requires:[''],
|
843
|
alias: 'widget.minovagrid',
|
844
|
alternateClassName: 'Ext.grid.MinovaGrid',
|
845
|
autoScroll: true,
|
846
|
|
847
|
columns: [],
|
848
|
|
849
|
hiddenColumns: undefined,
|
850
|
isOverview: false,
|
851
|
|
852
|
onAddAction: undefined,
|
853
|
onEditAction: undefined,
|
854
|
onCopyAction: undefined,
|
855
|
onRemoveAction: undefined,
|
856
|
|
857
|
fieldSeq: undefined,
|
858
|
fieldFlag: undefined,
|
859
|
vcrud: 1,
|
860
|
|
861
|
initComponent: function () {
|
862
|
var me = this;
|
863
|
Ext.applyIf(me, {
|
864
|
title: me.title || undefined,
|
865
|
onAddAction: me.onAddAction || undefined,
|
866
|
onEditAction: me.onEditAction || undefined,
|
867
|
onCopyAction: me.onCopyAction || undefined,
|
868
|
onRemoveAction: me.onRemoveAction || undefined,
|
869
|
isOverview: me.isOverview || false, //default false
|
870
|
fieldSeq: me.fieldSeq || 'seq', // default seq
|
871
|
fieldFlag: me.fieldFlag || 'data_flag', // default seq
|
872
|
vcrud: me.vcrud || undefined,
|
873
|
plugins: [
|
874
|
{ptype: 'minova.columnrenderer'},
|
875
|
{ptype: 'minova.gridcrud'}
|
876
|
],
|
877
|
store: me.store !== undefined ? me.store : Ext.create('Ext.data.Store', {
|
878
|
fields: [],
|
879
|
listeners: {
|
880
|
'metachange': function (store, meta) {
|
881
|
if (!this.isOverview)
|
882
|
me.reconfigure(store, meta.columns);
|
883
|
}
|
884
|
},
|
885
|
proxy: {
|
886
|
reader: Ext.create('MinovaUtil.com.data.MinovaReaderGrid', {
|
887
|
hiddenColumns: me.hiddenColumns,
|
888
|
isOverview: me.isOverview,
|
889
|
|
890
|
type: 'json',
|
891
|
root: 'data'
|
892
|
}),
|
893
|
type: 'rest',
|
894
|
url: '/Workflow/LoadDataQuery',
|
895
|
async: false
|
896
|
}
|
897
|
}),
|
898
|
dockedItems: [
|
899
|
{
|
900
|
xtype: 'toolbar',
|
901
|
name: 'crud',
|
902
|
dock: 'top',
|
903
|
items: [
|
904
|
{
|
905
|
xtype: 'button',
|
906
|
text: 'Add',
|
907
|
name: 'add',
|
908
|
action: 'CRUDaddRecord'
|
909
|
},
|
910
|
{
|
911
|
xtype: 'button',
|
912
|
text: 'Copy',
|
913
|
name: 'copy',
|
914
|
action: 'CRUDcopyRecord'
|
915
|
},
|
916
|
{
|
917
|
xtype: 'button',
|
918
|
text: 'Delete',
|
919
|
name: 'remove',
|
920
|
action: 'CRUDremoveRecord'
|
921
|
}
|
922
|
]
|
923
|
}
|
924
|
]
|
925
|
});
|
926
|
if (!me.isOverview)
|
927
|
me.plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1}))
|
928
|
me.callParent(arguments);
|
929
|
},
|
930
|
/**
|
931
|
* gunakan method ini untuk mengkonfigurasikan grid sebagai ESS view (konfigurasi by table)
|
932
|
*/
|
933
|
reconfigureWORKFLOW: function () {
|
934
|
var me = this;
|
935
|
var bizprocId = MinovaUtil.WORKFLOW.getBizprocId();
|
936
|
var thisName = this.name;
|
937
|
|
938
|
MinovaUtil.executeParamQuery({
|
939
|
paramid: 'wf_base_auto_load_biz_data',
|
940
|
bizproc_id: bizprocId,
|
941
|
cmp_name: thisName
|
942
|
}, function (s) {
|
943
|
function buildInitRecord(datas) {
|
944
|
// build initRecord defaultValue
|
945
|
var t = '';
|
946
|
Ext.each(datas, function (d) {
|
947
|
if (!Ext.isEmpty(d.default_value)) {
|
948
|
var val = Ext.decode(d.default_value, true) ? Ext.decode(d.default_value) : d.default_value;
|
949
|
t += d.field_id + ':"' + val + '",';
|
950
|
}
|
951
|
});
|
952
|
t = '{' + t.substring(0, t.length - 1) + '}';
|
953
|
return Ext.decode(t);
|
954
|
}
|
955
|
|
956
|
function buildColumns(datas) {
|
957
|
var columns = [];
|
958
|
Ext.each(datas, function (d) {
|
959
|
var columnXtype = {
|
960
|
textfield: 'gridcolumn',
|
961
|
datefield: 'minovadatecolumn',
|
962
|
numberfield: 'numbercolumn'
|
963
|
}
|
964
|
|
965
|
// column
|
966
|
var basic
|
967
|
col =
|
968
|
{
|
969
|
xtype: columnXtype[d.ui_type],
|
970
|
dataIndex: d.field_id,
|
971
|
text: d.header_label,
|
972
|
hidden: d.is_visible !== '1'
|
973
|
}
|
974
|
|
975
|
// editor
|
976
|
var basic
|
977
|
ed = {
|
978
|
xtype: d.ui_type,
|
979
|
readOnly: d.is_readonly == '1',
|
980
|
allowBlank: d.is_key == '1' ? false : true
|
981
|
}
|
982
|
|
983
|
// setup by config
|
984
|
if (!me.isOverview) col.editor = ed;
|
985
|
|
986
|
// build columns
|
987
|
columns.push(col);
|
988
|
});
|
989
|
return columns;
|
990
|
}
|
991
|
|
992
|
function buildFields(datas) {
|
993
|
var fields = [];
|
994
|
Ext.each(datas, function (d) {
|
995
|
fields.push({
|
996
|
name: d.field_id,
|
997
|
type: d.data_type
|
998
|
});
|
999
|
});
|
1000
|
return fields;
|
1001
|
}
|
1002
|
|
1003
|
var result = Ext.decode(s.responseText);
|
1004
|
var datas = result.data;
|
1005
|
me.bizdata = datas;
|
1006
|
var cols = buildColumns(datas);
|
1007
|
var fields = buildFields(datas);
|
1008
|
me.initRecord = buildInitRecord(datas);
|
1009
|
|
1010
|
var myJsonStore = new Ext.create('Ext.data.JsonStore', {
|
1011
|
fields: fields,
|
1012
|
proxy: {
|
1013
|
reader: {
|
1014
|
type: 'json',
|
1015
|
root: 'data'
|
1016
|
},
|
1017
|
type: 'ajax',
|
1018
|
url: '/Workflow/LoadDataQuery'
|
1019
|
},
|
1020
|
listeners: {
|
1021
|
scope: me,
|
1022
|
//'beforeload': me.getPlugin('minova.gridcrud').onStoreBeforeload,
|
1023
|
'load': me.getPlugin('minova.gridcrud').onStoreLoad,
|
1024
|
'add': me.getPlugin('minova.gridcrud').onStoreAdd
|
1025
|
//,'remove': me.getPlugin('minova.gridcrud').onStoreRemove
|
1026
|
},
|
1027
|
load: function (options) {
|
1028
|
var me = this;
|
1029
|
|
1030
|
options = options || {};
|
1031
|
|
1032
|
if (typeof options == 'function') {
|
1033
|
options = {
|
1034
|
callback: options
|
1035
|
};
|
1036
|
}
|
1037
|
|
1038
|
options.groupers = options.groupers || me.groupers.items;
|
1039
|
options.page = options.page || me.currentPage;
|
1040
|
options.start = (options.start !== undefined) ? options.start : (options.page - 1) * me.pageSize;
|
1041
|
options.limit = options.limit || me.pageSize;
|
1042
|
options.addRecords = options.addRecords || false;
|
1043
|
|
1044
|
if (me.buffered) {
|
1045
|
options.limit = me.defaultViewSize;
|
1046
|
return me.loadToPrefetch(options);
|
1047
|
}
|
1048
|
//return me.callParent([options]);
|
1049
|
var operation;
|
1050
|
|
1051
|
options = Ext.apply({
|
1052
|
action: 'read',
|
1053
|
filters: me.filters.items,
|
1054
|
sorters: me.getSorters()
|
1055
|
}, options);
|
1056
|
me.lastOptions = options;
|
1057
|
|
1058
|
operation = new Ext.data.Operation(options);
|
1059
|
|
1060
|
if (me.fireEvent('beforeload', me, operation) !== false) {
|
1061
|
me.loading = true;
|
1062
|
MinovaAjaxPostSync(
|
1063
|
me.proxy.url,
|
1064
|
options.params,
|
1065
|
function (s) {
|
1066
|
me.loading = false;
|
1067
|
var result = Ext.decode(s.responseText);
|
1068
|
var records = result;
|
1069
|
if (!Ext.isEmpty(me.proxy.reader.root)) records = result[me.proxy.reader.root];
|
1070
|
|
1071
|
me.loadData(records);
|
1072
|
},
|
1073
|
function (f) {
|
1074
|
me.loading = false;
|
1075
|
}
|
1076
|
);
|
1077
|
}
|
1078
|
if (me.fireEvent('load', me, me.getRange(), true) !== false) {
|
1079
|
}
|
1080
|
|
1081
|
}
|
1082
|
});
|
1083
|
|
1084
|
me.addListener('edit', me.getPlugin('minova.gridcrud').onGridEdit);
|
1085
|
me.reconfigure(myJsonStore, cols);
|
1086
|
me.getPlugin('columnrenderer').init(me);
|
1087
|
},
|
1088
|
function (f) {
|
1089
|
var result = Ext.decode(s.responseText);
|
1090
|
});
|
1091
|
|
1092
|
},
|
1093
|
/**
|
1094
|
* rencananya method ini untuk mengkonfigurasikan grid sebagai HR view
|
1095
|
*/
|
1096
|
reconfigureHR: function () {
|
1097
|
},
|
1098
|
/**
|
1099
|
* rencananya method ini untuk mengkonfigurasikan grid sebagai ERP view
|
1100
|
*/
|
1101
|
reconfigureERP: function () {
|
1102
|
},
|
1103
|
/**
|
1104
|
* method ini untuk merestuktur column/editor
|
1105
|
* @params {dataIndex, newEditor}
|
1106
|
* @return {newEditor}
|
1107
|
*/
|
1108
|
changeColumnEditor: function (dataIndex, newEditor) {
|
1109
|
var col = undefined;
|
1110
|
Ext.each(this.columns, function (c) {
|
1111
|
if (c.dataIndex === dataIndex) {
|
1112
|
col = c;
|
1113
|
return false
|
1114
|
}
|
1115
|
});
|
1116
|
if (col)
|
1117
|
col.getEditor = function () {
|
1118
|
return newEditor
|
1119
|
}
|
1120
|
},
|
1121
|
/**
|
1122
|
* method ini untuk mendapatkan column by dataIndex
|
1123
|
* @return {Ext.grid.column.Column}
|
1124
|
*/
|
1125
|
getColumn: function (dataIndex) {
|
1126
|
var col = undefined;
|
1127
|
Ext.each(this.columns, function (c) {
|
1128
|
if (c.dataIndex === dataIndex) {
|
1129
|
col = c;
|
1130
|
return false
|
1131
|
}
|
1132
|
});
|
1133
|
return col;
|
1134
|
},
|
1135
|
buildInitRecord: function () {
|
1136
|
return this.getPlugin('minova.gridcrud').buildNewRec();
|
1137
|
}
|
1138
|
});
|