gridx modules won't load in my rational/worklight environment

Question

as i attempt to load modules with the creation of a gridx/grid, my script goes to that strange place where errors are handled by code that looks like gobbledy gook. if i create the grid without the modules attribute the rows are displayed just fine. i am coding with worklight 6.1 in rational app developer 9.1, using dojo 1.9 that's (delivered with RAD). my dojo includes are specified like this:

function dojoInit() {
    require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
        "dijit/registry", "dojox/mobile/ScrollableView",
    "dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
    "dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane", 
    "dojo/Deferred", "dojo/store/Memory", 
    "gridx/Grid", "gridx/core/model/cache/Sync", "dojox/mobile/Container",
    "gridx/modules/SingleSort"], 
    function(ready) { ...

Here are my stylesheet links:

<link rel="stylesheet" href="css/dojo.css" />
<link rel="stylesheet" href="css/claro.css" />
<link rel="stylesheet" href="css/document.css" />
<link rel="stylesheet" href="css/Gridx.css" />
<link rel="stylesheet" href="css/Gridx_rtl.css" />

i moved the css files from gridx/resources/claro/Gridx.css and other locations within the dojo toolkit library to a known relative location, temporarily, in order to eliminate the possibility that the css files could not be resolved. and i am specifying just the 'claro' class in the div wherein this grid is placed. there is no difference in the behavior of the grid in either case.

My grid is created like this:

toStore=new dojo.store.Memory({ idProperty: 'PICYNO', data: resultSet });
toColumns=[
    { id: 'PICYNO', field: 'PICYNO',    name: 'Cycle'       , width: '80px' , editable: true },
    { id: 'PIDSC1', field: 'PIDSC1',    name: 'Description' , width: '300px', editable: true },
    { id: 'PICYCS', field: 'PICYCS',    name: 'Status'      , width: '60px' , editable: true },
    { id: 'PPICSDJ',field: 'PPICSDJ',   name: 'Date'        , width: '80px' , editable: true },
    { id: 'PICYIT', field: 'PICYIT',        name: 'Items'       , width: '60px' , editable: true },
    { id: 'PICYLO', field: 'PICYLO',    name: 'Locations'   , width: '60px' , editable: true }
];
var cacheClass = "gridx/core/model/cache/Sync";
var tsGrid = new gridx.Grid({
    id: 'idHeaderGrid',
    cacheClass: cacheClass,
    store: toStore,
//  modules:[modules.SingleSort, modules.SelectRow],
//  modules:[gridx.modules.SingleSort],
//  modules:[gridx/modules/SingleSort],
//  modules: [ SingleSort ],
//  modules: [ Sort ],
    structure: toColumns
}); 
tsGrid.placeAt('idGridContentPane');
tsGrid.startup();

if i comment all the lines that specifiy 'modules:' as you see, then the grid is displayed (but it's ugly, as if the stylesheets weren't applied at all.)

if i try any variation of specifying the standard sort module, this function will tank. i know it's probably because i'm not specifying my environment correctly, but i can't see how.

Any known problems with any of the versions that i'm using? any suggestion is appreciated.

--------- Updated ------------

I have progressed to the extent that i can display a grid, but the formatting is still off.

Based on the results of experimenting with a non-worklight project where i was able to materialize the grid with modules, and also realizing that with either type of project (web or worklight), i was able to resolve dojo and Gridx objects even though the javascript resources are configured differently, i decided to try a local require statement to specify the dojo modules in the immediate context and it worked. The original dojo configuration in worklight was ocnfigured in the main.js object that's automatically generated with a worklight application. it looked like this:

function wlCommonInit() {
    require([ "layers/core-web-layer", "layers/mobile-ui-layer" ], dojoInit);
}
function dojoInit() {
    require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
            "dijit/registry", "dojox/mobile/ScrollableView",
            "dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
            "dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane", 
            "dojo/Deferred", "dojo/store/Memory", "dojox/mobile/Container",
            "gridx/modules/SingleSort", "gridx/modules/ColumnResizer", "gridx/modules/RowHeader"
            ], 
            function(ready) {
                ready(function() {
                ccInit();
        });
    });
}

I removed the module declarations from the main.js and added them in the ccInit.js application where the grid is created, like this:

    function populateGrid() {
        require([
            'dojo/store/Memory',
            'gridx/Grid',
            'gridx/core/model/cache/Sync',
            'gridx/modules/SingleSort',     
            'gridx/modules/ColumnResizer',
            'gridx/modules/RowHeader'
             ], function(Store, Grid, Cache, Sort, ColumnResizer, RowHeader) {
. . .
        var tsGrid = new gridx.Grid({
            id: 'idHeaderGrid',
            cacheClass: Cache,
            store: toStore,
            modules: [ Sort, ColumnResizer, RowHeader ],
            structure: toColumns,
            selectRowTriggerOnCell: true
        }); 
... 

The grid is created successfully when it is created within an immediate require context as shown. Lots of dojo calls and even a grid without modules will work if i use the non-immediate approach.

The syles are still messed up, though. Column headings are blank and the table looks nothing like a claro-styled grid. I am sure that i have set up the css includes in the html header correctly (using my working web project as a model). Is there some worklight initialization or 'skin' overlay that's messing this up?

Thanks for any comment.

--- workaround is to refer to all classes, locally.

I solved the problem with stylesheets by creating the gridx.css in the common\css folder, then I edited it by replacing each @import with a copy/paste of the imported css source. So my gridx.css is a merge of all the source code from all the imports. i point to that css\gridx in my header link and i get reasonable results.

So in summary, i had to explicitly require the gridx classes in the custom function rather than in the dojo require statement in the main.js. And i had to merge all of the gridx styles and refer to them locally as well. The problem where gridx.css and other style sheets are not resolved through relative path includes that point to the dojo toolkit seems like a bug. Those stylesheets seem to be loaded in the run-time-generated server as evidenced by the console messages that look like this:

Failed to load resource: the server responded with a status of 404 (Not Found) http://myWLdevServer.mycomputer.local:10080/JustGridx/apps/services/preview/JustGridx/common/0/default/dojo/gridx/resources/claro/Gridx.css

If a developer is supposed to do some kind of server config to point to those CSS files, then I'm not seeing it.

I am leaving this post as unsolved in case someone agrees with me that this is a bug at worst or is not intuitive and should be documented at best.

Answer 1

From the comments by user3208130:

Sorry for not following up for all this time. i did finally work around the problem by not importing anything. I copied the main gridx.css from gridx\resources into my project, and then for each of the imports listed in that file, i copy/pasted the source from the various locations within the gridx collection as well as all of the claro css files since gridx only uses that font. i had to turn off theme switching depending on the device since claro looks awful on windows8 and android otherwise.

I know this makes no sense, but i tried every variation of relative and explicit path that i could imagine for the import statements in both of the html header and within the main css files and nothing else worked. i suspected that the css files are not copied automatically when device environments are created but i couldn't prove that.