Sencha Touch JsonP Callback doesn't recognise Ext object - ajax

I am using Sencha Touch's Ext.data.JsonP.request call in the following manner:
Ext.data.JsonP.request({
url: 'php/apiCustomer.php',
callbackKey: 'callback',
scope: this,
params: {
action: 'AttemptLogin',
email: name,
password: password,
format: 'json'
},
success: function(result, request) {
// ...
}
});
The response looks like this:
Ext.data.JsonP.callback1({...})
Under normal circumstances, this works exactly correctly. However, when running the built production code, I get the following error:
Uncaught TypeError: Cannot read property 'JsonP' of undefined
I did my own sleuthing and discovered that when the callback is evaluated, this is all that is known of the 'Ext' object:
Ext.blink
Ext.microloaded
Ext.filterPlatform
Has anyone encountered this before?
EDIT:
The contents of my app.json file are:
{
/**
* The application's namespace, used by Sencha Command to generate classes
*/
"name": "MyApp",
/**
* The file path to this application's front HTML document, relative to this app.json file
*/
"indexHtmlPath": "index.html",
/**
* The absolute URL to this application in development environment, i.e: the URL to run this application
* on your web browser during development, e.g: "http://localhost/myapp/index.html".
*
* This value is needed when build to resolve your application's dependencies if it requires server-side resources
* that are not accessible via file system protocol.
*/
"url": null,
/**
* List of all JavaScript assets in the right execution order.
* Each item is an object with the following format:
* {
* "path": "path/to/script.js" // Path to file, if local file it must be relative to this app.json file
* "remote": true // (Optional)
* // - Defaults to undefined (falsey) to signal a local file which will be copied
* // - Specify true if this file is a remote file which will not to be copied
* "update": "delta" // (Optional)
* // - If not specified, this file will only be loaded once, and
* // cached inside localStorage until this value is changed.
* // - "delta" to enable over-the-air delta update for this file
* // - "full" means full update will be made when this file changes
* "x-bootstrap": true // (Optional)
* // Indicates a development mode only dependency.
* // These files will not be copied into the build directory or referenced
* // in the generate app.json manifest for the micro loader.
*
* }
*/
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
],
/**
* List of all CSS assets in the right inclusion order.
* Each item is an object with the following format:
* {
* "path": "path/to/item.css" // Path to file, if local file it must be relative to this app.json file
* "remote": true // (Optional)
* // - Defaults to undefined (falsey) to signal a local file which will be copied
* // - Specify true if this file is a remote file which will not to be copied
* "update": "delta" // (Optional)
* // - If not specified, this file will only be loaded once, and
* // cached inside localStorage until this value is changed to either one below
* // - "delta" to enable over-the-air delta update for this file
* // - "full" means full update will be made when this file changes
*
* }
*/
"css": [
{
"path": "resources/css/app.css",
"update": "delta"
},
{
"path": "resources/css/custom.css",
"update": "delta"
}
],
/**
* Used to automatically generate cache.manifest (HTML 5 application cache manifest) file when you build
*/
"appCache": {
/**
* List of items in the CACHE MANIFEST section
*/
"cache": [
"index.html"
],
/**
* List of items in the NETWORK section
*/
"network": [
"*"
],
/**
* List of items in the FALLBACK section
*/
"fallback": []
},
/**
* Extra resources to be copied along when build
*/
"resources": [
"resources/images",
"resources/icons",
"resources/startup"
],
/**
* File / directory name matchers to ignore when copying to the builds, must be valid regular expressions
*/
"ignore": [
"\.svn$"
],
/**
* Directory path to store all previous production builds. Note that the content generated inside this directory
* must be kept intact for proper generation of deltas between updates
*/
"archivePath": "archive",
/**
* List of package names to require for the cmd build process
*/
"requires": [
],
/**
* Uniquely generated id for this application, used as prefix for localStorage keys.
* Normally you should never change this value.
*/
"id": "52d77512-9617-4982-b007-98bfaed1312e"
}
The contents of index.html are:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
<link rel="apple-touch-icon" href="icon.png" />
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #DB3040
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

It turns out that the issue was that the Ext object was not in a global scope and thus not visible from the callback code. To fix it, I modified the minified app.js code in the following ways:
Added 'MyApp=null;' to the beginning of the file,
Replaced 'var MyApp=MyApp||()' with 'MyApp=MyApp||()'.
Replaced 'var Ext=Ext||()' with 'Ext=Ext||()'.
This placed the right stuff in the global namespace.

