Installation Problems... Example Included

Questions related to our Sencha Touch based grid component
User avatar
x33z
Posts: 6
Joined: Tue Aug 20, 2013 4:55 am

Installation Problems... Example Included

Post by 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:

Code: Select all

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
Attachments
Ubertest.zip
(980.78 KiB) Downloaded 418 times

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Installation Problems... Example Included

Post by nickolay »

Reproduced. We'll investigate and update this thread soon.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Installation Problems... Example Included

Post by 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:

Code: Select all

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.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
x33z
Posts: 6
Joined: Tue Aug 20, 2013 4:55 am

Re: Installation Problems... Example Included

Post by x33z »

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

Code: Select all

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.

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Installation Problems... Example Included

Post by 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
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
x33z
Posts: 6
Joined: Tue Aug 20, 2013 4:55 am

Re: Installation Problems... Example Included

Post by 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 ... =\

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Installation Problems... Example Included

Post by 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"?
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
x33z
Posts: 6
Joined: Tue Aug 20, 2013 4:55 am

Re: Installation Problems... Example Included

Post by 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:

Code: Select all

"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
errors.jpg (138.96 KiB) Viewed 7456 times
I get the same error if I try, in the index.html file:

Code: Select all

<!-- 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...

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Installation Problems... Example Included

Post by 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).

Code: Select all

    "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).

Code: Select all

    "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:

Code: Select all

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":

Code: Select all

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'UberGrid': 'ubergrid/lib/UberGrid'
});
Attachments
ubertest.zip
(899.23 KiB) Downloaded 423 times
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
x33z
Posts: 6
Joined: Tue Aug 20, 2013 4:55 am

Re: Installation Problems... Example Included

Post by 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...

Post Reply