UberGrid in an MVC app with Sencha Cmd

Questions related to our Sencha Touch based grid component
User avatar
shepsii
Posts: 14
Joined: Thu Feb 28, 2013 12:25 pm

UberGrid in an MVC app with Sencha Cmd

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

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

Re: UberGrid in an MVC app with Sencha Cmd

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

User avatar
shepsii
Posts: 14
Joined: Thu Feb 28, 2013 12:25 pm

Re: UberGrid in an MVC app with Sencha Cmd

Post by shepsii »

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

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

Re: UberGrid in an MVC app with Sencha Cmd

Post by nickolay »

Can you post what you have as an archive? Will speed up the things for me.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
shepsii
Posts: 14
Joined: Thu Feb 28, 2013 12:25 pm

Re: UberGrid in an MVC app with Sencha Cmd

Post by 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
Attachments
ubergridmvc.1.zip
(879.04 KiB) Downloaded 464 times

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

Re: UberGrid in an MVC app with Sencha Cmd

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

Code: Select all

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

User avatar
shepsii
Posts: 14
Joined: Thu Feb 28, 2013 12:25 pm

Re: UberGrid in an MVC app with Sencha Cmd

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

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

Re: UberGrid in an MVC app with Sencha Cmd

Post by nickolay »

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

Code: Select all

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'UberGrid': '../UberGrid/lib/UberGrid',
    'UberGridMVC': 'app'
});
//</debug>
Attachments
screen85.png
screen85.png (162.26 KiB) Viewed 8356 times
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
shepsii
Posts: 14
Joined: Thu Feb 28, 2013 12:25 pm

Re: UberGrid in an MVC app with Sencha Cmd

Post by shepsii »

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

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

Re: UberGrid in an MVC app with Sencha Cmd

Post by nickolay »

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

Code: Select all

app.classpath=${app.dir}/app.js,${app.dir}/app,${app.dir}/../UberGrid/lib/UberGrid
screen86.png
screen86.png (125.6 KiB) Viewed 8352 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.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

Post Reply