Results 1 to 8 of 8

Thread: fireEvent questions and best practices

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Location
    Frederick, MD
    Posts
    108

    Default fireEvent questions and best practices

    Hi everyone,

    I am trying to have one controller fire an event in another controller but I keep getting an error saying that the event is not found. I have a window with a form that can be loaded from multiple places in the application. The event will load a record into the form. Below is the code that is called when someone double clicks on a record in a table to edit the record. After that is the code in the window for the event.

    This is my first time trying to use events like this so I am sure I am doing something wrong. And, if there is a better way to be doing this please let me know that too.

    Code:
    onGridpanelRowDblClick: function(tableview, record, tr, rowIndex, e, eOpts) {
            e.stopEvent();
            var ScoringWindow = Ext.create('Admin.view.Scoring');
            ScoringWindow.show();
            ScoringWindow.fireEvent(loadRecord,{RunID: record.get('uid')});
        },

    Code:
    ],
        listeners: {
            loadRecord: 'onWindowLoadRecord'
        }
    
    
    
    onWindowLoadRecord: function(RunID, eventOptions) {
            //load record
            var form = Ext.getCmp('scoringForm').getForm();
    
    
            form.load({
                url: '/data/getjson.php',
                params: {
                    dataset: 'run',
                    uid: RunID
                },
                failure: function(form, action) {
                    Ext.Msg.alert("Load failed", action.result.errorMessage);
                }
            });
        }

  2. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    Can you provide some more context? Where is that controller? What is listening for 'loadRecord'?

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Location
    Frederick, MD
    Posts
    108

    Default

    Here is the window code which is where the listener is:

    Code:
    Ext.define('Admin.view.Scoring', {
        extend: 'Ext.window.Window',
        alias: 'widget.scoring',
    
    
        requires: [
            'Admin.view.ScoringViewModel',
            'Admin.view.ScoringViewController',
            'Ext.toolbar.Toolbar',
            'Ext.button.Button',
            'Ext.form.Panel',
            'Ext.form.FieldSet',
            'Ext.form.field.ComboBox',
            'Ext.form.field.Hidden',
            'Ext.form.field.TextArea'
        ],
    
    
        controller: 'scoring',
        viewModel: {
            type: 'scoring'
        },
        height: 558,
        margin: 5,
        padding: 5,
        width: 628,
        title: 'Run Scoring',
    
    
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'button',
                        handler: 'onSaveButtonClick',
                        icon: '/images/save.png',
                        text: 'Save'
                    },
                    {
                        xtype: 'button',
                        handler: function(button, e) {
                            this.up('window').close();
                        },
                        icon: '/images/delete.png',
                        text: 'Cancel'
                    }
                ]
            }
        ],
        items: [
            {
                xtype: 'form',
                id: 'scoringForm',
                layout: 'column',
                bodyPadding: 10,
                items: [
                    {
                        xtype: 'fieldset',
                        columnWidth: 0.48,
                        title: 'Scoring',
                        items: [
                            {
                                xtype: 'textfield',
                                width: 251,
                                fieldLabel: 'Start Time',
                                labelWidth: 75,
                                name: 'StartTime',
                                readOnly: false
                            },
                            {
                                xtype: 'textfield',
                                width: 251,
                                fieldLabel: 'Time 1',
                                labelWidth: 75,
                                name: 'Time1',
                                readOnly: false
                            },
                            {
                                xtype: 'textfield',
                                width: 251,
                                fieldLabel: 'Time 2',
                                labelWidth: 75,
                                name: 'Time2',
                                readOnly: false
                            },
                            {
                                xtype: 'textfield',
                                width: 251,
                                fieldLabel: 'Time 3',
                                labelWidth: 75,
                                name: 'Time3',
                                readOnly: false
                            },
                            {
                                xtype: 'textfield',
                                width: 251,
                                fieldLabel: 'Time 4',
                                labelWidth: 75,
                                name: 'Time4',
                                readOnly: false
                            },
                            {
                                xtype: 'textfield',
                                width: 251,
                                fieldLabel: 'Finish Time',
                                labelWidth: 75,
                                name: 'FinishTime',
                                readOnly: false
                            },
                            {
                                xtype: 'combobox',
                                fieldLabel: 'Status',
                                labelWidth: 75,
                                name: 'Status',
                                readOnly: false,
                                displayField: 'ListItem',
                                store: 'RunStatusStore',
                                valueField: 'IntValue'
                            },
                            {
                                xtype: 'hiddenfield',
                                anchor: '100%',
                                fieldLabel: 'Label',
                                name: 'uid'
                            },
                            {
                                xtype: 'hiddenfield',
                                anchor: '100%',
                                id: 'scoringFormSession',
                                fieldLabel: 'Label',
                                name: 'SID'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        columnWidth: 0.04,
                        html: ' '
                    },
                    {
                        xtype: 'container',
                        columnWidth: 0.48,
                        items: [
                            {
                                xtype: 'fieldset',
                                title: 'Details',
                                items: [
                                    {
                                        xtype: 'form',
                                        bodyPadding: 10,
                                        items: [
                                            {
                                                xtype: 'textfield',
                                                width: 251,
                                                fieldLabel: 'Race ID',
                                                labelWidth: 75,
                                                name: 'RaceID',
                                                readOnly: true
                                            },
                                            {
                                                xtype: 'textfield',
                                                width: 251,
                                                fieldLabel: 'Race Date',
                                                labelWidth: 75,
                                                name: 'RaceDate',
                                                readOnly: true
                                            },
                                            {
                                                xtype: 'combobox',
                                                fieldLabel: 'Team',
                                                labelWidth: 75,
                                                name: 'TeamID',
                                                readOnly: true
                                            },
                                            {
                                                xtype: 'combobox',
                                                fieldLabel: 'Class',
                                                labelWidth: 75,
                                                name: 'ClassID',
                                                readOnly: true
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                xtype: 'fieldset',
                                title: 'Notes',
                                items: [
                                    {
                                        xtype: 'textareafield',
                                        anchor: '100%',
                                        height: 101,
                                        width: 242,
                                        fieldLabel: 'Label',
                                        hideLabel: true,
                                        name: 'Notes'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ],
        listeners: {
            loadRecord: 'onWindowLoadRecord'
        }
    
    
    });
    
    
    Ext.define('Admin.view.ScoringViewController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.scoring',
    
    
        loadRun: function(runID) {
            var form = Ext.getCmp('scoringForm').getForm();
    
    
            form.load({
                url: '/data/getjson.php',
                params: {
                    dataset: 'run',
                    uid: runID
                },
                failure: function(form, action) {
                    Ext.Msg.alert("Load failed", action.result.errorMessage);
                }
            });
        },
    
    
        onSaveButtonClick: function(button, e) {
            var form = Ext.getCmp('scoringForm').getForm();
            Ext.getCmp('scoringFormSession').setValue(SID);
    
    
            if(form.isValid()){
                form.submit({
                    url: '/data/actions.php',
                    params: {
                        action: 'update',
                        dataset: 'scoring'
                    },
                    //waitMsg: 'Saving new DLP Exception...',
                    success: function(fp, o) {
                        Ext.getStore('ParticipantsStore').load();
                    },
                    failure: function(fp, o) {
                        switch (action.failureType) {
                            case Ext.form.action.Action.CLIENT_INVALID:
                            Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                            break;
                            case Ext.form.action.Action.CONNECT_FAILURE:
                            Ext.Msg.alert('Failure', 'Ajax communication failed');
                            break;
                            case Ext.form.action.Action.SERVER_INVALID:
                            Ext.Msg.alert('Failure', action.result.msg);
                        }
                    }
                });
                this.up('window').close();
            } else {
                Ext.Msg.alert('Errors Detected', 'Errors were detected on the form that need to be fixed before saving');
            }
        },
    
    
        onWindowLoadRecord: function(RunID, eventOptions) {
            //load record
            var form = Ext.getCmp('scoringForm').getForm();
    
    
            form.load({
                url: '/data/getjson.php',
                params: {
                    dataset: 'run',
                    uid: RunID
                },
                failure: function(form, action) {
                    Ext.Msg.alert("Load failed", action.result.errorMessage);
                }
            });
        }
    
    
    });
    This is the grid with the listener for rowdblclick:

    Code:
    items: [
                    {
                        xtype: 'panel',
                        layout: 'fit',
                        title: 'New Runs',
                        items: [
                            {
                                xtype: 'gridpanel',
                                store: 'RacesStoreNotScored',
                                columns: [
                                    {
                                        xtype: 'numbercolumn',
                                        width: 70,
                                        dataIndex: 'RaceID',
                                        text: 'Race Id',
                                        format: '00'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        width: 143,
                                        dataIndex: 'TeamName',
                                        text: 'Team Name'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'StatusText',
                                        text: 'Status'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'ClassText',
                                        text: 'Class'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'RaceDate',
                                        text: 'Race Date'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        flex: 1,
                                        dataIndex: 'Notes',
                                        text: 'Notes'
                                    }
                                ],
                                listeners: {
                                    rowdblclick: 'onGridpanelRowDblClick',
                                    rowcontextmenu: 'onGridpanelRowContextMenu'
                                }
                            }
                        ]
                    },

    This is the code that calls the event:

    Code:
    onGridpanelRowDblClick: function(tableview, record, tr, rowIndex, e, eOpts) {
            e.stopEvent();
            var ScoringWindow = Ext.create('Admin.view.Scoring');
            ScoringWindow.show();
            ScoringWindow.fireEvent(loadRecord,{RunID: record.get('uid')});
        }

  4. #4

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    I think you have a typo. When firing the event, the first argument, the event name, should be a string (enclosed in quotes).
    Code:
    ScoringWindow.fireEvent("loadRecord", {RunID: record.get('uid')});
    I don't see why you need this custom event for your scenario. You open the scoring window when double clicking a grid row, so you have access right away to the grid record. I would create the window with the "RunID" confing:
    Code:
    var ScoringWindow = Ext.create('Admin.view.Scoring', {RunID: record.get('uid')});
    and then would bind the "onWindowLoadRecord" function to the window's "render" event. And, of course, removing the "loadRecord" listener.

  5. #5
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,339
    Answers
    20

    Default

    Quote Originally Posted by netnutmike View Post
    I am trying to have one controller fire an event in another controller ....

    This doesn't sound right, see this question, and then search for dongryphon's response: "I see three ways".

    You probably should consider the last point:

    "If the event needs to go elsewhere, the VC could call fireEvent on itself. This will be a Controller event which can be processed by any controller (VC or otherwise) using listen and the "controller" event domain. In v5, you can use your VC's alias to match"

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Location
    Frederick, MD
    Posts
    108

    Default

    When I pass in arguments like that when creating the window, how do I access the passed variable?

  7. #7

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    They become window properties, so you can access it like "windowObj.RunID", or "this.RunID" from a window event listener. You can also pass window configs, like "autoShow", so that you don't have to keep a reference to the window and then call the "show" method.
    Code:
    Ext.create('Admin.view.Scoring', {
        autoShow: true,
        RunID: record.get('uid')
    });

  8. #8
    Sencha User
    Join Date
    Jun 2008
    Location
    Frederick, MD
    Posts
    108

    Default

    Thanks for describing that, I learnt something new. That is helpful and simplifies everything.

Similar Threads

  1. Questions - 'Best Practices', et al
    By mlmcconnell in forum Sencha Architect 3.x: Q&A
    Replies: 5
    Last Post: 15 Nov 2013, 6:03 AM
  2. Performance best practices questions
    By mgrouch in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 21 Jan 2010, 8:01 PM
  3. Best Practices Questions for a Newbie
    By netnutmike in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 17 Oct 2008, 7:11 AM
  4. New User: Layout Questions, Property Questions
    By muffinman in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 25 Aug 2007, 12:02 PM
  5. Questions: IFRAME, Memory, SEO, Best Practices
    By markos in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 23 Aug 2007, 11:47 AM

Posting Permissions

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