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.
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 to show jwplayer in a popup, for popups I am using ngDialog(angular), code for ngDialog is below:
$scope.showVideoPlayerPopup = function(video_path)
{
$scope.ngDialog = ngDialog;
ngDialog.open({
animation: true,
scope:$scope,
template:'<div id="video_popup"></div>',
plain: true,
//className: 'ngdialog-theme-default',
closeByDocument: true
//backdrop : 'static'
});
playVideo(video_path);
}
play video function called above contains code for jwplayer, which is below:
<script>
function playVideo(video_path)
{
jwplayer("video_popup").setup({
file: video_path,
width: "600px",
height: "600px",
stretching: "bestfit",
});
}
</script>
when I use the same jwplayer code for simple html code which is without popup it works fine but I try to put my html in popup it gives me below error:
Error: jwplayer(...).setup is not a function
update
Files I have included:
<script src="https://content.jwplatform.com/libraries/qAkRysIB.js"></script>
Ensure the jwplayer src is included (you likely already did but in case not:)
Update 11/2021
see the section Cloud-hosted on the documentation page Add a player library. This will require obtaining a JWPlayer account.
From your Player Downloads & Keys page, scroll down to the Cloud Hosted Player Libraries section.
In the Cloud Hosted Player Libraries section, select a Player Title from the dropdown menu.
Copy the Cloud Player Library Url.
Within the <head> of your page, copy and paste the URL to the player library.
<script src="{cloud_hosted_player_library_url}"></script>
Ensure that the panel has loaded before calling the setup function. One way to do this is to register an event listener for ngDialog.opened from the ngDialog (see the Events section of the ngDialog readme):
$scope.$on('ngDialog.opened', function (e, $dialog) {
playVideo();
});
Yes...because your div tag with id "current_video_path" has to be there in DOM before jwplayer(...).setup script can work...May be you can add some delay using $timeout or setTimeout so it will have enough time to render div in popup before this script can wrok..
I am trying to clean up and restructure my javascript in my app, but once I change it it stops working. I am using ext scheduler in my app so that might be the problem. Here is how I want to set up
/ext/scheduler-3.0.0(all core code for schedule components go here)
/ext-all.js
/myscheduler(custom code for schedule components go here)
--/global/
----/view/
------globalscheduling.js
/model/
And This is how I start my app
ExtLatest.Loader.setConfig({enabled: true});
ExtLatest.define("scheduler.Application", {
extend: "Ext.app.Application",
requires: ["myscheduler.global.view.globalschedulegrid"],
name: "scheduler",
appFolder: "",
launch: function () {
getData()
}
});
However extjs still trying to go to https://c.na17.visual.force.com/apex/myscheduler/global/view/globalschedulegrid.js to find my view file what I doing wrong here?
Ext.Loader.setPath('myscheduler.global.view.globalschedulegrid', 'path to my scheduler');
OR
Ext.Loader.setConfig({
paths: {
'myscheduler': 'myscheduler',
}
});
Link to 5.0 Doc (Not sure which version you are using but it's the same)
5.1 as noted in the title. I didn't have to set the path for globalschedulegrid. Just specifying the paths in setConfig like this
ExtLatest.Loader.setConfig({enabled: true,
paths: {
'scheduler': "{!URLFOR($Resource.ConnectWeb, 'scripts/libs/scheduler')}"
}
});
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.