Global function for ExtJs 6

Question

here is my Ajax function

 Ext.Ajax.request({
        url : 'report.php',
        method: 'POST',
        success: function (result, request ) {
            panel.update(result.responseText);
            mask.hide();
        }
    });

and my report.php look like this:

<tr>
<td class='center'><b>Company</b></td>
    <td class='center'><b>User</b></td>
    <td class='center'><b>Report</b></td>
</tr>
<tr>
<?php foreach ($data as $day) {?>
  if($day == $today){
<td onClick="ExtJsFunction()"><?php $today?></td>
}else{
///
}

}

How do i write a funciton in ExtJs code that i can call from here on click And i have no idea how to do it. I haven't tried anything yet

Answer 1

How do i write a funciton in ExtJs code that i can call from here on click And i have no idea how to do it. I haven't tried anything yet

I think you can use singleton for global or common functions.

A Singleton is a class that can have only one object instance. In ExtJS 4 or later version a singleton object is instantiated once the application is loaded.

I have created an small sencha fiddle demo hope this will help you.

//singleton here is {singleton} class
Ext.define('Gloabal', {
    singleton: true,
    alternateClassName: 'globalUtilities',
    doApiCall: function (el) {
        Ext.Msg.alert('Succes','You have clicked on <b>'+el.innerText);
        //you can call your api here...
        //on basis of your requirment
    }
});

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    }, {
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }, {
        xtype: 'label',
        html: '<table style="width: 100%;border-collapse: collapse;text-align: center;cursor: pointer;"><tr>' +
            '<td onclick=globalUtilities.doApiCall(this) style="border:1px solid #ccc;">API 1</td>' +
            '<td onclick=globalUtilities.doApiCall(this) style="border:1px solid #ccc;">API 2</td>' +
            '<td onclick=globalUtilities.doApiCall(this)  style="border:1px solid #ccc;">API 3</td>' +
            '</tr></table>'
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function () {
            this.up('form').getForm().reset();
        }
    }],
    renderTo: Ext.getBody()
});