Problem in Hook.js, trying to access missing Ext classes

[sturobinson1972]

Hi,

We are currently in the process of migrating from Valence 3.2 to 4.1. We are running into a problem with some Ext classes we are trying to access but seem like they haven't been dragged into the Valence 'app.js', it is throwing a error of 'Uncaught TypeError: undefined is not a function' in the 'parseNamespace' function.

Any ideas on how we could fix this or what we may be doing wrong?

Thanks.

[sean.lanktree]

What type of components are you instantiating within your Hook.js?

[hepplk]

The error is thrown when trying to create our Cookie Store which uses 'Ext.data.proxy.Ajax' or 'Ext.data.HttpProxy'.

If we stop the creation of that then it throws the same error but for our 'Export Controller' which we load at Portal level so it is available to every app. This uses things like 'TriggerField' and other components.

Thanks.

[sturobinson1972]

It looks like your app.js file is not creating certain EXT functions that we require after we log on.

We try and create a Cookie Store extending from Ext.data.proxy.Ajax the process fails.

Its seems to fail in class Ext.ClassManager.parseNamespace on line
"if (k === s || k.substring(0, s.length) === s) {"
in the app.js file.

Object k is an array containing the following:
0: "Ext.data.HttpProxy"
1: undefined
length: 2

[sean.lanktree]

Sorry for the late response on this...

Can you try setting a "requires" config in your Hook.js? Specify the objects/components that you need.

    requires : ['Ext.XXXX.XXXXXX','Ext.XXXX.XXXXXX']

If this does not work, look at the network requests and verify that this is in fact causing it to load the Ext source files that you specified.

[hepplk]

Tried using the 'requires' config in the Hook, but this seems to have no effect. I have checked the network traffic as well and I cannot see these files being loaded.

[sean.lanktree]

Can you post back the relevant code in your Hook where you are trying to instantiate the object?

[hepplk]

Here is the code from the Hook:

        Ext.create('iwm.data.cookies.CookieStore');
                Ext.getStore('CookieStore').load({
                    scope: this,
                    callback: function(records, operation, success){
                        if(success){
                            me.incrementResponses();
                        }
                    }
                });

        exportController = Portal.getApplication().getController('WMS.util.export.controller.Main');
        exportController.init();
        exportController.onLaunch();

Here this is the class that uses the HttpProxy that it seems to be failing on first:

Ext.define('iwm.data.cookies.CookieProxy', {
    alias: 'proxy.CookieProxy',
    extend: 'Ext.data.proxy.Ajax',
    limitParam: 'count',
    pageParam: null,

    constructor: function() {

        this.reader = {
            root: 'data',
            type: 'json'
        };
        this.writer = {
            type: 'json'
        };

        this.callParent(arguments);

    },

    buildRequest: function(operation) {

        var request = this.callParent(arguments),
            params = request.params;

        params.userId = Valence.util.getUserName();

        if(request.action == "update" || request.action == "create"){
            params.name = request.records[0].data.NAME;
            params.value = request.records[0].data.VALUE;
        }

        params.start = operation.start + 1;
        params.end = operation.start + operation.limit;

        return request;

    }

});

[sean.lanktree]

Is the "CookieStore" referencing the "CookieProxy" as its proxy? Why the need to create the "CookieProxy" as opposed to just use the base Ajax proxy?

[hepplk]

Yes it is, we create the 'CookieProxy' over a base Ajax proxy because we are overriding the 'buildRequest' function.

[sean.lanktree]

OK. Ext.Loader.loadScript method may give you what you need:

Ext.Loader.loadScript({
    url : "path_to_Ext_js_file",
    onLoad : doSomethingFunction
});

Back to the "Cookie" store. Is the idea of this to save "state" through a back-end database for each user? If so, we could recommend another approach that you will find much cleaner to implement.

[hepplk]

Tried the recommendation as follows:

1) loaded the Ext-all file using the load script, this causes problems with conflicting with the app.js.
2) loaded the individual ext source files that we need to use, this doesn't seem to have an effect.

We currently use the Cookie store to save each application state (i.e. grid column sequence/size, etc.) in an ibmi back end database table. If you could recommend the other approach that would be greatly appreciated, thanks.

[sean.lanktree]

The Ext.state.Provider class can be extended to create your own state provider. Then within each app, you would set your provider to your custom state provider:

Ext.state.Manager.setProvider(Ext.create('MyCompany.util.state.MyProvider'));

This will be a much cleaner approach as the implementation would only require the above line. Ext components will work seamlessly with the custom state provider because we are extending it from Ext.state.Provider.

[hepplk]

Thanks for the suggestions, I have been able to fix the cookies problem by extracting some Ext source and extending the Cookie Proxy from that file instead.

I have also had some progress on the export window mentioned earlier in the thread. I am no longer getting the parseNamespace error, I am now getting a error of
'Uncaught TypeError: Cannot read property 'length' of undefined'
in the function
'Ext.cmd.derive.hasLockedColumns'
of the app.js.

This happens when trying to instantiate a xtype 'tabpanel'.

Any ideas on how to fix this would be greatly appreciated, thanks.

[sean.lanktree]

It would probably be best if you just send us your Hook.js. If you do not want to post it here just send it support@cnxcorp.com