CMP - Firing 'beforeSubmit' and 'success' events via a button

2 Posts

rcarter Reply #1, 14 years, 6 months ago

Hi,

I'm currently struggling to work out how to trigger the 'beforeSubmit' event once a Save button has been clicked on a CMP. I have looked through some other packages etc and can see no difference between my code and the working code.

My main question is - 'How does the object know which button is the one to attach the 'beforeSubmit' and 'success' events to'?

Here are the appropriate parts of the code:

product.js

Common.page.Home = function(config) {
    config = config || {};
    Ext.applyIf(config,{
		 formpanel: 'panel-product'
        ,buttons: [{
            text: _('save')
            ,id: 'product-btn-save'
            ,process: 'update'
            ,method: 'remote'
        },'-',{
            text: 'Back'
            ,id: 'product-btn-back'
            ,handler: function() {
                location.href = '?a='+MODx.request.a
            }
            ,scope: this
        }]		
        ,components: [{
            xtype: 'panel-product'
            ,renderTo: 'products-panel-home-div'
        }]
    });
    Common.page.Home.superclass.constructor.call(this,config);
};
Ext.extend(Common.page.Home,MODx.Component);
Ext.reg('page-home',Common.page.Home);

product.panel.js

Common.panel.Product = function(config) {
    config = config || {};
    Ext.apply(config,{
        border: false
        ,items: [{
            xtype: 'modx-tabs'
            ,items: [{
                title: _('products')
                ,items: this.getFields(config)
            }]
        }]
		,listeners: {
                        'success': {fn:this.success,scope:this}
			,'setup': {fn:this.setup,scope:this}
			,'beforeSubmit': {fn:this.beforeSubmit,scope:this}
			,'postReady': {fn:this.postReady,scope:this}
        }
    }); // Ext.apply
    Common.panel.Product.superclass.constructor.call(this,config);
};
Ext.extend(Common.panel.Product,MODx.FormPanel, {

    postReady: function() {
        console.log('postReady'); 
    }

    ,success: function() {
	console.log('Success');
    }
	
    ,setup: function(o) {
	console.log('Setup');
    }
	
    ,beforeSubmit: function() {
        console.log('beforeSubmit');
    }
	
    ,getFields: function(config) {}
	
});
Ext.reg('panel-product',Common.panel.Product);

In this example, the 'setup' function does fire, but the 'postReady' function doesn't and when I click the 'Save' button the 'beforeSubmit' and 'success' events do not fire.

Any help would be greatly appreciated.

53 Posts

mwalsh Reply #2, 14 years, 6 months ago

I'd be interested to know the solution to this one also...

Enovate Design | Web Design Agency Essex

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #3, 14 years, 6 months ago

this.fireEvent('beforeSubmit');

Those events are fired automatically if it knows when to, and I think the only scenario for that is when you're using the default button set in windows for example.

There might be something of value checking into the definition of the MODx.Window object's tbar, to see what in there is making it trigger beforeSubmit and the likes.

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

2 Posts

rcarter Reply #4, 14 years, 6 months ago

Hi Mark, thanks for your help, but my issue is related to a FormPanel component, which as far as I can tell does not have a default button set.

I have looked through the files related to the 'New User' page in MODx, as this is how I would like my manager page to work (with the 'Save' and 'Back' buttons at the top), but I cannot see how clicking the 'Save' button results in the 'beforeSave' and 'success' event being fired.

160 Posts

insomnix Reply #5, 14 years, 2 months ago

I am trying to use a MODx.Window with a grid to display employee mileage breakdown. Selecting the employee and opening the window, refreshing the grid with the employee's mileage is all working fine. I even have checkboxes in the grid to select which mileage to reimburse. However, I now need to grab the record id's of all the items in the grid when I click on the save button in the window. I want to use the window's beforeSubmit event as per the modx documentation at http://rtfm.modx.com/display/revolution20/MODx.Window. For some reason I cannot get the beforeSubmit event to work. I try to step through in the console and it never executes my function. Below is my code.

Mileage.window.UpdateMileagePayout = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'mileage-window-mileagepayout-payment'
        ,title: _('mileage.update')
        ,url: Mileage.config.connectorUrl
        ,baseParams: {
            action: 'mgr/mileagepayout/update'
        }
        ,autoHeight: false
        ,height: Ext.getBody().getViewSize().height*.85
        ,autoScroll: true
        ,width: Ext.getBody().getViewSize().width*.65
        ,fields: [{
            xtype: 'hidden'
            ,name: 'Owner'
        },{
            xtype: 'displayfield'
            ,fieldLabel: _('mileage.employeename')
            ,name: 'EmployeeName'
            ,anchor: '100%'
        },{
            xtype: 'displayfield'
            ,fieldLabel: _('mileage.total')
            ,name: 'EmployeeTotal'
            ,anchor: '100%'
        },{
            xtype: 'textfield'
            ,fieldLabel: _('mileage.check.number')
            ,id: 'CheckNumber'
            ,name: 'CheckNumber'
            ,anchor: '100%'
        },{
            xtype: 'mileage-grid-employeemileage'
            ,fieldLabel: _('mileage.mileage')
        }]
        ,listeners: {
            'beforeSubmit': {fn:this.beforeSubmit,scope:this}
        }
    });
    Mileage.window.UpdateMileagePayout.superclass.constructor.call(this,config);
};
Ext.extend(Mileage.window.UpdateMileagePayout,MODx.Window, {
    beforeSubmit: function() {
        var cs = Ext.getCmp('mileage-grid-employeemileage').getSelectedAsList();
        if (cs === false) return false;
        alert(cs);
        return true;
    }
});
Ext.reg('mileage-window-mileagepayout-payment',Mileage.window.UpdateMileagePayout);

Can anyone see any reason why this isn't working?

48 Posts

herooutoftime Reply #6, 13 years, 3 months ago

Hi @insomnix,

have you ever solved this issue regarding grid selections and handling the submit event?

Thanks for any answer...