Related

laravel-mix / webpack, ignore sass loaded file (font) to be exported

I am trying to skip a dependency loaded font (with url() ) to be exported.
I used ignore-loader module.
mix.webpackConfig({
module: {
rules: [
{
test: /context-menu-icons\.(eot|ttf|otf|woff|woff2)$/,
loader: 'ignore-loader'
}
]
}
});
The issue is it produce empty files. The behavior I am expecting is to not output these files at all.
The reason for this is this in a dependency in node_modules
#font-face {
font-family: '#{$context-menu-icon-font-name}';
src: url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.eot?#{$context-menu-icons-cachebust}');
src: url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.eot?#{$context-menu-icons-cachebust}#iefix') format('embedded-opentype'),
url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.woff2?#{$context-menu-icons-cachebust}') format('woff2'),
url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.woff?#{$context-menu-icons-cachebust}') format('woff'),
url('#{$context-menu-icon-font-path}#{$context-menu-icon-font-name}.ttf?#{$context-menu-icons-cachebust}') format('truetype');
font-weight: normal;
font-style: normal;
}
Is there a way to just ignore these files from output / copy in my dist folder ?
I could not find a solution because, font-face is loaded from a scss file.
So using options with file-loader to prevent emitting files won't work.
There would be a string in these file with module.exports = ...
In all cases the font files would be emmited empty or not.
So I used clean-webpack-plugin with these options
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
...
mix.webpackConfig({
plugins: [
new CleanWebpackPlugin({
// dry: true,
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: false,
// Do not allow removal of current webpack assets
protectWebpackAssets: false,
cleanOnceBeforeBuildPatterns: [
'**/*', // clean all
'!views','!views/**/*', // ignore views folder
'!lang','!lang/**/*', // ignore lang folder
],
cleanAfterEveryBuildPatterns: [
'fonts/vendor' // remove fonts/vendor folder after build and watch
],
}),
]
});
...

Prevent js-beautify from adding extra whitespace / empty lines

js-beautify (used under VSCode) annoys me by putting extra lines after comments:
My sample.scss
/* a fancy comment */
.foo-bars {
background: $gray;
display: block;
width: 26px !important;
}
...becomes...
/* a fancy comment */
<-- annoying empty line inserted
.foo-bars {
background: $gray;
display: block;
<--- (this is fine. I like it being preserved)
width: 26px !important;
}
This is my .jsbeautifyrc (verified to be effective, i.e. by testing with "indent_char": "#")
{
"indent_char": " ",
"preserve_newlines": true,
"max_preserve_newlines": 8,
"keep-array-indentation": true,
"break_chained_methods": false,
"newline_between_rules": false,
"selector_separator_newline": false,
"end_with_newline": false
}
update: Affects /* block comments */ only, not // line comments.
It seems like that this should have been fixed (js-beautify#609) but somehow didn’t work out as expected as there is still an open issue#531 and a pending pull request regarding this problem.
As you mentioned you could use // line comments as a workaround for now.

Bootstrap/Brunch difficulty with Phoenix

I am trying to compile bootstrap with Brunch in Phoenix. I have deployed a simple collapse nav to heroku, but the nav button doesn't activate on resize: https://hidden-wildwood-14271.herokuapp.com/test
If you look at the <head> in the source code, you'll see this:
<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">-->
<!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>-->
When these links/scripts are uncommented, this nav bar works just fine (assuming you're doing this from a local/non-https, like heroku in production). Instead I have to use the Brunch-compiled css/app.css and js/app.jsat the top. Those file contain exactly the same code as the referenced files in comments (bootstrap css, jquery/bootstrap js).
I'm also getting this error in the console, and have no idea what it means:
Uncaught Error: Cannot find module 'web/static/js/app' from '/'
Also, this is what my brunch-config looks like (very little difference from default configuration):
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
// To use a separate vendor.js bundle, specify two files path
// http://brunch.io/docs/config#-files-
// joinTo: {
// "js/app.js": /^(web\/static\/js)/,
// "js/vendor.js": /^(web\/static\/vendor)|(deps)/
// }
//
// To change the order of concatenation of files, explicitly mention here
// order: {
// before: [
// "web/static/vendor/js/jquery-2.1.1.js",
// "web/static/vendor/js/bootstrap.min.js"
// ]
// }
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js",
order: {
before: ["web/static/js/app.js"]
}
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
sass: {
options: {
// Use includePaths to allow sass to load files outside your tree
// For example, from node_modules
//includePaths: ['app/css']
}
},
postcss: {
processors: [
require('autoprefixer')(['last 8 versions'])
]
},
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true
}
};

