We Keep Coding

ExtJS - Where should I put new proxy file?

I have a new proxy for a ExtJS 6.2.1 application:
Ext.define('Ext.data.proxy.MyProxy', {
extend : 'Ext.data.proxy.Proxy',
// ...
});
Where would be the best way to put this class in my app directory structure?
Would just creating a new proxy dir and putting it inside be OK?

According to ExtJS convention, it is advised to start your class names with something that is not Ext, rather MyApp or something like that, so that you can tell which class belongs to ExtJS framework. And the last part in the class name should specify the class you are creating, which is also the name of the .js file that contains the definition.
So create a file called MyProxy.js, and define your class like:
Ext.define('MyApp.data.proxy.MyProxy', {
extend : 'Ext.data.proxy.Proxy',
// ...
});
In ExtJS Ext.data.proxy.Proxy is defined in a Proxy.js file in ext/data/proxy folder. So I would recommend mirroring this structure, and if your application resides in app folder (as with default settings), the full path of your own proxy class definition would be:
/app/data/proxy/MyProxy.js

Apostrophe-pieces-pages can't register page type

I try to create a new pieces page, kind of a blog style in apostrophe cms. I have trainings, trainings-widgets and trainings-pages folders. I registered them all in app.js; pieces by themselves and widgets work beautifully. The problem is when I try to add page of Trainings type. I get Error: template not found: pages/trainings-page.html in console.
In apostrophe-pages/index.js I have it configured:
module.exports = {
types: [{
name: 'home',
label: 'Home'
},
{
name: 'trainings-page',
label: 'Trainings'
}
]
}
And in trainings-pages/index.js:
module.exports = {
name: 'trainings-page',
label: 'Training Page',
extend: 'apostrophe-pieces-pages',
piecesFilters: []
}
I can't figure out what might be wrong here.
Edit: A showcase git:
https://github.com/msdsk/apostrophe-error

