I have my application built with ExtJS 4.2.1
My app structure was generated using Sencha Cmd v4.0.1.45.
Im using some custom CSS in my app to give personalized style so my XTemplate items and also Im using AwesomeFont and FamFam Sprites for icons.
This is my resources directory in my app sencha cmd structure:
App.css is a custom CSS
BoxSelect.css is other custom CSS
chooser.css is other custom CSS
famfamfam.css is the CSS that will handle the famfam.png image sprite
font.css is the CSS that comes with AwesomeFont.
The application in development mode (without building) works great, but when I tried to build using Sencha CMD and then try to open the production Index.html I couldn't see any icon neither the styles applied from my custom CSS's files.
So what I ended up was to modify my app Index.html in order to move all my CSS references outside the tag.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Application</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<!-- Ext Scheduler -->
<script src="lib/js/sch-all-debug.js"></script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script src="../Scripts/jquery.vegas.min.js"></script>
<script src="../Scripts/jquery.signalR-2.0.3.min.js"></script>
<!-- Ext Scheduler -->
<link rel="stylesheet" href="resources/css/sch-all-neptune.css">
<link rel="stylesheet" href="../Content/jquery.vegas.min.css">
<script src="app/Constants.js"></script>
<script src="app/Glyphs.js"></script>
<script src="app.js"></script>
<!-- </x-compile> -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/boxselect.css">
<link rel="stylesheet" href="resources/css/fonts.css">
<link rel="stylesheet" href="resources/css/famfamfam.css">
<!-- view icons chooser style -->
<link rel="stylesheet" href="resources/css/chooser.css">
</head>
<body></body>
</html>
Doing this way worked fine but I would like to create a SASS so my custom CSS's files can be minified.
Any clue on what are the steps that I have to follow in order to create my SASS for my custom CSS's so when doing sencha app build production my CSS are minified?
Appreciate any help.
In your application folder, there should be sass folder. Move your CSS stylesheets to sass/etc/ and rename to *.scss, then run sencha app build. This should do the trick.
One caveat: I recall there was a bug in Cmd at some point, it didn't pick up extra SCSS files. If the above solution does not work for you, manually concatenate all CSS files into sass/etc/all.scss and it should work then.
Related
I am currently working on a React single page application and I cannot figure out where and how to place the Bootstrap CDN in my project for my bootstrap to work.
Also if somebody could suggest how to npm install bootstrap for your project.
If you use create-react-app there is a file in public/index.html or let's say in your index html page which you first render use cdn there
like
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>React App</title>
</head>
CDN
<HTML>
<head>
<!-- YOU CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body></body>
</HTML>
npm
npm install bootstrap#3
require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory.
Bootstrap's package.json contains some additional metadata under the following keys:
less - path to Bootstrap's main Less source file
style - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
npm install --save bootstrap
after this import this in App.js
import 'bootstrap/dist/css/bootstrap.min.css';
I want to use bootstrap in my angular project, and I'm looking at http://angular-ui.github.io/bootstrap/#/getting_started but it says one of the requirements is the bootstrap CSS.
How can I install only the CSS? What is the best way to do that? I have installed angular, angular-animate, and angular-bootstrap using bower. Just need to install the css.
Here's how I'll use it, please let me know if its correct -
<!DOCTYPE html>
<html>
<head>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap.js"></script>
</head>
<body>
....
</body>
</html>
Go to Bootstrap's Get Started Page. They give you several different options. Here's their CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
And Bower
$ bower install bootstrap
After you have your source just <link> to it within your <head>:
<!DOCTYPE html>
<html>
<head>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Bootstrap CSS Bower *check folder for correct file name -->
<link rel="stylesheet" href="/bower_components/bootstrap/bootstrap.css">
</head>
<body>
....
</body>
</html>
Your code is absolutely correct. You just need to download bootstrap from there website . that will have both CSS nd JavaScript. You should just add the CSS in your head tag
You can also install it through bower
Bower install bootstrap
After this check the bower_components folder to find bootstrap
I am trying to work with ExtJS 5. I need to know which all files need to be imported in JSP/HTML page from EXT package.
<link rel="stylesheet" type="text/css"
href="http://yourdomainorlocalhost/ext-5.0.0/build/packages/ext-theme-
crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="http://yourdomainorlocalhost/ext-5.0.0/build/bootstrap.js"></script>
I will provide 2 answers to your question:
If you are using Sencha Cmd and the bootstrapping that it provides to generate your application your index.html could look as simple as the following for the basic application in the Sencha theming guide: (Since all the work is done by the microloader and all the files that you mention in index.html now sit in a file call app.json.)
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ThemeDemoApp</title>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
The second application is a basic Hello World including ExtJS 5 library in your application without the bootstrap:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Ext JS 5</title>
<link rel="stylesheet" type="text/css" href="/ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.0.0/build/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
You just need to add following Files:
-ext-all-debug.js or ext-all.js
-extext-*-all.css
and
-viewport.js [This file contains Ext.application related defination]
I am new to AngularJS and am trying to build an Mobile Web application. As I started writing controllers, services and routes for various functionalities the index.html JS and CSS include seems to be growing day by day. For example, When I start writing controller, services for any functionality then am forced to include them in index.html. I am thinking there is a fundamental problem with the coding approach. If my home page route is "/home" or "/" then home.html should download only JS and CSS files related to home page. But home.html(view) seems to download the entire Javascript and CSS library for every page. How should I design my app in such a way only the functionality related controller, services, directives Javascript files should be downloaded for a page. I appreciate if anyone can explain with a simple example.
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<link rel="stylesheet" type="text/css" href="css/pdp.css">
<link rel="stylesheet" type="text/css" href="css/pdp_751_1.css">
<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery.cycle.all.js"></script>
<script src="js/lib/jquery.touchwipe.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<!-- This is the route provider for the main app... -->
<script src="js/app.js"></script>
<script src="js/controllers/c-home.js"></script>
<script src="js/controllers/c-browse.js"></script>
<script src="js/controllers/c-product-details.js"></script>
<!--<script src="js/directives/directives.js"></script>-->
<script src="js/directives/d-product-details.js"></script>
<script src="js/services/s-home.js"></script>
<script src="js/services/s-browse.js"></script>
<script src="js/services/s-product-details.js"></script>
<script src="js/lib/angular/angular-resource.min.js"></script>
<script src="js/lib/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="js/lib/iscroll.js"></script>
You should not worry so much about the combined payload size of your files, but more about the build process and making sure to reduce HTTP requests as much as possible (1 css, 1 js is all you should have in your home.html). This is more important. Also minify everything. I suggest you check out ng-boilerplate. Its a starting point for angular apps and has most of the best practices you should be employing.
https://github.com/joshdmiller/ng-boilerplate
Make sure to read all the readme files at the various directory levels.
I found several examples how to use Ext.ux.grid.GridSummary() in GridPanel, main problem here is if I try to summary plugin on this way:
plugins: new Ext.ux.grid.GridSummary(),
I get JS error that Ext.ux.grid.GridSummary() is not a constructor?!
Any idea about this or hint?
Did you include the correct JavaScript file? The ux-namespace is not part of the standard ExtJS distribution and must be included manually. You must include
<!-- base library -->
<link rel="stylesheet" type="text/css" href="/path/to/resources/css/ext-all.css" />
<!-- extensions -->
<link rel="stylesheet" type="text/css" href="/path/to/GroupSummary.css" />
...
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="/path/to/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="/path/to/ext-all.js"></script>
<!-- extensions -->
<script type="text/javascript" src="/path/to/GroupSummary.js"></script>
EDIT:
Just noticed: shouldn't it be Ext.ux.grid.GroupSummary?