I am trying to clean up and restructure my javascript in my app, but once I change it it stops working. I am using ext scheduler in my app so that might be the problem. Here is how I want to set up
/ext/scheduler-3.0.0(all core code for schedule components go here)
/ext-all.js
/myscheduler(custom code for schedule components go here)
--/global/
----/view/
------globalscheduling.js
/model/
And This is how I start my app
ExtLatest.Loader.setConfig({enabled: true});
ExtLatest.define("scheduler.Application", {
extend: "Ext.app.Application",
requires: ["myscheduler.global.view.globalschedulegrid"],
name: "scheduler",
appFolder: "",
launch: function () {
getData()
}
});
However extjs still trying to go to https://c.na17.visual.force.com/apex/myscheduler/global/view/globalschedulegrid.js to find my view file what I doing wrong here?
Ext.Loader.setPath('myscheduler.global.view.globalschedulegrid', 'path to my scheduler');
OR
Ext.Loader.setConfig({
paths: {
'myscheduler': 'myscheduler',
}
});
Link to 5.0 Doc (Not sure which version you are using but it's the same)
5.1 as noted in the title. I didn't have to set the path for globalschedulegrid. Just specifying the paths in setConfig like this
ExtLatest.Loader.setConfig({enabled: true,
paths: {
'scheduler': "{!URLFOR($Resource.ConnectWeb, 'scripts/libs/scheduler')}"
}
});
Related
According to the docs, when building universal app with sencha cmd, one can set the app's main view using either mainView config or within the launch() method of Ext.app.Application (using setMainView method) like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var app = this.getApplication();
//app.setMainView('MyApp.view.main.Main');
//app.setMainView({xtype: 'app-main'});
},
mainView: 'MyApp.view.main.Main'
});
...
A fiddle is available here: Sencha Fiddle
And, it works with the classic toolkit, but when using modern one, the things can get wrong.
If you are using the mainView config - it works as expected (this is by default when you execute sencha generate app).
If you are using the setMainView() method, however, it depends of the parameter type you pass:
you will get a blank screen when you pass the full class name of the view as string ('MyApp.view.main.Main'). The view is created (reachable via Ext.ComponentQuery.query('app-main') within the console), but is invisible
you will get an error when you pass a config object for the view ({xtype: 'app-main'})
You can try it in the Fiddle above by commenting/uncommenting rows 7,8,11 (make sure a modern toolkit is selected before hitting Run).
Any idea how to resolve this, pls?
The ability to use the launch method logic is vital - for example if you are trying to implement an app with login functionality.
If modern add the main view to the viewport otherwise just set the main view
Ext.application({
name: 'Fiddle',
launch: function () {
if (Ext.isModern) {
Ext.Viewport.add([{
xtype: 'app-main'
}]);
} else {
var app = this.getApplication();
app.setMainView('MyApp.view.main.Main');
}
},
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
title: 'Panel Title',
html: 'panel body data...'
});
I haven't found anything related to this topic.
I'd like to import pusher like normally is done with other js frameoworks:
npm install pusher-js
Then you just import the library:
import Pusher from 'pusher-js';
or
const Pusher = require('pusher-js');
Please share good practices to accomplish that in an ExtJS application.
The last resort would be to just include the min file in app.json:
...
"js": [
{
"path": "https://js.pusher.com/7.0/pusher.min.js",
"bundle": true,
"compress": false
}
], ...
Or even worse, put the include in the index.html file:
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
Any ideas?
Thanks.
if including it using app.json is not what you want you can load it at the time you need it.
Async (onLoad, onError are the promise)
Ext.Loader.loadScript({
url: 'pusher-js',
onLoad: successFn,
onError: errorFn,
scope: this
});
Sync (the code will continue, after the file has been loaded)
Ext.Loader.loadScriptsSync(url|[url]);
Optional Approach
If you add Ext.require ExtJS will try to load the file and you can use this in your controller.
Ext.define('MyApp.view.SomeViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.someview',
init() {
// Preload additional functionality
Ext.require('MyApp.libs.pusher-js');
// from folder ===> MyApp/app/libs/pusher-js
}
})
OR
Read this as a starting point.
Using app.json you can get it all prepared as:
"js": [
{
"path": "https://js.pusher.com/7.0/pusher.min.js",
"remote": true
}
],
...
Inside your initialization:
var pusher = new Pusher('APP_KEY', {
cluster: 'APP_CLUSTER'
});
This will load the file automatically and you do not have to import it in any way.
I am trying to compile all angulara templates into a single js file.
Something like what ember does with ember-cli.
So I successfully managed to minify and concat all the javascript files.
I have just 2 files now vendor.js and application.js and whole lot of template files which I want to cram into templates.js.
How do I go about it? If some one could give step by step explanation, please. Any links would be appreciated too.
Surprisingly there is no information about this anywhere.
I am using mimosa as build tool, it seemed to me the easiest.
Here is my mimosa config:
exports.config = {
modules: [
"copy",
"stylus",
"minify-css",
"minify-js",
"combine",
"htmlclean",
"html-templates"
],
watch: {
sourceDir: "app",
compiledDir: "public",
javascriptDir: "js",
exclude: [/[/\\](\.|~)[^/\\]+$/]
},
vendor: {
javascripts: "vendor/js"
},
stylus: {
sourceMap: false
},
combine: {
folders: [
{
folder:"vendor/js",
output:"vendor.js",
order: [
"angular.js"
]
},
{
folder:"js",
output:"main.js",
order: [
"application/main.js"
]
}
]
},
htmlclean: {
extensions:["html"]
},
htmlTemplates: {
extensions: ["tpl"]
},
template: {
outputFileName: "templates"
}
}
It does generate templates.js file without any errors. But when I link it, angular spits a bunch of errors.
Once compiled, how do I actually call those templates from ng-include and from the route provider?
I assume that it is the same as I would call a script template using the id which in my case is derived from template original file name, right?
Maybe I am missing some important steps.
The build tool is not important here although desirable. If some one could show how to do it manually without a build tool I would figure out the rest.
Thanks.
I'm using Gulp as my build tool, and in that, there's a plugin gulp-angular-templatecache which pre-compiles and registers all templates for your module in the angular $templateCache - no changes are required to any of the calling code to use these. EDIT: The Angular documentation for $templateCache explains how the templateCache works.
It might be worth reading through the documentation for gulp-angular-templatecache to see how that pre-populates the $templateCache to see if you can crib something that would work with your build process.
Here's my gulp task that does the job:
var templateCache = require('gulp-angular-templatecache');
gulp.task('buildjstemplates', function () {
return gulp.src(['public/javascripts/app/**/*.html'])
.pipe(templateCache({module: 'app'}))
.pipe(gulp.dest('public/javascripts/app/'));
});
i try migrate a developement environment to production with SDK Sencha tool.
But the proccess of building exclude of the "app-all.js" all models and stores defined in my App folder.
Only loads views and controllers. Any ideas why does this happen ?
Regards !.
Edit form more info:
For example mi cocina.js works as an app.js:
Ext.Loader.setConfig({
enabled : true,
paths: {
Ext: 'vendor/ext/src',
My: 'app'
}
});
Ext.application({
name: 'Alnitak',
appFolder: 'app',
controllers: ['Env','Cocina'],
launch: function(){
...
}
});
An the cocina controller:
Ext.define('Alnitak.controller.Cocina', {
extend: 'Ext.app.Controller',
store: [
'PlatosArmados',
'Niveles',
'Submenues',
'AlumnosPlato'
],
model: [
'PlatoArmado',
'Nivel',
'Submenu',
'AlumnoPlato'
],
views: [
'grid.PlatoArmado',
'grid.AlumnoPlato'
],
init: function() { ...}
});
What i have modify ?
Assuming you mean Sencha Command and not SDK, you have to change a few things:
Specify all your js paths in .sencha/app/sencha.cfg (parent folder is enough)
Build a new template app (http://docs.sencha.com/cmd/) and follow the pattern, not the Sencha Architect pattern for the Loader you use above. Sencha Cmd has its own way of handling javascript loading. You would not need to specify the paths with Ext.Loader.setConfig()
If you want to use the Architect pattern though, here's the guide.
Is there someone here who made a MVC application using EXTJS 4 BETA 3? and works fine??
please help me how?, ..
I have followed step by step here .. and #Abdel Olakara help
but there is still an error ... here my firebug
[Ext.Loader] Synchronously loading 'AM.controller.Users'; consider adding
Ext.require('AM.controller.Users') above Ext.onReady
[Ext.Loader] Synchronously loading 'AM.store.Users'; consider adding
Ext.require('AM.store.Users') above Ext.onReady
this.getView('Viewport') is null
When i read this at the forum ... there are still some bug with MVC guide ...
so, if you ever make it works.. how?
this is my Application.js :
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
controllers: [
'Users'
],
views: [
'user.List'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
i'm trying to learn MVC in Extjs...
sorry if my english bad..
Well, I think I should take back my words! I had some success after going through sencha blog. And finally, got my MVC "Skeleton" running!
Here is the working code:
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
autoCreateViewport: false,
controllers: [],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Please note that, the code is very minimal and have removed the common errors reported in forums and here. The next step would be to start playing with this code and add controllers, views etc onto it!
I will keep updating this answer going forward.
Update: The first two error mentioned are not actually errors. They are warnings and application works fine even if they display these warnings. The third error you mentioned is a stopper!
Solution to Viewport problem Here are two ways to solve it.
Use the autoCreateViewport: false, property and define your viewport (I see that you have defined your viewport in launch method)
Create a Viewport.js and save it in view folder. In this case, I felt my launch method empty and moved the viewport code to Viewport.js file. But I do get an error:
Uncaught TypeError: Cannot call method 'create' of null
I do use ExtJS 4.1.
In my code [Ext.Loader] Synchronously loading 'OOO.store.News'; consider adding
Ext.require('OOO.store.News') above Ext.onReady warning message was invoked if I place
stores: [
'News',
],
in my app/Application.js file instead of app/controller/OOO.js file.
So put stores:[], in controller file.