...
The following diagram illustrates the form data submission flow:
Creating JS listener class for the Form
...
It is best practice to keep the listener class files separated from the other action files. The structure of the JS listener class should be as follows:
| Code Block | ||
|---|---|---|
| ||
cbxcanvas.ns("namespace id"); listenerClass = Class(cbxcanvas.Observable, { constructor:function(config) { }, //Inside the following function, listeners related to all form components are registered. registerHandlers:function() { //Form Listener //this.fm.registerHandler('cbxpremodelload'CFEC.PRE_MODEL_LOAD, function (fm, record) { }); //Form Item Listener // this.fm.registerHandler("cbxdateclear"CFEC.DATE_CLEAR, "<FORM_DATEFIELD_ID>", function (fm, event, fieldName, value) { }); } }); CFLR.registerListener("FORM_ID", listenerClass); //* Form Container Action button listener //* CABR.registerHandler('ACTION_BUTTON_ID','CONTAINER_ID', function (config) { }); */ |
Create a listener payments.intertransfer.js as follows:
| Code Block | ||
|---|---|---|
| ||
cbxcanvas.ns("payments"); payments.paymentForm = Class(cbxcanvas.Observable, { constructor : function (config) { this.fm = config.fm; }, registerHandlers:function() { } }); CFLR.registerListener("PAYMENT_FORM", cbxcanvas.form.listeners.paymentForm); CABR.registerHandler('SUBMIT','PAYMENTS_CONTAINER', function (config) { //Form submit action goes here }); CABR.registerHandler('CLOSE','PAYMENTS_CONTAINER', function (config) { CBXFORMCONTAINER.getActiveFormContainer().close(); }); |
...