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?
Related
I'm currently working on a project using Angular 1.1.5.
Upgrading Angular is not an option for now.
We would like to implement a rich HTML5 WYSIWYG-editor and dicided to give Froala a try, as it meets our requirements and the docs of angular-froala state that it should work with all versions of Angular >=1.0 .
I have made a POC on Plunker that uses Angular 1.1.5.
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<!-- Include Font Awesome. -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
crossorigin="anonymous">
<!-- Include Froala Editor styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_editor.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_style.min.css" />
<!-- Include Froala Editor Plugins styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/char_counter.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/code_view.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/colors.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/emoticons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/file.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/fullscreen.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image_manager.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/line_breaker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/table.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/video.css">
<!-- Include Froala Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/froala_editor.min.js"></script>
<!-- Include Froala Editor Plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/align.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/char_counter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_beautifier.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_view.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/colors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/emoticons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/entities.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/file.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_family.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_size.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/fullscreen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image_manager.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/inline_style.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/line_breaker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/link.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/lists.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_format.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_style.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/quote.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/save.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/video.min.js"></script>
<!-- End Froala -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
<script src="angular-froala.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css">
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<div class="sample">
<h2>Sample 2: Full Editor</h2>
<textarea id="froala-sample-2" froala ng-model="sample2Text"></textarea>
<h4>HTML Content:</h4> {{sample2Text}}
</div>
</body>
</html>
everything seems to work fine except the most important part, the data-binding.
Upgrading the Angular version to 1.5.0 fixes the issue in the POC. But as mentioned that is not an option in my case.
Is this a bug? Is the documentation of froala-angular outdated?
Is there some kind of workaround besides upgrading Angular?
Or am I simply missing something here?
There seems to be an issue with this version of Angular when trying to use ngModel in a directive.
https://github.com/angular/angular.js/issues/1924
When ngModel directive is used on an element that represents a component (implemented via a directive with isolate scope), ngModel is locked into this isolate scope and in order to get out and make ngModel useful the ngModel expression has to be prefixed with $parent.
As suggested in this thread I tried using the $parent prefix and could notice one way data-binding finding place.
<textarea id="froala-sample-2" froala ng-model="$parent.sample2Text"></textarea>
To get my model to be updated, I had to call $apply() in the froala-directive which forces a $digest().
ctrl.updateModelView = function () {
var returnedHtml = element.froalaEditor('html.get');
if (angular.isString(returnedHtml)) {
scope.$apply(function() {
ngModel.$setViewValue(returnedHtml);
})
}
};
I updated my POC on plunker for those who want to see it running.
I know this post is old, but for anyone looking for a solution, I fixed the issue by changing from:
<textarea froala="froalaOptions" ng-model="myHtml"></textarea>
to this:
<textarea froala="froalaOptions" ng-model="$parent.myHtml"></textarea>
I have downloaded the demo for mobileangularui. Upon loading in chrome I get error for loading mobile-angular-ui-hover.min.css, dist/css/mobile-angular-ui-base.min.css, dist/css/mobile-angular-ui-desktop.min.css and mobile-angular-ui.gestures.min.js. Am not able to understand what am I missing.
Here's my code:
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
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.
I am currently using EXTJS 4.1.1(GPL) and sencha cmd 4.0. I am trying to build my application into production as described in guides. Unfortunately I have got an error saying 'Mixed-Mode x-compile and microload markup is currently unsupported'.
Any help how to build into production using extjs 4.1.1 is appreciated.
Thanks
Having single quotes in file references in the index.html file causes this problem. Change this:
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel='stylesheet' href='bootstrap.css'>
<script src='ext/ext-all.js'></script>
<script src='bootstrap.js'></script>
<!-- </x-bootstrap> -->
<script src='app.js'></script>
<!-- </x-compile> -->
to
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-all.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app.js"></script>
<!-- </x-compile> -->
This fixed the problem for me.
I'm trying to change default theme in ExtJs 4.2 to Neptune custom theme. How to make it for debugging?
<html>
<head>
<title>xxx</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-custom.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
</head>
<body></body>
</html>
You must have the following files and folders:
extjs/ext-all.js
extjs/ext-theme-neptune.js
extjs/resources/css/ext-all-neptune.css
extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css
extjs/resources/ext-theme-neptune/images/*.*
And your code as follows:
<html>
<head>
<title>xxx</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-neptune.css">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-custom.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-theme-neptune.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
</head>
<body></body>
</html>
To change to the neptune theme modify line 33 of your sencha.cfg file located in .sencha/app/sencha.cfg to
app.theme=ext-theme-neptune
After doing this run sencha app refresh in your terminal or cammand line
I did as #ccerville said but finished with a
sencha app build
which did some magic to the bootstrap.css and allowed debugging page to use neptune. The 'refresh' didn't seem to make a difference, whereas the build modifies bootstrap.css which is what the 'debug' index.html uses.
Some more info available here : http://senchado.blogspot.ca/2013/03/extjs-42-app-with-custom-neptune-based.html
in app.json change line 31 where "theme" define.
change it "theme": "ext-theme-neptune"
After doing this run sencha app build in your terminal or cammand line