I am trying to run an ExtJs application without using SenchaCmd. These are the scripts I load in the index HTML file:
<script type="text/javascript" language="javascript" src="dev/ext-all-debug.js"></script>
<script type="text/javascript" language="javascript" src="dev/all.js"></script>
The all.js file contains all the views, controllers, stores and models concatenated into one file using a gulp task (including app.js and Application.js files). The problem is that after these 2 files are loaded, The Ext Loader is still trying to load the required Controllers/Views one by one.
I tried adding the following code into the Application.js file but nothing changed:
constructor: function() {
this.callParent(arguments);
Ext.Loader.setConfig({enabled:false});
},
Any ideas? Why is the Ext.loader trying to load all the requires if they are included in the all.js file? Thanks.
What version of Ext JS? If you're using 5.0.1 the "ext-all-debug.js" file in the root of the ext directory will not work - you want the one in the "build" directory...
I think I know why the Ext.Loader didn't work as expected...
The concatenated files need to be in the right order because on each Ext.define the loader is searching for the dependencies specified in the requires section and if the dependencies are not loaded it will try to load them.
It works recursively until the dependency tree is loaded.
There is a Grunt plugin doing this: https://www.npmjs.com/package/grunt-sencha-dependencies
However I am still not satisfied of the development workflow with ExtJs because when using "app watch", in dev mode, you could be loading hundreds of JS files on a page refresh if your app is big enough and this impacts the performance quite a bit.
Related
My pagination is working good but the problem is the script automatically getting deleted from index.html page, What may be causing it to delete?
you have to add the script tag associated to this pagination Utility into your index.html file by using a cdn kind of way
<script src="https://raw.githubusercontent.com/michaelbromley/angularUtils/master/src/directives/pagination/dirPagination.js"></script>
or by specifying the local path of this plugin inside your project directory like
<script src="bower_components/angularUtils-pagination/dirPagination.js"></script>
(where bower_components/angularUtils-pagination/dirPagination.js being my path to this utility file inside my project directory)
I was mess around this for a couple of days. I was trying to get browserfiy to work well with angular based app. I have tried following options but still cannot decide on a better way to do it, it will be appreciated if anyone can give any suggestion on this.
Option 1
Bundle all angular related libs, like angular, angular-animate, angular-ui-router, etc into vendor.js by using bundle.require
Bundle all app reated source files into app.js by using bundle.external
That works fine in dev environment, all modules in vendor.js could be required from app.js
But it crashed in prod environment. The minified angular files are not all CMD. Although I can browserify-shim angular.min.js and bundle.require angular-ui-router.min.js, it's kind of cubersome to do this file by file.
Option 2
Leave all angular libs into <script> and only output bundle for app files. That means in app.js, I have to refer to angular as a global var which is not good.
So what's the best practise to do this?
Even if you do require() angularjs, it still exposes the angular namespace in the context of its environment (Window object for browsers). What I usually do is simply put all angularjs modules dependencies (e.g. ui.router, ngResource and etc) below the bundled(browserified) javascript where your angularjs application resides. In my case, I use gulp-useref to concatenate all the script provided by the gulp-inject tags(this includes scripts bundled by browserify).
As you may have noticed below, the bower components(bower:js tag) are added below the bundle(inject:js tag). Since requiring the angular module will attach the angular object in the window object, then any components external to browserify can access window.angular.
The answer I provided is somehow similar to option 2 but without the disadvantage of referring angular as a global variable within your browserified code.
e.g.
<!-- build:js({./.tmp,./}) js/index.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- bower:js -->
<!-- endinject -->
<!-- endbuild -->
UPDATE:
I've create a github repo that resembles the answer provided above. Try to clone it, and see what you can do with it.
I am using angular full stack generator by yeoman with polymer as manually injected. I am not using polymer generator and not to sure how to use vulcanise task to include polymer element in production version of the app.
This is how I included polymer in my index.html
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- 2. Load the component using an HTML Import, in this case element list is imported which consists of all required elementLis -->
<link rel="import" href="elements/elementList.html">
It works perfectly from local host, but when I run grunt serve: dist
no polymer element displays on the page, and error logs
angular is trying to load too many times.
I have found some answers from stack overflow that I might have to include vulcanise task in grunt to be able to include polymer html.
I want to be able to include any polymer element and relevant css files from a certain directory for the dist version of the application.
I am new to polymer and still learning grunt.. Any help will be much appreciated.
Here is my polymer element directory..
https://github.com/knofler/angular-fullstack-base/tree/master/client/elements
Good day. Sorry but I've stumbled upon a problem that I can't seem to figure out for the past couple of hours. I downloaded this printing class to be able to print a Form that I have in my web application. I copied the Ext.ux.Printer folder in my scripts folder inside resources. The file path looks like: resources/scripts/Ext.ux.Printer and the resources folder is on the same level as the app folder.
My Loader looks like:
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux.Printer': 'resources/scripts/Ext.ux.Printer/Printer'
}
});
And the Application looks like:
Ext.application({
requires: [
'Ext.Loader',
'Ext.layout.container.Absolute',
'resources.scripts.Notification',
'Ext.layout.container.Column',
'Ext.ux.Printer.Printer'
], //models, views, controllers, follow after
and I try to use it in my code as such:
Ext.ux.Printer.print(form);
However, I am given an Uncaught TypeError: Cannot read property 'Printer' of undefined whenever I try to execute the line of code above.
Can anyone help me? I'm a beginner in ExtJS4 and I'm just trying to follow examples I see around the internet - it is possible that I tried to appropriate my code incorrectly with something I saw online.
Any help is very much appreciated, thank you.
UPDATE 1
Upon discussion with Guilherme Lopes below we did the following steps:
Import the js files by adding it as a js resource in Sencha Architect. Make sure that the file path is correct.
Check the includeAfterAppJS checkbox. Due to a bug in Architect, sometimes the JS Files are added in before the ExtJS.
Open index.htmluse ext-all.js instead of ext-dev.js. Note that Sencha Architect overwrites/resets this file every time you save your project. A quick fix is to go to project settings and uncheck updating index.html.
Try Ext.ux.Print.print(form);
By the developer instructions, you should import the script files using your main html document, the same way you do with ExtJS classes (if you are not using the bootstrap).
These lines should be added after you import the ExtJS library:
<script type="text/javascript" src="Printer.js"></script>
<script type="text/javascript" src="renderers/Base.js"></script>
The library currently comes with renderers for Ext.grid.GridPanel, and Ext.tree.ColumnTree.
These can be included as required:
<script type="text/javascript" src="renderers/GridPanel.js"></script>
<script type="text/javascript" src="renderers/ColumnTree.js"></script>
And your calls to Ext.ux.Printer should start working.
If you are using Architect, add your external JS files clicking on: + => Resources => JS Resource
And then change the URL to the path you need (do this for every file you wish to add)
* I would just uncheck the x-compile and x-bootstrap
I have set up my application based on this example
http://backbonetutorials.com/organizing-backbone-using-modules/
The thing that I now have more than 50 html files. It takes more than 5 seconds to load all files on first load. I know using node.js and require.js I can compress or minify the .js file and .css files but was wonder if there are any way we can compress all html templates into one file to speed up.
I'm about to face this very problem in my project and here's what I plan to do:
Write template loader function so that details of how templates are retrieved are encapsulated within. After that I only have to change one place in code when template handling logic changes.
At build time, compile my Handlebars.js templates into JS code. The process is described here.
Use R.js from require.js package to build single JS file from all compiled templates.
If you are using templates like described in that article (with require !text, _.template etc), then they will be compressed into JavaScript file as well. Give it a shot.
It doesn't make sense that 50 html files are loaded simultaneously into the browser, by right the require.js and node.js should be loaded once into the browser. Then ur index.html will select the html file amongst the 50 to append further as its content.