Integrate bryntum schedule component with my php code

[srimanta]

Hi,
I am trying to integrate the bryntum component(schedule) in php. I am not much aware in ext js. Please see the images
Here, Name fields are fetching properly, whereas Capacity is not accessing. These values are coming from Zoho CRM. My code is like

https://fgtpl.com/fugenx1/public_html/st ... w/demo.zip

, whereas r-read.php file is the responsible file for fetching the record from CRM and store it in a json format. It is like

{
"success": true,
"total": 9,
"root": [{
"Id": 1,
"Name": "Sri Test",
"Capacity": "190.0"
}, {
"Id": 2,
"Name": "tester_test01",
"Capacity": "500.0"
}, {
"Id": 3,
"Name": "Tesing room 23",
"Capacity": "5000.0"
}, {
"Id": 4,
"Name": "Test for 6th product",
"Capacity": "5000.0"
}, {
"Id": 5,
"Name": "Banquet hall test-01",
"Capacity": "500.0"
}, {
"Id": 6,
"Name": "test room",
"Capacity": "1000.0"
}, {
"Id": 7,
"Name": "Grande Ballroom",
"Capacity": "4000.0"
}, {
"Id": 8,
"Name": "Cedar Room",
"Capacity": "1400.0"
}, {
"Id": 9,
"Name": "Maple Room",
"Capacity": "1200.0"
}]
}

In the capacity column, it will show like 190.0 , 500.0, 5000.0 etc like Name column.

Please let me know whether it clears to you. Please help me.

Thanks in advance.

[mats]

Not clear, please post your code.

[srimanta]

I have shared my codes and screen shot, please check the zip file whose location is https://fgtpl.com/fugenx1/public_html/st ... w/demo.zip

Let me know please if you have any doubts.

[jakub]

Basically all you need to do is extend your resource model :

        Ext.define('CustomResource', {
            extend: 'Sch.model.Resource',
            fields : [
                {name: 'Capacity', type: 'number'}
            ]
        });

        var resourceStore = Ext.create("Sch.data.ResourceStore", {
            model : 'CustomResource',

[srimanta]

Now my new code for App.js is

Ext.ns('App');
Ext.Loader.setConfig({ 
    enabled: true, 
    disableCaching : true,
    paths : {
        'App' : './js'
    }
});

Ext.require([
    'App.PHPScheduler',
]);

Ext.onReady(function() {
    App.SchedulerDemo.init();
});

App.SchedulerDemo = {
    
    // Initialize application
    init : function() {
		Ext.define('CustomResource', {
            extend: 'Sch.model.Resource',
            fields : [
                {name: 'Capacity', type: 'number'}
            ]
        });
        var resourceStore = Ext.create("Sch.data.ResourceStore", {
            model : 'Sch.model.Resource',
			 
            //limit resources to 5 per page
            pageSize : 5,
            autoSync: true,
            proxy : {
                type : 'ajax',
                method: 'POST',
                reader: {
                    type : 'json',
                    root : 'root',

                    //name of the response property containing nuber of all records
                    totalProperty : 'total'                    
                }, 
                api: {
                    read: 'r-read.php',
                    create: 'r-create.php',
                    destroy: 'r-destroy.php',
                    update: 'r-update.php'
                },
				
                writer : {
                    type : 'json',
                    root: 'data',
                    encode: true,
                    writeAllFields: true,
                    listful : true,
                    allowSingle: false              
                }
            }            
        });

        var eventStore = Ext.create("Sch.data.EventStore", {
            autoLoad: true,
            autoSync: true,
            proxy : {
                type : 'ajax',
                method: 'POST',
                reader: {
                    type : 'json',                   
                }, 
                api: {
                    read: 'e-read.php',
                    create: 'e-create.php',
                    destroy: 'e-destroy.php',
                    update: 'e-update.php'
                },
                writer : {
                    type : 'json',
                    root: 'data',
                    encode: true,
                    writeAllFields: true,
                    listful : true,
                    allowSingle: false              
                }
            }                
        });

        //var startDate = new Date(2012, 8, 10),
		var startDate = new Date(),
            endDate   = Sch.util.Date.add(startDate, Sch.util.Date.WEEK, 2);

        var scheduler = Ext.create('App.PHPScheduler', {
            eventBarTextField  : 'Name',
            viewPreset         : 'dayAndWeek',
            startDate          : startDate, 
            endDate            : endDate,
            title              : 'Scheduler with pagination',
            eventResizeHandles : 'both',
            width              : 1200,
            height             : 350,
            renderTo           : Ext.getBody(),

            resourceStore      : resourceStore,
            eventStore         : eventStore,
            
           /* tbar               : [{
                xtype: 'button',
                text : 'Add new resource',
                border: 1,
                handler : function() {
                    resourceStore.add(new resourceStore.model({
                        Name : 'New resource'
                    }));

                    //if next page was created, switch to it
                    if (resourceStore.getCount() > resourceStore.pageSize){
                        var current = resourceStore.currentPage;

                        resourceStore.loadPage(current+1);
                    }
                },
                scope: this
            }],*/
            
            //define bottom bar with pagination buttons
            bbar               : Ext.create('Ext.PagingToolbar', {
                store          : resourceStore,
                displayInfo    : true,
                displayMsg     : 'Displaying resources {0} - {1} of {2}',
                emptyMsg       : "No resources to display"
            })
        });

        scheduler.on('eventcontextmenu', scheduler.onEventContextMenu, scheduler);

        //load first page of our resources
        resourceStore.loadPage(1);
    }
};

But still it is not working. Please check once again.

[mats]

It helps if you also use the Model you have defined:

Ext.define('CustomResource', {
            extend: 'Sch.model.Resource',
            fields : [
                {name: 'Capacity', type: 'number'}
            ]
        });
        var resourceStore = Ext.create("Sch.data.ResourceStore", {
            model : 'Sch.model.Resource', // Why use the old model? Point to your own custom model