I've started to learn Ext JS and immediately stumbled on the 1st step of their quick start.
Where should I put that hello world code to see the result in my web page, not their interactive demo?
I have local web server up and running, so the question is in application's files layout.
You create an app.js file in the root of your project, and then put the code there. You also should include this file in the index.html file, after the inclusion of library scripts, like so:
<script type="text/javascript" src="app.js"></script>
Basically you firstly load the ExtJS library files, and then you load a file that does something using ExtJS.
Or you might not need any additional file, just include the code in index.html (also after the library is loaded) in form of inline javascript:
<script type="text/javascript">
Ext.application({
name: 'MyApp',
launch: function() {
Ext.Viewport.add({
xtype: 'panel',
title: 'New Panel',
html: 'My new panel!'
});
}
});
</script>
Related
I have one cardboard application which display's number of cards for each PortfolioItem/Feature. likewise it's on Rally platform Release Planning. I want to implement filter box like that.
Attached the screenshot of filters, which I want to implement.
You can sometimes get hints/code for your apps via the open source repo for the Rally App Catalog. For your example, there is available source code for the Release Planning App. Reviewing the source code, you can see that the Filter Picker is defined by the following requirement defined in the source:
Rally.ui.gridboard.plugin.GridBoardCustomFilterControl
And this is incorporated into the board by adding its plugin to the board configuration.
It's tempting to add this to a Simple Grid example, exactly as the Release planning board does, which I tried doing as follows:
<!DOCTYPE html>
<html>
<head>
<title>Rally Example: Simple Board</title>
<script type="text/javascript" src="/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('Rally.example.SimpleBoard', {
extend: 'Rally.app.App',
requires: [
'Rally.ui.gridboard.plugin.GridBoardCustomFilterControl'
],
launch: function() {
this.add({
xtype: 'rallycardboard',
types: ['User Story'],
attribute: 'ScheduleState',
context: this.getContext(),
readOnly: true,
cardConfig: {
showIconsAndHighlightBorder: false,
editable: false
},
plugins: [
{
ptype: 'rallygridboardcustomfiltercontrol',
filterChildren: false,
filterControlConfig: {
margin: '3 9 3 30',
blackListFields: ['PortfolioItemType', 'Release'],
whiteListFields: [this._milestonesAreEnabled() ? 'Milestones' : ''],
modelNames: ['HierarchicalRequirement']
}
}
]
});
}
});
Rally.launchApp('Rally.example.SimpleBoard', {
name:"Rally Example: Simple Board",
parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body>
</body>
</html>
However, if you try to load the app in this way, you'll get a 404 when it looks for the Rally.ui.gridboard.plugin.GridBoardCustomFilterControl class.
Looking at the AppSDK2.0rc3 docs, this plugin does not appear to be available under the Rally.ui.cardboard.plugins.* tree that's bundled into the SDK. See screenshot here:
AppSDK2.0rc3 screenshot excerpt:
Nor does it appear that the Rally.ui.gridboard.plugin.* tree is bundled into the AppSDK. It is likely that the class is however, available to the Rally UI via a different javascript bundle (non-public) that the Rally developers use.
Perhaps it would be feasible for Rally Engineering to bundle this plugin into the AppSDK so that customer developers could use it - perhaps file a Feature Request on Rally Ideas or something like that to see if this is achievable.
I'm struggling with the following:
My gulpfile.js compiles all .less, minifies it and concattenates all CSS into ./dist/all.min.css
Is there a way I can rewrite the HTML file, remove all style tags and only put one style tag into it loading the minified CSS?
The best way to handle this is to use one of the HTML injectors from the get-go. I'm using gulp-inject to some success so far.
Add gulp-inject to your project:
npm i --save-dev gulp-inject
Assuming that you have a folder layout similar to this:
build/
src/
index.html
less/
main.less
js/
app.js
Your HTML should include this where you want the CSS or JS files to be injected, either the head for both, or head for the CSS and just before body for your JS files:
<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->
<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->
Then your gulpfile looks something like this:
gulp.task('build-styles', function() {
// the return is important!
return gulp.src('src/less/main.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('build-js', function() {
// the return is important if you want proper dependencies!
return gulp.src('src/js/**/*.js')
// lint, process, whatever
.pipe(gulp.dest('build'));
});
gulp.task('build-html', function() {
// We src all files under build
return gulp.src('build/**/*.*')
// and inject them into the HTML
.pipe(inject('src/index.html', {
addRootSlash: false, // ensures proper relative paths
ignorePath: '/build/' // ensures proper relative paths
}))
.pipe(gulp.dest('build'));
});
gulp.task('build', ['build-styles', 'build-js'], function(cb) {
gulp.run('build-html', cb);
});
gulp.task('default', ['build'], function() {
gulp.watch('src/**/*.less', function() {
gulp.run('build-styles');
});
gulp.watch(['build/**/*.*','!build/index.html', 'src/index.html'], function() {
gulp.run('build-html');
});
});
This is just a rough idea, and you can do a lot more using gulp-watch for incremental builds, but the key here is that we watch the build directory to choose when to rebuild the HTML file, and watch the src directory for everything else.
NOTE:
Since this is getting a lot of upvotes, there are a couple other plugins that do reference replacement beside gulp-inject. You may want to look at them and see if one of them is a better fit for you, especially if you are not using gulp-rev:
gulp-usemin
gulp-useref
There are also two CDN libraries that do a similar thing, but for CDN resources
gulp-google-cdn
gulp-cdnizer (full disclosure: I wrote this one)
You want to rewrite it during a build? Why not to replace all the CSS links with a single link to all.min.css in your source code? Anyways, you can use gulp-replace plug-in to search and replace a string in your files during a build. Here is yest another sample project to look at:
Web App Boilerplate - HTML5 Boilerplate front-end web application template extended with LESS style sheets and Gulp.js build system.
See also gulp-smoosher. Example:
index.html
<html>
<head>
<!-- smoosh -->
<link rel='stylesheet' href='styles.css'>
<!-- endsmoosh -->
</head>
styles.css
body {
background: red;
}
Gulpfile.js
gulp.task('default', function () {
gulp.src('index.html')
.pipe(smoosher())
.pipe(gulp.dest('dist'));
});
dist/index.html
<html>
<head>
<style>body {
background: red;
}</style>
</head>
I'm learning Backbonejs and I'm really confused with linking external JS files. So, if I write Backbone script in HTML document between everything works fine. But if I add a link in HTML to JS file it doesn't work. I have tested jQuery in this file and it works fine, it seems like only Backbone.js scripts doesn't work. So, the main question is:
How do I link external JS files where I'm using Backbone.js to my HTML file?
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="testingscript.js"></script>
<title>Backbone for beginners</title>
</head>
<body>
<div id="container">Loading...</div>
<script>
var AppView = Backbone.View.extend({
el: $('#container'),
// template which has the placeholder 'who' to be substitute later
template: _.template('<h3>Hello <%= who %></h3>'),
initialize: function () {
this.render();
},
render: function () {
// render the function using substituting the varibile 'who' for 'world'
this.$el.html(this.template({who: 'world!'}));
}
});
var appView = new AppView ();
</script>
</body>
</html>
Greetings!
There is no special magic to load other js files in the same HTML file that backbonejs is used.
I would make sure that your 'testingscript.js' file is in the right path and get loaded properly. You can look at the console in your web-browser (From FireBug if you use fireFox, or 'Inspect Element' if Chome is used).
Once you confirm that the file is loaded properly, things should work as I don't see you have any unusual in your code.
Good luck!
<script src="testingscript.js"></script>
I'm starting in the path of ExtJS 4 and I need to use the GridPanel's filters feature.
Here's the code for my panel:
var panel = Ext.create("Ext.grid.Panel", {
renderTo : "main"
, store : store
, title : "Users"
, columns : [ /*...*/ ]
, // ...
// Important line --v
, features : [ { ftype : 'filters' } ]
, // ...
});
As I understood from the example, I need to enable Ext.Loader and so I did. After that, however, ExtJS is trying to load a features/filters.js which I can't find anywhere, I have tried to look for it in the src/ folder but have found nothing.
How am I supposed to make this work?
Update
#nscrob pointed me to the example's FiltersFeature.js file. I have successfully loaded the file, but I still lack the features/filter.js file, the one missing from the start.
--
Thanks guys.
you are probably trying to create something like http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.html, if you check the js code for this example you will see that the filter feature is an user extended component... so you will find the filter component defined in examples/ux/grid/FilterFeatures.js
Edit sep 9 , 6pm
As i said above the problem is that the component you are using is user extended if you check the component defined in the filterfeatures.js you will fin that it needs other files like
'Ext.ux.grid.menu.ListMenu',
'Ext.ux.grid.menu.RangeMenu',
'Ext.ux.grid.filter.BooleanFilter',
'Ext.ux.grid.filter.DateFilter',
'Ext.ux.grid.filter.ListFilter',
'Ext.ux.grid.filter.NumericFilter',
'Ext.ux.grid.filter.StringFilter'
The file this component needs are all in the example/ux/grid folder
I found the solution here:
http://www.sencha.com/forum/showthread.php?140370-Getting-404-error-The-requested-resource-(-EmployeeApp-feature-filters.js)-not-avail&p=626408&viewfull=1#post626408
You can just link statically required files in your index.html
<link rel="stylesheet" type="text/css" href="scripts/ext/examples/ux/grid/css/GridFilters.css" />
<link rel="stylesheet" type="text/css" href="scripts/ext/examples/ux/grid/css/RangeMenu.css" />
<script type="text/javascript" src="scripts/ext/examples/ux/grid/FiltersFeature.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="scripts/ext/examples/ux/grid/menu/RangeMenu.js"></script>
The reason that ExtJS tries to load ".../features/filter.js" is that the object that it is looking for ("features.filter") is not yet defined. ExtJS guesses this must be in a file called "features/filter.js". However, it is actually defined in "grid/FeaturesFilter.js"
(where "features.filter" is defined as an "alias" to "Ext.ux.grid.FiltersFeature").
Most people who have this problem have read the documentation and are trying to load Ext.ux.grid.FiltersFeature (usually at "ux/grid/FiltersFeature.js") but the timing of the
load is such that it is not loaded when it is needed. Therefore, ExtJS tries to load the
non-existent file.
The key to solving this problem is to ensure that the "Ext.ux.grid.FiltersFeature" is
fully loaded (not just the load initiated) by the time the grid is initializing with
the filters feature.
The sensible (and appropriate) thing is to put the "Ext.ux.grid.FiltersFeature"
in the "requires" of the class extending the grid.
This should ensure that the grid/FiltersFeature.js file is loaded before you need it.
// This should work
Ext.define("FrontSuite.view.MyGrid", {
extend: 'Ext.grid.Panel',
xtype: 'mygrid',
requires: [
'Ext.ux.grid.FiltersFeature'
],
title: 'My Grid',
...
features: [{
ftype : 'filters',
encode : true
}],
columns: [
{ dataIndex: 'id', text: 'ID'},
{ dataIndex: 'name', text: 'Name'}
]
}
If for some reason, the file does not load in time,
you can put a (seemingly redundant) requires "Ext.ux.grid.FiltersFeature" in
the Ext.application() call (ExtJS 4+).
Ext.application({
name: 'MyNamespace',
extend: 'MyNamespace.Application',
controllers: ['MyController'],
autoCreateViewport: true,
paths: {
'Ext.ux': 'path/to/my/ext/ux'
},
requires: [
'Ext.ux.grid.FiltersFeature'
]
});
IMPORTANT NOTES ON CLASS LOAD TIMING:
Putting the required class in the proper "requires" config for the proper requiring class
is important so that when you do a build and create a minified Javascript file, you get only the bits of the ExtJS library code that are truly needed. However, you should watch the Javascript console for messages that say that ExtJS had to load a file synchronously. If it does this, the "correct" location for a "requires" should be supplemented by a "redundant requires" somewhere earlier, such as in Ext.application() as shown above.
I ran into the same problem and finally figured it out. You need put Ext.Loader and Ext.require outside Ext.onReady.
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
Ext.onReady(function(){
...YOUR CODE HERE
}
If you are getting this error:
features/filters.js is not found
it indicates a loading error is the EXTJS libraries. Make sure to wrap the call that initializes your grid in the Ext.onReady() function that is shown in the example:
http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid-filtering/grid-filter-local.js
Works for me by this way for ExtJs 4.2 - for the error of features/filters.js is not found
Ext.application({
......
requires: [
'Ext.ux.grid.FiltersFeature',
..... more required files ....
]});
In the file that runs your Ext.application launch function you need to set a path to your user extensions so the application knows how to load these files which reside outside of your app (or similarly named) folder structure. You do that by setting the Ext.Loader config for path using:
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux':'ext-4.0.6/ux/' /*This should be the path to your top-level ux dir*/
}
});
The other answers on this are correct, but your issue is the auto-loader behavior. The directory path to the ux dir should be relative to the .js file calling this function.
just been thru the following example.
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
This walks thru setting a clean mvc structure and adding a grid to a page. On my website i wish to use many extjs features. But would like some clarity on the following.
1) typically would 1 website have only one app.js or would i create a new application per feature. So if i would like 1) contact info grid 2) news grid 3) a chart. Does mean 3 applications.
This is how i currently load my application ( which is a grid )
index.html
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'userlist',
title: 'Users',
html: 'List of users will go here'
}
]
});
}
});
#Frosty, You only need one application file per website.
You are encouraged to create separate classes for grids, charts and any other components that you will be using in your website. Each class should go into a separate file.
So then when you create an instance of your component using Ext.create, EXTJS4 will dynamically load that javascript file. This helps with performance issues in a large application as all the files don't need to be brought down on the page load.