Results 1 to 6 of 6

Thread: Halt execution on displaying a custom window (Ext.window.Window) in ExtJS 4.1

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1

    Default Answered: Halt execution on displaying a custom window (Ext.window.Window) in ExtJS 4.1

    I have an issue handling drag & drop events.

    I have two grids placed side by side and I am performing drag & drop operation from left grid(Grid A) to the right grid(Grid . I am using both BeforeDrop and Drop events on Grid B. On drag and drop of data from Grid A to Grid B, I am displaying a custom Window having a combo box in it.
    The displaying of the window and selecting values in combo box using Select event is done in the BeforeDrop event and reloading the Grid B's store is done in the Drop event.
    The problem is when I drag and drop the data from Grid A to Grid B, the BeforeDrop event is triggered where the window pops up and simultaneously before even selecting the combo box data, the Drop event also gets triggered reloading the Grid B's store in the background.

    I want the Drop event to be triggered after I select an item in the combo box. I want the execution to halt once the window pops and then continue execution after I select an item from combo box.

    Is there a way to halt the triggering process once the window is displayed just as in case of a javascript alert?

    Any Help is much appreciated..

    A sample code is shown below:
    Code:
    Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.panel.Panel',
    frame: false,
    height: 708,
    width: 1150,
    layout: {
        type: 'border'
    },
    title: 'MyApp',
    initComponent: function() {
        var me = this;
        var GridADragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
                                ptype: 'gridviewdragdrop',
                                dragGroup: 'GridADDGroup',
                                dropGroup: ''
        });
        var GridBDragDrop = Ext.create('Ext.grid.plugin.DragDrop', {
                                ptype: 'gridviewdragdrop',
                                dragGroup: 'GridADDGroup',
                                dropGroup: 'GridADDGroup'
        });     
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'grid',
                    id: 'gridb',
                    title: 'Grid B',
                    store: 'GridBStore',
                    viewConfig: {
                        id: 'Bview',
                        plugins: [GridBDragDrop],
                        /*Both Events have been used for Grid B*/
                        listeners: {
                            beforedrop: {
                                fn: me.onBeforeDrop,
                                scope: me
                            },
                            drop: {
                                fn: me.onDrop,
                                scope: me
                            }
                        }
                    },
                    columns: [
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'id',
                            text: 'ID'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name'
                        }
                    ]
                },
                {
                    xtype: 'grid',
                    id: 'grida',
                    title: 'Grid A',
                    store: 'GridAStore',
                    viewConfig: {
                        id: 'Aview',
                        plugins: [GridADragDrop]
                    },
                    columns: [
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'id',
                            text: 'ID'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name'
                        }
                    ]
                }
            ]
        });
    
        me.callParent(arguments);
    },  
    onBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {
    
        console.log("The before drop event is triggered!!");
        // Creating the window
        var window = Ext.create('MyApp.Window');
        // Getting the combo box object from the window object 
        var combobox = window.items.items[0];               
        // Adding 'select' listener to the combo box
        combobox.on('select', function(combo, records, options) {
                // I do some stuff here
                //...   
                // Once finished I destroy window
                window.destroy();
        }); 
        // Display the window on item drop
        window.show();
    },   
    onDrop: function(node, data, overModel, dropPosition, options) {
    
        console.log("The drop event is triggered!!");
    
        var GridB = Ext.getCmp('gridb'); // Grid B
        var GridBStore = GridB.getStore(); // Grid B store
    
        //Reload the GridB store once the item has been dropped
        GridBStore.reload();
    }
    
    });
    My custom window:

    Code:
    Ext.define('MyApp.Window', {
    extend: 'Ext.window.Window',
    height: 82,
    hidden: false,
    id: 'droptaskwindow',
    width: 171,
    layout: {
        type: 'absolute'
    },
    title: 'Create Task',
    modal: true,
    expandOnShow: false,
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items : [ {
                xtype : 'combobox',
                x : 10,
                y : 10,
                id : 'combodroptask',
                width : 130,
                fieldLabel : 'ID',
                labelPad : 1,
                labelWidth : 45,
                allowBlank : false,
                editable : false,
                displayField : 'Name',
            } ]
        });
        me.callParent(arguments);
     }
    });

    As and when the window pops up, both events get triggered simultaneously and message is displayed in console..

    The before drop event is triggered!!
    The drop event is triggered!!

  2. Hi Tobiu,

    Thanks for giving me an idea to solve this issue but I wanted to reload the store just after the window closes. So I used the BeforeDestroy event instead of BeforeShow and it worked. Strange!!

    Thanks again

  3. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Answers
    130

    Default

    You can use the beforeshow event of the window and return false in case you do not want to show it (depending on your logic).

    http://docs.sencha.com/extjs/4.2.0/#...ent-beforeshow
    Best regards
    Tobias Uhlig

  4. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1

    Default

    Hi Tobiu,

    Thank you for the response.

    Can you please provide a sample code?

  5. #4
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Answers
    130

    Default

    this is a bit simplified, but you should get the idea:

    Code:
    Ext.define('MyApp.Window', {
        extend : 'Ext.window.Window',
        listeners : {
            beforeshow : function() {
                if (foo === 'bar') {
                    return false;
                }
            }
        }
    });
    Best regards
    Tobias Uhlig

  6. #5
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1

    Default

    Hi Tobiu,

    Thanks for giving me an idea to solve this issue but I wanted to reload the store just after the window closes. So I used the BeforeDestroy event instead of BeforeShow and it worked. Strange!!

    Thanks again

  7. #6
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •