Project

General

Profile

Bug #1220 » MinovaXTypes.js

Mr. Yusuf, 06/20/2022 11:57 AM

 
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
});
(5-5/6)