Im using sencha ext-6.5.3.57 and creating a universal application using the below command.
sencha -sdk C:\Users\AANANTHA\sencha-sdks\ext-6.5.3.57 generate app MyApp
Once i build and launch the app using sencha app watch command i can see and modify only classic view , if i change anything in modern view its not reflecting in the app.
Please suggest as i'm new to sencha.
I tried changing the code in classic view and modern view js files .But i can see changes reflecting only in classic view .
You have to define a condition to select a specific profile to show to the user.
If you have just made a fresh universal app, this condition is located in index.html, in Ext.beforeLoad you'll see the profile is set based on the url.
So for testing purposes you can change your profile putting ?classic or ?modern at the end of your url, if you need or want to create other profiles, you can define them in app.json in the builds part.
Related
Until now we are using the following command to develop our extjs apps: sencha app watch classic or sencha app watch modern
Because sencha app watch has the effect to reload every time a save occurs, we do not want this effect anymore.
Which are the commands to manually do in steps what sencha app watch does ?
We read the reference of sencha cmd: https://docs.sencha.com/cmd/6.x/advanced_cmd/cmd_reference.html#sencha_app_build
After reading it we thought that if we execute sencha app refresh classic and then execute sencha web start would be the solution to what we are looking for: to manually refresh the app rather let sencha app watch do it automatically all of the time.
Unfortunately these two commands are not correct or not enough because the app does not load using them.
You can use simply sencha app refresh .
Also when you post please mention verison number of Ext JS.
We have been developing using the default classic build descriptor so far to build dynamic web pages for desktop.
Now we need on the same application to work with mobile but not necessarily have the same home page on desktop or mobile load.
The user visits the page http://example.com using a desktop browser. Then he sees the view layout for the desktop
The user visits the page http://example.com using a mobile browser. Then he sees the view layout for the mobile (could be a total different view file)
We found this page inside documentation without much help: https://docs.sencha.com/extjs/6.0/core_concepts/tablet_support.html
Actually a page that is currently working fully ok on desktop when switching to the Chrome Simulator (setting for example the Apple iPad simulator) we get the following errors in the console:
We need the few steps that are necessary to setup it correctly.
When you create a brand new application in ExtJS 6, you acess sencha cmd and call: "sencha generate app NameApp ../folderApp"
Then, the following structure is created: Click here to see the structure
I don't know about the structure your code was created, but in order to work on desktop and mobile devices, it need to be in this structure generated by sencha cmd.
After to get this structure (generate a new application is a better practice for that) you need to put the "rigth model of extjjs 6.0" in your mind. ExtJS allow MVC or MVVM architetures. MVC architeture is basically controlled by a grand controller that can control all components of your application. In other hand, MVVM architeture have a controller for each view - it is instanciated when view is instanciated, and destroyed when view is destroyed. This architeture is recommended in ExtJS, especially in the lasts versions.
You have now to transfer the code done in your actual aplication to the new application and architeture. Put all your view structure in NameApp > classic > src > view. Open a new folder for each view. This folder should contain the view, and the controller for this view. For example, let's create a list view:
NameApp > classic > src > view > list > List.js
NameApp > classic > src > view > list > ListController.js
And so on...
Now you can create mobile views and controllers separated, on mobile > src > view folder, following the same model followed in classic, but you have to use components from mobile toolkit of course.
Until here, you have a separated mobile and classic app in the same code. But you can use the power of ExtJS 6 by extend generic classes from app folder, in order to optimize your code. For example, you can create a generic controller for an specific view, that will be extended in classic and modern folders:
NameApp > app > view > list > ListControllerGeneric.js
Ext.define('NameApp.app.view.list.ListControllerGeneric', {
extend: 'Ext.app.ViewController',
//here you put code using in modern and classic both
});
NameApp > classic > src > view > list > ListController.js
Ext.define('NameApp.app.view.list.ListController', {
extend: 'NameApp.app.view.list.ListControllerGeneric',
//here you put code using in classic only
});
NameApp > modern > src > view > list > ListController.js
Ext.define('NameApp.app.view.list.ListController', {
extend: 'NameApp.app.view.list.ListControllerGeneric',
//here you put code using in modern only
});
One important thing to avoid crashes is to create all the views from the classic folder into the modern folder even if you do not actually use them on mobile. In addition when using both desktop and mobile you need sencha app watch modern to test both classic and modern but you need sencha app build to build both (or sencha app build to build specific).
I hope this explanation can be useful for you.
Thanks
The question is very broad, and I can't see what you have done and why it fails. The touch support named behind your link is for the classic toolkit, not for the modern, so if you want to use modern toolkit, forget about that link.
As with most of these framework changes, you are best off creating a new application environment (sencha generate app) and then porting (copying) your source code over. When generating a new application environment, don't provide a toolkit config, so a universal app is created.
Then don't just put all the code into a single directory. You have to dissect your existing code files into two parts: "Used for both toolkits" and "Used for classic only". Views are usually classic only, while some of the models and stores may be universal. The two parts go into two different directories: src for the universal part and classic/src for the classic part.
Only then write the views for modern toolkit (put them into modern/src), and everything should compile fine.
Im very new to sencha, but i want to point out that using:
sencha app watch
tryied to find all my files on the app folder, even if i use "?modern" or use the chrome devs as a mobile user-agent.
Using:
sencha app watch modern
solved the issue. This command will check for the user-agent or the "?modern" and "?classic" tag and request the correct files.
This answer was originally in #Albanir Neves response, i just made it more clear here.
I need my own splash screen when starting up my app.
I use SenCha Touch + Cordova.
Searched and found several ways to do splash screens, however I do not think they are up-to-date.
I saw some code which tried to add a few lines of code into launch function, but the latest Sencha Touch does not do it in the app.js any more instead, it add the Main view to its viewport.
Also, I checked Sencha Touch doc and found
Class currently only works with Cordova and does not have a simulated
HTML counter part. Please see notes on Cordova Docs for proper Native
project code changes that will need to be made to use this plugin.
But it provides some methods after that statement :
newExt.device.Splashscreen( ) : Ext.device.Splashscreen
So I feel confused and don't know which one should I follow.
What is the latest approach to do the splash screen in Sencha Touch?
I currently have the exact same problem as you. Here is information I got from Sencha:
All splashscreen functionality is provided by the Cordova/Phonegap plugin. Our class methods are just convenience methods to the cordova native API and will provide a 'stub' for you if Cordova is not available so that your application does not bomb upon startup (no splashscreen shows, it's just that your app will not crash when trying to access an API that is not there).
In theory, if your application is built with Cordova/Phonegap and your splashscreen images are provided with the application build as specified by Cordova/Phonegap you would initiate a call to Ext.device.Splashscreen.show() after the device is ready (as demonstrated in the example found in http://docs.phonegap.com/en/2.6.0/cordova_splashscreen_splashscreen.md.html#Splashscreen)
The splashscreen feature is a native API, not one that is provided by Touch. You can, should you wish, provide your own coding in your index.html file of your native application which will manually display an image (much the same way we do the initial CSS flashing load indicator), but ultimately that would be up to you to implement manually.
I would suggest that you follow the Cordova guidelines, place your images in the res/drawable directory of your android project and let Cordova do all the hard work for you by just making a single call to Ext.device.Splashscreen.show() when the device is ready and then calling Ext.device.Splashscreen.hide() in the launch area of your application to hide it when your app has rendered its view.
To include Cordova in your application, we now provide you with sencha cmd switches to enable Cordova. You can find more information here
http://docs.sencha.com/touch/2.3.1/#!/guide/cordova
Please note that you will have to download all required components of Cordova, modify the Cordova configuration files as outlined in the Cordova docs, and build the application using either the Cordova command line interface (CLI) or your favourite Android build IDE (Eclipse, IntelliJ, etc).
Use this plugin https://build.phonegap.com/plugins/620
When you use this plugin and build locallym you have to place the icons and splashscreen in the res/ folder manually.
This thread works well in a mobile app but in a desktop app it would seem I cant add the reference to the external JS in an extjs desktop app.
The instructions from Sencha somehow don't correspond or it doesn't work for me when I try and follow them. So, I am selecting Resources->Library and can see the attribute Include JavaScript (ticked) and Library Base Path:/ext.
The JS file I am using I use in a phone app and its fine - I added it to the app.json in that and compiling the app copies the file over to the target and defers the loading.
In this case with SA I am not seeing the file copied to the target - nor can I follow the instructions with SA 3 that are documented. The only way I can add an external JS is by dropping it onto the filesystem into the ext folder manually. Again, it doesn't appear in the target and certainly errors when I run the app with
Uncaught ReferenceError: hex_sha512 is not defined
This JS has been used in other apps, is proved and tested but just relates to SA or my wrong use of SA.
The proper way to add a resource in Sencha Architect, regardless of framework, is to add it as a JS resource.
This is most easily done by hitting ctrl-t (or cmd-t on a mac) and typing "js resource" (or some shortened string thereof to get autocompletion)...
Alternatively, you can use the toolbox, click "Resources", and drag out or double click "JS Resource"
These are just different user interfaces to accomplish the same task.
Once you've added your JS resource using one of the above methods, you need to set the URL in the config pane (at bottom right unless you've configured Architect to swap the left and right panes)...
The URL is to be set relative to your project folder. If you copy the JS file into your project root under a folder called "lib" for example, then you'd set the url config to "lib/foo.js" - where foo.js is the filename, of course.
Hope that helps!
My lack of understanding of the instructions or they are not clear:
It would seem the way to do it is take eyes up to the top right of SA and spot the + button as shown in the image.
Add the JS resource and scroll up because it may be hidden behind the property inspector.
On setting the url field under properties, the source of the JS appears in the main editing window.
Certainly works fine after the app is built.
I already have an ExtJS app but now I'm trying to build a mobile version with Sencha Touch. I want the browser to detect if it's running on mobile or not. That works fine, but what is my next step?
I have it redirected to a /mobile folder with a new index.html and that works fine until I try to reach classes from a parent class.
Is it possible to load the mobile app.js instead of the extjs app.js in the primary index.html?
I don't think you will be able to get away with having just one application. Ultimately you would need to create two different apps - one using ExtJs framework, another using Sencha Touch.
Whether you will be able to share some code is a good question. I think you should be able to share models, but that's about it. And even though - I would not recommend doing that either. Because even if show similar information from the same back end in both full and mobile version of your application, you might not need all of it in the mobile application. And if you don't need all of it - your models will be different.