PDA

View Full Version : Trying to get Login example to work in Fiddle



hacket82
3 Feb 2016, 7:48 AM
I saw this great Example put out from the Sencha developers on how to build a Login page in Ext JS 6, I read thru it really liked what I read and ended up filling some holes in my knowledge with the article.

https://docs.sencha.com/extjs/6.0/getting_started/login_app.html

But when I went to try and repeat the code base in a Sencha Fiddle, it would not work, could someone tell me what I am missing here?

https://fiddle.sencha.com/#fiddle/153g

This is almost 99% the same code copy and pasted, with the same directory structure too. yet it does not run.

Gary Schlosberg
3 Feb 2016, 4:28 PM
According to the console log, you're missing some classes:


[E] [Loader] DashboardApp.view.main.MainModel from DashboardApp/view/main/MainModel.js
[E] [Loader] DashboardApp.view.main.List from DashboardApp/view/main/List.js
[E] [Loader] DashboardApp.view.main.Main from app/view/main/Main.js


I don't see MainModel.js in your application.

hacket82
4 Feb 2016, 6:40 AM
That would make sense that this Data Model file is missing, I did not include it. I will add something to the project now for this file. But I am also seeing files listed as not found that are present.

Am I setting up Fiddle to fail in some way. Here is what I see from my firebug Console that is telling me is not loading. it includes the LoginController.js file, which is present, and a few others that are present also, so I am thinking I am not understanding something correctly about the newer ViewModel concept in Ext JS 6 maybe. Is my file directory structure wrong possibly?

mitchellsimoens
4 Feb 2016, 6:33 PM
Unfortunately Giddle does not play well with requiring classes because the filesystem the GUI shows is just a fake filesystem. All the files are thrown inline in the generated HTML. So for fiddle, simply removing/commenting out the requires will help not getting the loading errors.

hacket82
4 Feb 2016, 8:49 PM
First off, love the new name for the product "Giddle"!!

Its rather dissapointing, but also enlightening to know that the filesystem is fake, thank you for that heads up. I was hoping to use it to better understand MVVM concepts with Sencha and how to build a proper structure, but looks like I will need to go to one of the corporate development web servers instead.

Now I commented out the requires lines, and now I get no Console Errors which is nice, but... unfortunately it does not render anything. Does anyone have an idea on how I can identify the next issue here?

mitchellsimoens
5 Feb 2016, 4:10 AM
First off, love the new name for the product "Giddle"!!

You know helping you use Fiddle is optional and I don't get anything out of it especially since your "nothing is rendering" isn't Fiddle's fault right?

The reason nothing is rendering is because you're just defining classes and never creating one. It's like going to the grocery store, putting stuff in a shopping cart and then leaving without your groceries. In your app.js, you define DashboardApp.Application but never create an instance of it. The real app.js in a Cmd generated app uses Ext.application and the Ext.define that defines your application is in app/Application.js.

Also, using your fiddle at https://fiddle.sencha.com/#fiddle/153g you are still requiring classes that will present the loading errors.