UberGrid in an MVC app with Sencha Cmd

[shepsii]

Hi guys,

Been taking a look at the docs and examples... this thing is perfect for my current project, which handles large data sets - I'm currently using dataview with mixed results. I don't normally shell out for plugins, but I would be delighted to make an exception on this occasion as UberGrid just looks ridiculously good.

I downloaded the trial but before I go ahead and purchase, I want to make sure that I can use this in a standard MVC/Sencha CMD app (I'm using touch 2.1.1). I have already run the commands to generate my app, and I've read through this thread : http://www.sencha.com/forum/showthread. ... ed-Ext-app and the link there to the thread on this forum, but it appears there's a few differences between ExtJS (which I've never used) and Sencha Touch 2.

I could spend the next couple of days trying to work this out, but in all likelihood if I have this "barrier to entry" perhaps others do too! If you guys can give me some instructions as to how to get a build working in Sencha Cmd, I'm most definitely in - hopefully others would find this useful too.

Where I am right now is, I am trying to get the basic example working - even without the build, just testing locally.

Your basic example has sencha-touch-all-debug.js in the basic.html file, and then the uber-grid-all-debug.js loaded below it.

A standard Sencha Touch CMD-built app instead has a microloader.js which loads in all the files as needed. If I put the script tag including in the uber-grid file under the microloader, I get this in the console: TypeError: 'undefined' is not an object (evaluating 'Ext.scroll.View')

Many thanks
Simon

[nickolay]

Hi!

Thanks for the good feedback - very encouraging! About the issue - probably there's a missing "requires" somewhere (may be even in ST code). Investigating..

[shepsii]

Thanks, appreciate it! Happy to generate and share a basic MVC example if that helps...

[nickolay]

Can you post what you have as an archive? Will speed up the things for me.

[shepsii]

The archive I have generated does NOT include the touch directory usually built by Sencha Cmd, as then the file is too big. If you guys just paste across the touch directory from another 2.1.1 build, you'll have exactly what I have on my local machine.

Alternatively from a touch-2.1.1 dir, run sencha generate app UberGridMVC {target path} and make the changes as below...

What I've done so far:
pasted the ubergrid javascript files to lib/ub
pasted the css into resources/css
linked in the js file from index.html
added in the css file to app.json

[nickolay]

Thanks.

Ok, so this is whats happening.

I fixed one place in our code, where we use a reference to the class (Ext.scroll.View) w/o waiting for it being loaded. That advanced me to a next issue - a bug in SenchaTouch 2.1.1 class loader, reported as: http://www.sencha.com/forum/showthread. ... s&p=943056

Problem is that when we use "ubergrid-all-debug.js" (an only available option in trial version) a number of classes is defined in "ubergrid-all-debug.js" that has external dependencies. Because of the reported bug, loading of those classes fails. This problem should not exists in the full version where you will add the UberGrid sources to the class loader (and every class will be loaded separately).

And of course you can switch from using micro loader to the loading of full files:

    <link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/ubergrid-all-debug.css" rel="stylesheet" type="text/css" />
    
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
    <script src="lib/ub/ubergrid-all-debug.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>

[shepsii]

Ok, so I'm happy to purchase the full version, as long as you guys would of course support me in getting this working! I would like to keep the idea of only loading in the classes my app needs, especially for the build.

[nickolay]

Sure, we'll be glad to help you. I've just tried and it seems to work well with full version:

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'UberGrid': '../UberGrid/lib/UberGrid',
    'UberGridMVC': 'app'
});
//</debug>

[shepsii]

does it work at the moment if you build to testing/production also?

[nickolay]

Well, I can build it with "sencha app build" after adding path to UberGrid sources in the .sencha/app/sencha.cfg

app.classpath=${app.dir}/app.js,${app.dir}/app,${app.dir}/../UberGrid/lib/UberGrid

screen86.png (125.6 KiB) Viewed 9341 times

(Not sure, perhaps I should only modify app.json and do not touch the ".sencha" folder)

But just switching the microloader to "production" does nothing. Seems I'm missing some additional change (not a SenchaCmd expert), but I think it should work.