Webpack: How to generate separate css files from sass

Currently I have this webpack (Angular2 seed) project. With this project I have some css which depends on which client opens the page (multi brand platform).
As of now I'm generating css files using the ExtractTextPlugin, this works pretty well except for now my images etc. are all dumped in the dist root, but I can probably solve those things.
What bothers me slightly is that this also generates a "cssentrypoint.js" and "cssentrypoint.map.js". I guess it's the default behaviour but does anyone know if there is a simple solution to just generate the sass in the build script (so it still watches for changes) and not the JS?
I'll share my webpack.common config which applies to all, the out is configured to be something like [name].[chunkhash].js
/**
* #author: #AngularClass
*/
const webpack = require('webpack');
const helpers = require('./helpers');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
/*
* Webpack Plugins
*/
// problem with copy-webpack-plugin
var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin);
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
const HtmlElementsPlugin = require('./html-elements-plugin');
var glob = require('glob');
/*
* Webpack Constants
*/
const METADATA = {
title: 'Prepaid Service Provider',
baseUrl: '/',
isDevServer: helpers.isWebpackDevServer()
};
/*
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = {
/*
* Static metadata for index.html
*
* See: (custom attribute)
*/
metadata: METADATA,
/*
* Cache generated modules and chunks to improve performance for multiple incremental builds.
* This is enabled by default in watch mode.
* You can pass false to disable it.
*
* See: http://webpack.github.io/docs/configuration.html#cache
*/
//cache: false,
/*
* The entry point for the bundle
* Our Angular.js app
*
* See: http://webpack.github.io/docs/configuration.html#entry
*/
entry: {
'polyfills': './src/polyfills.browser.ts',
'vendor': './src/vendor.browser.ts',
'main': './src/main.browser.ts',
'eneco': './src/style/css/someclient.scss',
'nuon': './src/style/css/someotherclient.scss'
},
/*
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
/*
* An array of extensions that should be used to resolve modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
*/
extensions: ['', '.ts', '.js', 'scss'],
// Make sure root is src
root: helpers.root('src'),
// remove other default values
modulesDirectories: ['node_modules'],
alias: {
// legacy imports pre-rc releases
'angular2': helpers.root('node_modules/#angularclass/angular2-beta-to-rc-alias/dist/beta-17')
},
},
/*
* Options affecting the normal modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
/*
* An array of applied pre and post loaders.
*
* See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders
*/
preLoaders: [
/*
* Tslint loader support for *.ts files
*
* See: https://github.com/wbuchwalter/tslint-loader
*/
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
/*
* Source map loader support for *.js files
* Extracts SourceMaps for source files that as added as sourceMappingURL comment.
*
* See: https://github.com/webpack/source-map-loader
*/
{
test: /\.js$/,
loader: 'source-map-loader',
exclude: [
// these packages have problems with their sourcemaps
helpers.root('node_modules/rxjs'),
helpers.root('node_modules/#angular'),
]
}
],
/*
* An array of automatically applied loaders.
*
* IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
* This means they are not resolved relative to the configuration file.
*
* See: http://webpack.github.io/docs/configuration.html#module-loaders
*/
loaders: [
/*
* Typescript loader support for .ts and Angular 2 async routes via .async.ts
*
* See: https://github.com/s-panferov/awesome-typescript-loader
*/
{
test: /\.ts$/,
loader: 'awesome-typescript-loader',
exclude: [/\.(spec|e2e)\.ts$/]
},
/*
* Json loader support for *.json files.
*
* See: https://github.com/webpack/json-loader
*/
{
test: /\.json$/,
loader: 'json-loader'
},
/* Raw loader support for *.html
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: [/\.html$/],
loader: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
{
test: [/\.jpg$/, /\.jpeg$/, /\.png$/],
loader: 'file-loader'
},
{
test: /\.scss$/i, loader:
ExtractTextPlugin.extract(['css!sass'])
},
{
test: /\.woff(2)?(\?v=.+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]"
},
{
test: /\.(ttf|eot|svg)(\?v=.+)?$/,
loader: 'file?name=./fonts/[hash].[ext]'
},
]
},
/*
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: [
/*
* Plugin: ForkCheckerPlugin
* Description: Do type checking in a separate process, so webpack don't need to wait.
*
* See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
*/
new ForkCheckerPlugin(),
/*
* Plugin: OccurenceOrderPlugin
* Description: Varies the distribution of the ids to get the smallest id length
* for often used ids.
*
* See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
* See: https://github.com/webpack/docs/wiki/optimization#minimize
*/
new webpack.optimize.OccurenceOrderPlugin(true),
/*
* Plugin: CommonsChunkPlugin
* Description: Shares common code between the pages.
* It identifies common modules and put them into a commons chunk.
*
* See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
* See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
*/
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
}),
/*
* Plugin: CopyWebpackPlugin
* Description: Copy files and directories in webpack.
*
* Copies project static assets.
*
* See: https://www.npmjs.com/package/copy-webpack-plugin
*/
new CopyWebpackPlugin([{
from: 'src/assets',
to: 'assets'
}]),
new ExtractTextPlugin("assets/css/[name].css", {allChunks: false}) ,
/*
* Plugin: HtmlWebpackPlugin
* Description: Simplifies creation of HTML files to serve your webpack bundles.
* This is especially useful for webpack bundles that include a hash in the filename
* which changes every compilation.
*
* See: https://github.com/ampedandwired/html-webpack-plugin
*/
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
}),
/*
* Plugin: HtmlHeadConfigPlugin
* Description: Generate html tags based on javascript maps.
*
* If a publicPath is set in the webpack output configuration, it will be automatically added to
* href attributes, you can disable that by adding a "=href": false property.
* You can also enable it to other attribute by settings "=attName": true.
*
* The configuration supplied is map between a location (key) and an element definition object (value)
* The location (key) is then exported to the template under then htmlElements property in webpack configuration.
*
* Example:
* Adding this plugin configuration
* new HtmlElementsPlugin({
* headTags: { ... }
* })
*
* Means we can use it in the template like this:
* <%= webpackConfig.htmlElements.headTags %>
*
* Dependencies: HtmlWebpackPlugin
*/
new HtmlElementsPlugin({
headTags: require('./head-config.common')
})
],
/*
* Include polyfills or mocks for various node stuff
* Description: Node configuration
*
* See: https://webpack.github.io/docs/configuration.html#node
*/
node: {
global: 'window',
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
Update
In addition webpack generates those JS files and also embeds them, this includes css files which I want to optionally show...

Problems with Sass when using angular-fullstack generator

I have set up a webapp using Sass with Yeoman's angular fullstack generator. It seemed to be running fine, until I realised errors that were being output every time grunt tries to run a task. Here's the output:
/Users/rorysmith/.rvm/rubies/ruby-2.2.1/bin/scss --no-cache --update app.scss:app.css
error app.scss (Line 4: File to import not found or unreadable: ../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap.)
Process finished with exit code 1
It's referring to a line in the app.scss file:
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap'
I changed the directory to include ../ at the start, as this is where my bower_components live:
When commented out, it has an issue with a different line of the same file:
#import 'modal/modal.scss';
Here's the app.scss file in its entirety, it's just the stock one created by the generator:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap";
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap';
#import '../bower_components/font-awesome/fonts';
/**
* App-wide Styles
*/
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// Component styles are injected through grunt
// injector
#import 'account/login/login.scss';
#import 'admin/admin.scss';
#import 'create/create.scss';
#import 'main/main.scss';
#import 'modal/modal.scss';
// endinjector
Any idea what on earth is going on?
I was encountering the same problem, here's what "fixed" it for me...
In the Gruntfile, find the following:
// Inject component scss into app.scss
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'<%= yeoman.client %>/app/app.scss': [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
'!<%= yeoman.client %>/app/app.{scss,sass}'
]
}
},
Modify the following line to read:
filePath = filePath.replace('/client/components/', '../components/');
Now it should inject with the correct paths.
Caveat: I don't really know what I'm doing.

Resources