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.
Related
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>
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.
This one will be most probably easy question. I'm very new to Web programming and I was given a task to learn Ext JS (I don't know anything about it they just told me to learn this, may be there are some better frameworks out there, but I don't know). So I started with a very simple example.
This is the Ext JS code
Ext.define('Cookbook.Vehicle', {
config: {
Manufacturer: 'Aston Martin',
Model: 'Vanquish'
},
constructor: function(config) {
// initialise config object
this.initConfig(config);
},
getDetails: function() {
alert('I am an ' + this.getManufacturer() + ' ' + this.getModel());
},
});
var myVehicle = Ext.create('Cookbook.Vehicle');
myVehicle.getDetails(); // alerts 'I am an Aston Martin Vanquish'
And this is the HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/extall.css" />
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="Chapter 1.js"></script>
</head>
<body>
<h2 id="h2">Nothing seem to work</h2>
</body>
</html>
I suppose that Ext JS code should run after the .hmtl file is launched right? But the thing is, nothing happens. Just a plane page which says Nothing seems to work. Is there a problem in my code? Or is there a special thing to be done to run Ext JS code. I don't really know what to do.
I am using D3 to render into an ExtJs component from a Json data source.
from test.html:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js"></script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<script type='text/javascript'>
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',
{
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
html : 'There should be a test below this'
},
{
id: 'testPanel',
xtype: 'xxxviewtest'
}
]
});
d3.json("Test1.json", function(json) { Ext.getCmp ('testPanel').deliverJson (json); });
});
</script>
</body>
</head>
and Test.js:
Ext.define('xxx.view.Test', {
extend: 'Ext.Component',
alias: 'widget.xxxviewtest',
deliverJson: function(json) {
var target = d3.select("#" + this.id);
if (target[0][0]) {
// install svg element and draw
...
}
}
});
In simple test cases this is working fine, but in a more complex document case involving tab panels and a lot of UI components, the call to d3.select in Test.js is returning an empty selection.
What do I need to do for this to work correctly?
If "d3.select in Test.js is returning an empty selection", I think at that time the Ext components which you queried have not fully displayed. So I recommend moving the d3.json(...) into render event's handler to eliminate one possibility. If the issues still happen, we will find another way.
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.