Installation Problems... Example Included

[x33z]

I’m having major problems trying to get UberGrid into an existing app. I generated a new Sencha Touch 2.2.1 app with SenchaCommand, so it’s brand new. I’ve spend hours trying to get this to work, and not sure where to put everything. I have purchased the UberGrid license, thinking that the full version would work better than the trial. No luck though =(. Any help would be appreciated.
I’ve seen this article, but ultimately it didn’t help:
http://www.bryntum.com/forum/viewtopic.php?f=27&t=3165
The things I’ve done:
1) loaded the ubergrid-all-debug.js file in the index.html
2) added to the app.js:

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'UberGrid': 'UberGrid/lib/UberGrid'
);

}
3) added the css reference to app.json

I keep getting 2 errors:

cannot call method ‘override’ of undefined – which is referencing the Ext.scroll.View class

I’m using the full version, so a little confused what I’m supposed to do.
I’ve created an example. I didn’t include the UberGrid source files since it’s the full release, so please copy the contents of the full version of the Ubergrid folder into the /ubergrid folder, so you have a structure like:
Ubertest/ubergrid/docs/
Ubertest/ubergrid/lib/
Ubertest/ubergrid/resources/
Ubertest/ubergrid/ubergrid-all.js
etc
Also, copy the ubergrid-all.css file into the /resources/css folder (which also has the app.css file).
And with the touch folder, either change the reference or copy in the full touch framework (see the touch/structure.jpg for what was in there).

When you start it up, you should get that error.

Thanks in advance,

-Eric

[nickolay]

Reproduced. We'll investigate and update this thread soon.

[nickolay]

Fixed in the sources, thanks for the report!

You can download the tomorrow nightly build or, to patch it manually, update the definition of UberGrid.util.Scroller - need to add 'Ext.scroll.View' into its "requires" list, so it should look like:

Ext.define('UberGrid.util.Scroller', {
    
    extend              : 'Ext.scroll.Scroller',
    
    requires: [
        'Ext.scroll.View'
    ],
    
    getAnimationEasing : function (axis) {

Since you use ubergrid-all-debug.js you probably only need to patch ubergrid-all-debug.js, may be also the source file itself.

[x33z]

That fixed the one error. But I still get the "Uncaught TypeError: Cannot call method 'override' of undefined" error in this area:

lastDragPosition[axis] = current;
    }
}, function () {

    Ext.scroll.View.override({

Also, can you clarify what files I need to run this? It sounds like I just need the ubergrid-all-debug.js and the css file. But if I only reference those two files, and don't have the ubergrid/lib folder, I get all sorts of errors.

In other words, is my installation in that example I uploaded right?

Thanks so much in advance and for the quick reply.

[nickolay]

Well, if you use on-demand loading there's no need to include "ubergrid-all-debug.js" on the page - just configure the loader paths as you already did. In this case you need to patch the UberGrid.util.Scroller file - lib/UberGrid/util/Scroller.js

[x33z]

If I wanted to only use the ubergrid-all-debug.js, how do I go about doing that? Sorry, I've pulled what hair I have left out over this - for some really dumb reason, I can't get it working. I've looked through the examples that came with the component and everything.... thx ... =\

[nickolay]

Hm.. I guess you just include it on the page, along with the css bundle.. Then you can use the xtype "ubergrid" anywhere in the app or the constructor UberGrid.Panel.. I don't have much experience with SenchaCmd, but other users seems to made it work - probably something simple, yes.

Are you still seeing exception at "Ext.scroll.View.override({" line? Did you patch the "ubergrid-all-debug.js"?

[x33z]

Yeah, I was able to patch the other file ok - thank you for that.

For distribution, it's best/easier just to use the ubergrid-all-debug.js, right? I can't get this to work for the life of me. Things I've done:

Tried modifying the app.json file:

"js": [
        {
            "path": "touch/sencha-touch.js",
            "x-bootstrap": true
        }, {
        	"path": "ubergrid-all-debug.js" //<-- tried this
 	}, ...

I get a ton of 404 errors - missing the column/column.js, etc.

errors.jpg (138.96 KiB) Viewed 7733 times

I get the same error if I try, in the index.html file:

<!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
    
    <script src="ubergrid-all-debug.js" type="text/javascript"></script>

I'm just not getting how it's possible to only use this one file. Sencha Command, which comes with the license that I bought from Sencha, has to be one of the standard ways to build an app, so it should work, right?

Are you able to use just this ubergrid-all-debug.js file (remove that whole ubergrid folder...) with that example I created and sent over?

Thanks...

[nickolay]

This setup works fine for me (see the attachment). I include sencha-touch-all-debug.js and ubergrid-all-debug.js on the page (remove ubergrid-all-debug from index.html).

    "js": [
        {
            "path": "touch/sencha-touch-all-debug.js"
        },
        {
        	"path": "ubergrid/ubergrid-all-debug.js"
 	    },
        {
            "path": "app.js",
            "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
            "update": "delta"
        }
    ],

On-demand loading also works for me. In this case I only include sencha-touch-debug.js and not include ubergrid-all-debug.js anywhere (not here and not in the index.html).

    "js": [
        {
            "path": "touch/sencha-touch-debug.js"
        },
        {
            "path": "app.js",
            "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */
            "update": "delta"
        }
    ],

Instead I add the requires to the main view:

Ext.define('Ubertest.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.data.Store',
        'UberGrid.Panel'
    ],

and specify the correct loader path (because I'm on linux where the file names are case sensitive) - note the lowercase "ubergrid":

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'UberGrid': 'ubergrid/lib/UberGrid'
});

[x33z]

Thanks for the info and the examples. I get it working in the example, but for the life of me can't get it working in my app. I've gone line by line through the app.json, app.js, index.html, etc., and the folder structure, and my app is still throwing those "can't find column/....js" errors. I'm going to try again later today, as something is off somewhere and I'm going to THROW the computer out the window if I keep on it right now...

I just wanted to reply with the update, and a thanks, and I'll post on here once I figure out if I get it working, as it'd be good for other people who may run into the same issue...