How to dynamically assign id value to the fieldsPanelConfig

[Stanleyliu1006]

Hi

I have 5 split scheduler showing in a page, and each scheduler will able to show the edtiorform, so i need to dynamically assign the id value (which should be 5 unique value) of the combo field in the editorform which defined in fieldsPanelConfig like below:

        fieldsPanelConfig : {
            layout      : 'container',
            style       : 'margin-left : 6px; top: 10px',
            border      : false,
            cls         : 'editorpanel',
            labelAlign  : 'top',

            items       : [

                allocationField = new Ext.form.field.ComboBox({
                    name            : 'allAllocations',
                    fieldLabel      : 'All Allocations',
                    id              : 'editor_allAllocations',
                    forceSelection  : false,
                    valueField      : 'AllocationId',
                    displayField    : 'AllocationDetail',
                }),

            ]
        }

But i want to update the id value to attach with id of Sch.plugin.EditorWindow (which has 5 different unique value). something like:

                allocationField = new Ext.form.field.ComboBox({
                    name            : 'allAllocations',
                    fieldLabel      : 'All Allocations',
                    id              : 'editor_allAllocations'+me.id,
                    forceSelection  : false,
                    valueField      : 'AllocationId',
                    displayField    : 'AllocationDetail',
                }),

So is there any easy way to achieve it? thanks


Kind regards
Stanley

[pmiklashevich]

Hello,

let me clarify if I get it. You have 5 Schedulers. Each Scheduler has its own EventEditor. Each EventEditor has a custom combo field called Allocation. And you want to set custom 'id' on each Allocation field, according to Scheduler's Id. Is it correct?

Could you please explain why do you need it? What are you trying to achieve? I have a feeling that there is a more simple way to achieve the same. If you want to reference your components it's much safer to use itemId instead. Id is a global thing and need try to avoid its using. Also you can save a link to your field instance in EventEditor, so you can get like Scheduler -> EventEditor -> AllocationField

[Stanleyliu1006]

Hi pmiklashevich

I have a view like below screenshot, which comprise with 5 scheduler to display the entire page vertically.

Then for each sub-scheduler, user can drag create a new event. In that event editor form, there is a allocation dropdown box field.

Then i update my code as below to include the id, which is working now.

me.editor = Ext.create(Ext.apply({
    title             : 'Experiment',
    xtype             : 'eventeditorform',
    id                : eventeditorformId,
    iconCls           : 'x-fa fa-cubes',
    autoScroll: true,

    onCancelClick : function () {
        me.close();
    },
    fieldsPanelConfig : {
        layout      : 'container',
        style       : 'margin-left : 6px; top: 10px',
        border      : false,
        cls         : 'editorpanel',
        labelAlign  : 'top',

        items       : [

            allocationField = new Ext.form.field.ComboBox({
                name            : 'allAllocations',
                fieldLabel      : 'All Allocations',
                id              : 'editor_allAllocations'+me.id,
                forceSelection  : false,
                valueField      : 'AllocationId',
                displayField    : 'AllocationDetail',
            }),

        ]
    }
}, me.editorConfig));

But there is another problem to populate value for that dropdown box

I have defined the listener event below in Sch.panel.SchedulerGrid to load the values for that dropdown box, but the code 'Ext.getCmp('editor_allAllocation'+schedulerid)' shows null value error, is this because i should use itemId instead as you suggested?

dragcreateend    : function( view, newEventRecord, resource, e, el, eOpts){
    //Dynamically load all allocations in dropdown-box for event editor form
    if (!isNaN(resource.get('Id'))) {
        var proposalAllocationStore = Ext.create('AS.store.ProposalAllocationStore');
        proposalAllocationStore.load({
            scope: this,
            params: {equipment_type: resource.get('Id')},
            callback: function (records, operation, success) {
                var allocations = [];
                for (var i = 0; i < records.length; i++) {
                    allocations.push({
                        "AllocationId": records[i].get('AllocationId'),
                        "AllocationDetail": records[i].get('CurrentShifts')
                    });
                }
                Ext.getCmp('editor_allAllocation'+schedulerid).bindStore(allocations);
                Ext.getCmp('editor_allAllocation'+schedulerid).show();
            }
        });
    }
},

Kind regards
Stanley

[Stanleyliu1006]

The problem is all sovled now, thanks for suggestion to use itemId, will make change on that.

The above problem is because i have spelling error on the code below, which should be 'editor_allAllocations') instead. All good now. Thanks

Ext.getCmp('editor_allAllocation'+schedulerid).bindStore(allocations);

[pmiklashevich]

Hello Stanley,

in dragcreateend handler you don't need to use global search at all. EventEditor registers itself on Scheduling view, so scheduler.getSchedulingView().eventEditor will receive EventEditor plugin. In you case you already have 'view' as the first argument. view.eventEditor is your EventEditor plugin.

I would think about optimization here. Create store each time on drag and drop and use search to receive your field looks too expensive to me. You can save a link to your field, like:

me.editor.allocationField = allocationField;

So in your handler you can use:

view.eventEditor.allocationField.getStore();

Also I would think of a situation when an event is created not by a drag and drop. It could be created by a double click, from a button, etc. So this code won't work in non-drag&drop case. The way I see it is to change EventEditor a bit, to provide the logic of loading data to the allocation store based on resourceId taken from the eventRecord saved in Event Editor Form. Only Event Editor should know of this. Otherwise encapsulation will be broken.

You can check our Event Editor Demo and learn how editor classes work: Sch.plugin.EditorWindow, Sch.widget.EventEditor, Sch.plugin.mixin.Editor

I hope this help you!

Good luck,
Pavel

[Stanleyliu1006]

Thanks for you suggestion Pavel, i will optimize my code.