i'm trying to update my sencha app from Extjs2.0 to ExtJS 3, but i'm finding a bit difficulty in it.
actually i developed that application in ExtJS2 but now i have to use the grid panel which is present in Extjs3.
so when i include the extjs3 in the current html file my whole app crashes please help....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Picker</title>
<link rel="stylesheet" href="resources\css\sencha-touch.css" type="text/css">
<link rel="stylesheet" href="resources\css\ext-all-css.css" type="text/css">
<script type="text/javascript" src="ext-touch.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src\Stocking.js"></script>
<script type="text/javascript" src="src\Datafile.js"></script>
<script type="text/javascript" src="src\index.js"></script>
<style>
body {
background-color: #286999;
margin: 0;
padding: 0;
}
</style>
</head>
<body></body>
</html>
You should look at the Official Sencha migration guide first. From there, you should identify specific parts of your application that are breaking. If it is a layout issue, start commenting out individual panels one at a time to find the problem. Once you've identified the panel with the layout issue, start commenting out individual widgets that might be causing the issue.
You should also take advantage of your debugging tools such as Firebug. Use the call stack navigator. You may be able to use it to locate the specific control with the problem.
EDIT: official guide is gone from the interwebs... try http://www.sencha.com/forum/showthread.php?70352-Upgrading-to-Ext-3
Why are you including Sencha Touch and Ext JS on the same page? If you're planning on trying to run an Ext JS GridPanel on a mobile site... you probably aren't going to have an optimal user experience.
Also, just FYI, Ext JS 3 is not new (current version is 3.3). It came out about a year and a half ago, and Ext 4 is due to hit beta within the next couple of months. Might want to consider holding off on a large migration effort to 3.x if possible.
Related
I am trying to optimize my page speed with me MEAN stack application. I have run into the issue where I should be eliminating the render-blocking Javascript and CSS. I have gotten to the point where I have almost eliminated everything, EXCEPT for the controllers that have to be loaded.
I am thinking that it is not possible to actually do this, since angular throws an injector module error when I place "async" as an attribute on the <script>.
I was also thinking of making one large controller, but that does not really work as well.
The link to the site is https://coastalreign.com, below is the code for the controllers:
<!-- ANGULAR CUSTOM -->
<script src="js/app.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/ProductCtrl.js"></script>
<script src="js/controllers/ProductsCtrl.js"></script>
<script src="js/controllers/CartCtrl.js"></script>
<script src="js/controllers/TrackOrderCtrl.js"></script>
<script src="js/controllers/CheckoutCtrl.js"></script>
<script src="js/controllers/DesignerCtrl.js"></script>
<script src="js/controllers/SublimationCtrl.js"></script>
<script src="js/controllers/LocationCtrl.js"></script>
<script src="js/controllers/ServiceAreaCtrl.js"></script>
<script src="js/controllers/CategoriesCtrl.js"></script>
<script src="js/services/getCategoryText.js"></script>
<script src="js/controllers/CustomQuoteCtrl.js"></script>
<script src="js/controllers/GradContestCtrl.js"></script>
<script src="js/controllers/four04Ctrl.js"></script>
<script src="js/controllers/popularGroupingCtrl.js"></script>
Thank you in advance for your guy's expertise!
The problem is the amount of requests. I would bundle the JS files (app + vendor files) and minify them.
You can check for performance tips with Chrome - Developer tools - audits
You can use gulp-concat to reduce the amount of requests as Alexander's answer suggested. Then you can use gulp-minify to decrease the size of the file. You will have some additional issues if you want to put async option because you might need to render HTML which depends on angular
I am developing new web application using AngularJS and bootstrap. I need some clarification
1) Is there any sequence to include below files for better performance? if Yes, why?
bootstrap.min.js
npm.js
angular.min.js
angular-ui-router.min.js
jquery.js
any other jQuery Library
style.css
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
2) what is difference between AngularJS 1 & AngularJS 2
3) what is difference between bootstrap 3 & bootstrap 4
Yes, There is a sequence to include CSS and Javascript library files. This sequence will also increase the performance of your website. Your website will load fast at client end.
To understand the sequence to include CSS and js library files. One should have the basic knowledge of HTML5 code template.
Basic HTML5 code template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Reference link: http://getbootstrap.com/getting-started/#template
Above template is the BOOTSTRAP Framework Coode Template.
CSS & JavaScript library file sequence as follows
Bootstrap Framework - CSS Library.
A) Always add BOOTSTRAP CSS library first.
Want to know about Bootstrap CSS library and component that bootstrap provide. Reference link: http://getbootstrap.com/css/
<link href="css/bootstrap.min.css" rel="stylesheet">
a) Bootstrap.min.css is the minified version of Bootstrap. This version is used only for production purpose.
b) Bootstrap.css is used for Development purpose.
B) Add the additional Bootstrap themes if required.
<link href="css/bootstrap.theme.css" rel="stylesheet">
OR
<link href="css/bootstrap.theme.min.css" rel="stylesheet">
For additional theme please refer this link: https://bootswatch.com/
C) After you can add all your Custom CSS Stylesheets.
2. Bootstrap Framework - JavaScript Library.
Note: Always add JavaScript above the closing body tag i.e <script src=""></script></body>
Why to add JavaScript above the closing tag: Because it increase the speed of loading speed of your website OR The website open very fast at Client end.
A) Always add jQuery library first. Other wise you can't able to use BOOTSTRAP JavaScript functionality like (Modal, Dropdown and many more).
Want to know about Bootstrap JavaScript library and component that bootstrap provide. Reference link: http://getbootstrap.com/js/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
B) Then add BOOTSTRAP JavaScript file.
<script src="js/bootstrap.min.js"></script>
C) After that you can use you own custom JavaScript file OR you can use jQuery Plugins.
3. Difference Between Bootstrap 3 & Bootstrap 4?
Bootstrap 3.3.6 is the current stable version when is used for web development & Bootstrap 4 is the testing version. Developers are testing Bootstrap 4. Bootstrap 4 is the next version of Bootstrap 3 with more functionality.
4. Difference Between Angular JS 1 & Angular JS 2?
Angular JS 1 is the pervious version of Angular JS 2.
I am trying to learn Angular js I am following angular-phonecat tutorial . I am trying to organize my controllers inside my controllers folder for that I am using this structure :
app/js
js/controllers/
Ctrl1.js
movies.js
Here everything is working fine but there is an issue suppose I have 100 controllers then how can I use them inside my html files which is like this :
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/movies.js"></script>
<script src="js/controllers/Ctrl1.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Is there any way by which I can reduce the calling of scripts in this line below how can I put this in one call where these two files can be called via one or there is any other efficient way :
<script src="js/controllers/movies.js"></script>
<script src="js/controllers/Ctrl1.js"></script>
Have a look at gulp. Gulp allows you to bundle all related files into one file which you can refer to in the index.html. For example, in my gulpfile I do this for all my JS files:
gulp.task('js', function() {
return gulp.src('./src/js/**/*.js').pipe(concat('main.js').on('error', gutil.log))
.pipe(gulp.dest('dist/js').on('error', gutil.log))
});
This places them all into a single file called main.js inside a dist folder which I can then deploy.
Oh - and we can then refer to this file in the index like so:
%body.container-fluid
%ui-view
%script{ src: "js/main.js", async: true }
Note - This is HAML syntax not pure HTML. Also - please bear in mind that gulp is made it by different plugins designed to do different things - each of which will need to be installed:
var uglify = require('gulp-uglify'),
// Allows me to use it in the gulpfile as uglify.foo()
I found a better solution to this problem. Simply go through this tutorial :http://yeoman.io/codelab/install-generators.html And you will get to know how to install yoman, here they are using grunt here it will generate all the hard work for you .
you simply need to run this command :
grunt build
grunt serve:dist
It will create a full minified js and css inside a dist directory and you can do whatever you want to do with that directory . You can also watch a this video :https://www.youtube.com/watch?v=gKiaLSJW5xI . I hope this way you can organise your files better .
I'm experimenting with the Angular UI Bootstrap libraries (specifically modal) but I'm having trouble getting the right versions of each library loaded in the right order, but I keep coming up against the No module: template/accordion/accordion-group.html error. I've switched back to Bootstrap 2.3 but it's still there. My application header is below, can anyone spot any wrong versions or JS files out of order? I'm also using Angular UI Sortable, hence its inclusion.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
My app declaration looks like this:
var app = angular.module('myModule', ['ui', 'ui.bootstrap']);
Edit
I managed to get it working like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
and
var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);
did you download all the files? according to their docs
Files to download
Build files for all directives are distributed in several flavours:
minified for production usage, un-minified for development, with or
without templates. All the options are described and can be downloaded
from here. It should be noted that the -tpls files contain the
templates bundled in JavaScript, while the regular version does not
contain the bundled templates. For more information, check out the FAQ
here and the README here.
Alternativelly, if you are only interested in a subset of directives,
you can create your own build.
Whichever method you choose the good news that the overall size of a
download is very small: <76kB for all directives (~20kB with gzip
compression!)
Looks like your error is with a template not begin available or loaded. Maybe you missed the download which packaged the templates. In your case the accordian template isn't being loaded.
After reading the FAQs I'm also wondering if having both angular-ui cdns is causing your problem. The angular-ui is loading first without templates and then your loading angular-ui-bootstrap with templates.
Angular-ui-bootstrap FAQ
This project comes with several deliverables described here:
https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If
the roles of those files are not clear for you just pick
ui-bootstrap-tpls-[version].min.js, but be sure to include only one
file in your project.
You're showing this
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
Try just loading
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
More info on the builds from github
the excerpt i'm reading is
Now it should be clear that files with the -tpls in their name have
bootstrap-specific templates bundled with directives. For people who
want to take all the directives and don't need to customize anything
the solution is to grab a file named
ui-bootstrap-tpls-[version].min.js. If, on the other hand default
templates are not what you need you could take
ui-bootstrap-[version].min.js and provide your own templates, taking
the default ones
(https://github.com/angular-ui/bootstrap/tree/master/template) as a
starting point.
Did you add 'ui.router' and 'ui.sortable' as dependency in your app.js file ?
var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
I would use a package manager such as Bower or WebPack to manage your client side dependencies.
According to the Angular UI docs you only need to add:
AngularJS and Bootstrap CSS. No need for jQuery.
And then you should initialize your Angular App module with ui.bootstrap dependency:
angular.module('myModule', ['ui.bootstrap']);
== UPDATE
According to this example, this should be everything you need:
index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
```
app.js
var myapp = angular.module('sortableApp', ['ui.sortable']);
Let me know if this helps you
Up until now I was using links to minified AngularJS files in my code, but now there is a requirement because of which I have to use complete AngularJS file. I have downloaded it from the official site, and:
<script src="../Angular/angular.js"> </script>
<script src="../Angular/angular-animate.js"></script>
<script src="../Angular/angular-aria.js"></script>
<script src="../Angular/angular-cookies.js"></script>
<script src="Angular/angular-loader.js"></script>
<script src="../Angular/angular-message-format.js"></script>
<script src="../Angular/angular-messages.js"></script>
<script src="../Angular/angular-mocks.js"></script>
<script src="../Angular/angular-resource.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Angular/angular-sanitize.js"></script>
<script src="../Angular/angula-scenario.js"></script>
<script src="../Angular/angular-touch.js"></script>
and this is how I added all these files in my code, but it is not working, please let me know what is the correct way of using complete AngularJS file.
Your path for angular-loader is different from the rest of your paths. I'm not sure if any of them are correct. I'd recommend starting the Chrome developer tools and then going to the Network tab to see if all of your resources are loading correctly.
Looking at your codepen it appears that you are reloading the Angular libraries later in your HTML. That is probably causing Angular to reinstantiate and therefore destroying whatever you've done in your code in between. Try deleting or commenting out the lines where you load Angular from cloudflare.