Ext.application and Ext.direct: How to setup?

[cubernatic]

Yes because now you need to add ext.direct in programmatic way.
Try this:
In your app.js

launch: function() {
		Ext.direct.Manager.addProvider(Ext.app.DirectAPI);
	}

And this in your controller:

onLaunch: function(app) {
		var store = this.getUserStore();
		store.getProxy().api = {
			create: UserData.createUser,
			read: UserData.getUsers,
			update: UserData.updateUser,
			destroy: UserData.deleteUser
		};
		store.load();
	},

[marman]

thanks for all the help, but i am not following you. I removed the Ext.application from my code as i could not get it to work. If i cut and paste my subclassed form into my top level Ext.onReady function, ext direct works. So i guess Ext.Direct does not support sub-classing?

Ext.onReady(function() {

    console.log('Application launch!');
    
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
    
    //provide feedback for any errors
    Ext.tip.QuickTipManager.init();
    
    console.log('Application launch! 1');
    
    
    var form= Ext.create('Ext.form.Panel', { 
        border: false,
        width: 400,
        bodyPadding: 10,
        paramsAsHash: true,
        
        items: [{
            xtype: 'textfield',
            name: 'totalToday',
            readOnly: true,
            width: 380,
            fieldLabel: 'Total (today)',        
        }, {
            xtype: 'textfield',
            name: 'totalInFiles',
            readOnly: true,
            width: 380,
            fieldLabel: 'Total In Files'
        }, {
            xtype: 'textfield',
            name: 'totalLoaded',
            readOnly: true,
            width: 380,
            fieldLabel: 'Total Loaded'            
        }],
        
        api: {
            load: iamSummaryService.getIamSummary
        }
    });    
    form.getForm().load();
    //---------THIS load WORKS!!!!!!!!!
    

    console.log('Application launch! 2');

    //--DOES NOT call the correct POST URL. Same code as above 
    var iamD03= Ext.create('SABER.summary.D03Panel', 'IAM D03');
    
    console.log('Application launch! 3');

        
        var viewport= Ext.create('Ext.container.Viewport', 
                {
                    layout: 'auto',
                    items: [ {
                        region: 'north',
                        html: '<h1 class="x-panel-header">Page Title</h1>',
                        height: 100,
                        border: true,
                        margins: '0 0 5 0'
                    }, {
                        region: 'center',
                        border: true,
                        layout: {
                            type: 'hbox',
                        },

                        items: [ form, iamD03 ]
                    }, {
                        region: 'south',
                        html: '<h1 class="x-panel-header">Page Footer</h1>',
                        height: 80,
                        border: true,
                        margins: '0 0 5 0'
                    }, ]            
                });
   
});

[BillMoore]

Yes because now you need to add ext.direct in programmatic way.

I'm having this same problem, and trying to follow the example in the video. The code you show above for the controller is from the workshop code, and I can't see where the function getUserStore() is implemented. Where is this implemented, and what does it do?

Here is my code for the store:

Ext.define('ZV.store.workflow.ExamHistory', {
    extend: 'Ext.data.Store',
    model: 'ZV.model.workflow.ExamHistory',
    autoLoad: false,

    proxy: {
        type: 'direct',
        directFn: Workflow.getExamsForUser,
        reader: {
            type: 'json',
            root: 'exams',
            successProperty: 'success'
        }
    }
});

and here is the code in my controller (simplified):

Ext.define('ZV.controller.workflow.Navigation', {
    extend: 'Ext.app.Controller',

    views: [
        'workflow.Viewport'
    ],

    models: [
            'workflow.Exam',
            'workflow.ExamHistory'
    ],

    stores: [
            'workflow.Exams',
        'workflow.ExamHistory'
    ],


    onLaunch: function(app) {
        alert("Got here!");
        var store = this.getExamHistoryStore();
        store.getProxy().api = {
            read: Workflow.getExamsForUser
        };
        store.load();
    }

});

My first problem is I don't know what to implement for getExamHistoryStore() since that part seems to be missing from the workshop, and my second problem is that it never even gets to my onLaunch function before I get a javascript error in the store that Workflow is undefined on this line:

directFn: Workflow.getExamsForUser,

If I remove that store, I can directly invoke Workflow.getExamsForUser and am getting back the results from PHP, so I know that ext.direct is working, I just can't figure out how to use in a store...

Thanks!

[marman]

your issue looks a bit different. I created an issue in the Bug forum for the issue i am having...

http://www.sencha.com/forum/showthre...-Form&p=628650

[BillMoore]

I figured out the solution to my problem. The getter for the store in the workshop code is generated, but since my store is in a namespace I couldn't figure out what the generated getter would be. So I used this:

var store = this.getStore('workflow.ExamHistory');

instead of:

var store = this.getExamHistoryStore();

Worked like a charm!

[DavidSSL]

For an ASP.NET MVC example download the code fromhttp://code.google.com/p/ext-direct-mvc/. Although it's a .NET example, I believe that the javascript files will be the same for other server side languages.

What I found worked for me was using ext-all.js as mentioned in previous answers

[twaindev]

I'm using ASP.NET MVC with Ext.Direct.Mvc and this works for me using only ext(-debug).js:

Ext.Loader.setConfig({
    enabled: true, 
    paths: { '<appName>': '.', 'Ext': '/Scripts/Ext/src', 'Ext.ux': '/Scripts/Ext/ux' }
});

Ext.syncRequire(['Ext.app.*', 'Ext.direct.*'], function () {
    Ext.Loader.loadScriptFile('/Direct/Api', function () {
        Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);

        Ext.application({
            name: '<appName>',

            appFolder: '/scripts/app',

            controllers: [
                '<controllerName>'
            ],

            autoCreateViewport: true,

            launch: function () {
                Ext.Loader.loadScriptFile('/Scripts/App/overrides.js', Ext.emptyFn, Ext.emptyFn, this);
            }
        });
    }, Ext.emptyFn, this);
 });

HTH

[gianmarco]

Hi all, i had the same problem and solved by modifying the entry point of my MVC app from this:

Ext.application({
    name: 'Trackr',
    autoCreateViewport: true,
    controllers: ['TaskList', 'TaskEdit']
});

to this:

Ext.require('Ext.direct.Manager');

Ext.onReady(function() {
    Ext.direct.Manager.addProvider(Trackr.server.REMOTING_API);


    Ext.create('Ext.app.Application', {
        name: 'Trackr',
        autoCreateViewport: true,
        controllers: ['TaskList', 'TaskEdit']
    });
});

this solution make sense according to Ext.application method implementation:

Ext.application = function(config) {
    Ext.require('Ext.app.Application');


    Ext.onReady(function() {
        Ext.create('Ext.app.Application', config);
    });
};

[helloaccp]

This is really timely.ralscha Thank you.

[helloaccp]

Hi

Struggling with the same problem. Found this solution that works for me. Not sure if this is the "correct" approach.

Ext.require('Ext.direct.*', function() {
    Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
});

Ext.application({
....
});

Greetings
Ralph

This is really timely. ralscha Thank you.