Does GluJS play well with Ext.Loader and SenchaCmd?

[skong...@gmail.com]

Hi, I'm very new to ExtJS and GluJS, and I'm having trouble getting GluJS to work well with Ext.Loader and SenchaCmd. Any advice for me?

We're using the Ext.Loader system during development so we can quickly see javascript changes by simply pressing refresh in the browser -- all the individual javascript files are loaded individually as indicated by ExtJS requires statements. However, the requires statements are supposed to indicate class ID's created using Ext.define().

I have a HelloWorld.js class containing the following GluJS example:

glu.defModel('Svmc.home.glu.HelloWorld', {
arriving:true,
message$:function () {
return this.arriving ? 'greeting' : 'farewell';
}
});

glu.defView('Svmc.home.glu.HelloWorld', {
title:'@{message}',
items:[
{
xtype:'button',
text:'test',
enableToggle:true,
pressed:'@{arriving}'
}
]
});

So there is no explicit Ext.define() here. I put 'Svmc.home.glu.HelloWorld' in a requires statement, and the Ext.Loader will load it okay if the folder structure matches, but SenchaCmd will return an error. We use SenchaCmd to concatenate all our javascript files into one for the production environment. It failed to complete with an error saying "Failed to find any files for ClassRequire 'Svmc.home.glu.HelloWorld'." So we can fool Ext.Loader without Ext.define() but we can't fool SenchaCmd.

Am I missing an obvious solution here? This is a barrier for us adopting GluJS...

Thanks,
Sharon

[Ryan Smith]

Hi Sharon,

At this time there is no support for sencha cmd and the ext.loader when using glujs.  Right now what we do for our projects is manually include each file during development and then switch to a compiled version for production.  There are many tools out there that will do the file concatenation and compression for you like sencha cmd, and since most of our applications were started long before sencha cmd first came out... we've just stuck with those tools.  I know that there are a lot of cool things that can be done with the sencha cmd, but at this time I'm not aware of any efforts to make glujs work natively with sencha cmd.  If you do find something, let me know because I'd definitely love to make the switch for my own projects :).

-Ryan

--
You received this message because you are subscribed to the Google Groups "GluJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to glujs+un...@googlegroups.com.
To post to this group, send email to gl...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/1dcceb92-5178-4396-a96c-bb00111cee25%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Sharon Kong]

Hi Ryan,

I found that wrapping up the GluJS code in an Ext.define() did work...  Is that a wildly stupid idea?  I'm too new to web development to intuitively know the answer!  The code looks like this:

Ext.define('Svmc.home.glu.HelloWorld', {}, function() {

glu.defModel('Svmc.home.glu.HelloWorld2', {

    arriving:true,

    message$:function () {

        return this.arriving ? 'greeting' : 'farewell';

    }

});

glu.defView('Svmc.home.glu.HelloWorld2', {

    title:'@{message}',

items:[

{

xtype:'button',

text:'test',

            enableToggle:true,

            pressed:'@{arriving}'

}

]

});

}());

  
Cheers,
Sharon

--
You received this message because you are subscribed to a topic in the Google Groups "GluJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/glujs/XaprCIi0c4Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to glujs+un...@googlegroups.com.

To post to this group, send email to gl...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/CAMT%2BkPsGgUtF88Sx3o6OKYTeFWGDx-rAjnuLwJF0uXJ-b8%3DUvw%40mail.gmail.com.

[Ryan Smith]

Hi Sharon,

I honestly hadn't even thought about doing something like that before.  If it works... I'd say stick with it :).  

Just so you know though... when you do a glu.defModel('Svmc.home.glu.HelloWorld2'... that isn't where the viewmodel is created.  Its actually in Svmc.home.glu.viewmodels.HelloWorld2.  There is also an associated view namespace which will be added as well (Svmc.home.glu.views.HelloWorld2), but I think your solution will work just fine because glujs will automatically go to the appropriate viewmodel/view folder to find the classes.  Having them defined as a peer to the viewmodel/view folder as just blank objects shouldn't conflict with anything, so I think you're good to go, but if you do find some conflicts with doing that then let me know and I might be able to help you through them.

Now I just need to do that for my app... and figure out how that sencha cmd thing works.  Thanks!  If you need any help with your glujs implementation, don't hesitate to ask... and welcome to the GluJS world!

-Ryan

[Sharon Kong]

Even simpler is to just add the Ext.define() of an empty object to the top of each file.  It does seem like a wasteful hack though!

Ext.define('Svmc.home.glu.HelloWorld', {});

glu.defModel('Svmc.home.glu.HelloWorld2', {

    arriving:true,

    message$:function () {

        return this.arriving ? 'greeting' : 'farewell';

    }

});

glu.defView('Svmc.home.glu.HelloWorld2', {

    title:'@{message}',

items:[

{

xtype:'button',

text:'test',

            enableToggle:true,

            pressed:'@{arriving}'

}

]

});

  
Cheers,
Sharon

[murrayh...@gmail.com]

Has anyone got a contemporary way of resolving this to use Sencha Cmd? I have an existing app that I would like to use some gluPanels in as a way to migrate to GluJS over time. I build with Sencha Cmd 5 at present. That app also uses nw.js to package for desktop although I dont expect that will cause any issues once I get past Sencha Cmd build.

Thanks,
Murray

[Josh VanderLinden]

I've tried to get cmd to be helpful several times, but it only seems to recognize "Ext.define('A.string.Literal', { ... stuff ...})".

You can't even do:

var myCls = 'A.string.Literal';
Ext.define(myCls, { ... stuff ... });

Nor can you do:

var mySpec = { ... stuff ... };
Ext.define('A.string.Literal', mySpec);

You also cannot use code generation and expect cmd to understand it. Cmd is frustratingly stupid.

I could be wrong on this. I posted on the forum about this sort of thing and got little response. Maybe Cmd can be made to be more intelligent--I hope someone proves me wrong.

[murrayh...@gmail.com]

I think I might have solved it. I found a way to keep Sencha Cmd happy and run a GluJS app (ie viewport root) in the built version. I am just testing the specRunner and will then test a gluPanel root in an otherwise standard ExtJS app (and hopefully package all that with nwjs!).

I will report back later today.

[murrayh...@gmail.com]

> I will report back later today.

Well, that was optimistic. ;-)

However, I have just completed a blog post that explains how to use GluJS with Sencha Cmd.

https://murrayhopkins.wordpress.com/2015/07/03/getting-glujs-to-play-with-sencha-cmd/

Along the way I have made a few changes to my fork of the GluJS repo (https://github.com/murrah/glujs) and assuming there are no immediate issues I will make a pull request.

Now I can get back to making my app with GluJS!

Thanks to you all, especially Ryan Smith for his patience with this complete noob.

Murray