In addition to the module directory name being incorrect, as noted:
lib/modules/trainigs-pages should be:
lib/modules/trainings-pages
When we fix this we graduate to a new error:
Error: template not found: trainings-pages:layout.html
You are extending layout.html. But that file is in a different module, apostrophe-pages, that trainings-pages does not extend, and so it is never found. This is our fault for not recommending a more universal location for layout.html in the tutorial.
You can solve it two ways:
OPTION ONE
Move layout.html to lib/modules/apostrophe-templates/views/layout.html.
Always extend it like this:
{% extends 'apostrophe-templates:layout.html' %}
This "cross-module" path syntax will find it in the apostrophe-templates module no matter what module you're in.
OPTION TWO
Another option is to set the viewsFolderFallback option of apostrophe-templates in app.js, like this:
'apostrophe-templates': {
viewsFolderFallback: __dirname + '/views'
},
And create a views/ folder at the top level of the project and move layout.html there. Then you don't have to use the special syntax, you can just write layout.html and if the module doesn't have its own, it'll look in the fallback folder. This is what we usually do in-house.
I'll discuss with the rest of the Apostrophe core team whether the tutorial should recommend option one or option two, and adjust the apostrophe CLI to set up option two automatically if that is preferred.
(There is a third option: you can put things in lib/modules/apostrophe-module/views and it works as a fallback without any configuration. That's because all modules eventually inherit from apostrophe-module. But our feeling in the past has been that this approach is not very intuitive.)

There is a typo error on your module directory's name : lib/modules/trainigs-pages should be lib/modules/training-pages

how to make sails-linker load different assets in sub/child pages?

Please see attachment.
That's the template structure. login.jade extends layout.jade.
My problem is that I want:
a global.css file loaded in all pages (done)
login.css file loaded only when viewing login.jade (problem)
I already created a working pipeline configuration. The task looks like this:
devStyles: {
options: {
startTag: '<!--STYLES-->',
endTag: '<!--STYLES END-->',
fileTmpl: '<link rel="stylesheet" href="%s">',
appRoot: '.tmp/public'
},
files: {
'.tmp/public/**/*.html': require('../pipeline').frontendGlobalCssFiles,
'views/**/*.html': require('../pipeline').frontendGlobalCssFiles,
'views/**/*.jade': require('../pipeline').frontendGlobalCssFiles,
'views/auth/login.jade': require('../pipeline').frontendLoginCssFiles
}
}
The problem is that the last files rule doesn't work. I'm sure that frontendLoginCssFiles is ok, since if I load it with the 'views/**/*.jade' path, it works. So what's the problem here?

Ok, solved. Basically, the problem is not strictly related to jade inheritance. What sails-linker really does is add the assets to the physical files, no matter if they're parents, children or partials. All it does is take the passed files, search for the proper start/end Tags and add the related html BEFORE compiling the real served pages.
My problem was that I was not adding the start/end tags to the login (child) page.
Anyway, even doing so, we've got then the problem that ALL the compiled pages will load ALL the assets. So for example, the login assets will be also loaded on the home page. Not so good.
To solve, briefly, I used specific start/end tags for page-specific assets.
Following, the 'long' story:
Note: since we're speaking about jade templates, in sails-linker we are looking into the *Jade tasks, and therefore the comments are written with jade syntax (ex. // STYLES and not <!--STYLES-->)
First, we'll isolate 'global assets' > the ones we want to load on every page:
Change all the // STYLES instances to something like // GLOBAL STYLES. Both in sails-linker and eventually on .jade views.
/tasks/pipeline.js: rename default filelists to something like globalCssFiles, jsfiles etc, and change all the instances of that name.
/tasks/config/sails-linker.js: rename all the instances of point 2 modifications.
Second, we'll add 'page assets':
On child jade pages, use something like // PAGE STYLES comments.
/tasks/pipeline.js: create page-specific filelists, so ex:
var frontendLoginCss = ['styles/login.css'];
and below:
module.exports.frontendLoginCss = frontendLoginCss.map(function(path) {
return '.tmp/public/' + path;
});
/tasks/config/sails-linker.js: create page-specific tasks, like:
devPageStylesJade: {
options: {
startTag: '// PAGE STYLES',
endTag: '// PAGE STYLES END',
fileTmpl: 'link(rel="stylesheet", href="%s")',
appRoot: '.tmp/public'
},
files: {
'views/auth/login.jade': require('../pipeline').frontendLoginCss
}
}
/tasks/register/*: add the relevant tasks in all the files where you should to. For example, my linkAssets.js could be like this:
module.exports = function (grunt) {
grunt.registerTask('linkAssets', [
'sails-linker:devJs',
'sails-linker:devStyles',
'sails-linker:devTpl',
'sails-linker:devJsJade',
'sails-linker:devPageJsJade', //added
'sails-linker:devStylesJade',
'sails-linker:devPageStylesJade', //added
'sails-linker:devTplJade'
]);
};
In jade templates, use block syntax for importing the styles/js, so you can use append to append the assets to the block. Ex, the general 'parent' layout.jade will have:
block styles
// GLOBAL STYLES
// GLOBAL STYLES END
while the child template login.jade will have:
append styles
// PAGE STYLES
// PAGE STYLES END
Final tip: it really doesn't matter where you write the append directives in child templates, they'll always appended where the parent template did defined them. So I'll write all appends on the bottom of my child templates (more clean).
Hope will be usefull for people with same issues!

EXT JS 5 - Override ViewController definition?

I want all my ViewControllers to have two custom methods.
I tried to accomplish this by creating a class that extends from the ViewController, called CustomViewController, and then having my other ViewControllers extend my CustomViewController class, but then I get a warning message in the console saying:
[W] Overriding existing mapping: 'controller.login' From 'MyApp.view.mybutton.MyButtonController' to 'MyApp.view.override.CustomViewController'. Is this intentional?
And the component I tested it with didn't even load.
I realize I could do this straight from the ext-all-debug.js library that's inside the ext folder in my app's root folder, but then when I use Sencha CMD to build the app it'll use my original library that's in my workspace, and not the one I have in my app's folder, so my changes will only work while developing and won't carry on to production.
What's the proper way of doing this? Is there a standard?

That error probably means that you have the same alias config on both Eathisa.view.login.loginController and Eathisa.view.override.EathisaViewController. There will be some ambiguity as to which class to load when you try to use it by an alias, that is why the class system is warning you.
From what you describe it doesn't sound like you need an override at all. If you need to have some methods in all your ViewControllers, you can add them in a custom ViewController and then use it as a base for all other ViewControllers in your application, instead of Ext.app.ViewController:
Ext.define('Eathisa.view.AbstractViewController', {
extend: 'Ext.app.ViewController',
// Note that there is no "alias" property here, so that
// this abstract VC can't be instantiated by alias
// You can even make these custom methods excluded from
// production build by enclosing them in the <debug></debug>
// comment brakets:
//<debug>
methodFoo: function() {
...
}
//</debug>
});
Ext.define('Eathisa.view.login.LoginController', {
extend: 'Eathisa.view.AbstractViewController',
alias: 'controller.login',
methodThatUsesFoo: function() {
// Just don't forget to enclose the code that *calls*
// debug-only methods in the same <debug> brackets
//<debug>
this.methodFoo();
//</debug>
...
}
});
If it's not feasible to extend all your ViewControllers from the same abstract VC, implement the custom methods in a mixin instead, and include that mixin in the VCs that need debug methods:
Ext.define('Eathisa.mixin.Debug', {
methodFoo: function() {
...
}
});
Ext.define('Eathisa.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
// Conditionally include the debugging mixin
//<debug>
mixins: [
'Eathisa.mixin.Debug'
],
//</debug>
...
});

How to create two separate pages in ember

I am trying to integrate ember into my grails app. I've got one page working in Ember but am unsure of how to have two different pages.
I have a page called color.gsp the server does nothing but just redirects to this page so the method is just def color() {}
In this page I have several templates one of which is Application template. I have a App.js which handles everything on this page and everything is working fine on this page.
Question
Now I want to have another page called shade.gsp where also the server should not do anything by redirect so again the method will simply be def shade() {}.
The problem is, how would App.js know whether to update application template in shade.gsp or color.gsp.
I understand this might not be the ideal way to do things in ember. but since I'm integrating ember rather than complete overwrite, i need this option to work. Is there a way I can have separate JS files for color and shade?

I think that changing your js structure, to reflect your dependencies can solve this problem.
// App.js
App.Router.map(function() {
this.route('color');
this.route('shade');
});
// Color.js
// here all color resources
App.ColorRoute = Ember.Route.extend({
// your implementation
});
// Shade.js
// here all shade resources
App.ShadeRoute = Ember.Route.extend({
// your implementation
});
In your ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery', 'handlebars', 'ember'
resource url:'js/App.js'
}
shade {
dependsOn 'application'
resource url: 'js/Shade.js'
}
color {
dependsOn 'application'
resource url: 'js/Color.js'
}
}
In shade.gsp
<r:require modules="shade"/>
In color.gsp
<r:require modules="color"/>