I have tried following example for creating grid using gridx of dojo by including all the src from online.
But it shows Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience and multipleDefine error
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dojo.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/dom.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/store/Memory.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/form/Button.js"></script>
<script
src="http://cdn.rawgit.com/oria/gridx/1.3/core/model/cache/Sync.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/Grid.js"></script>
<script src="http://cdn.rawgit.com/oria/gridx/1.3/modules/CellWidget.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/domReady.js"></script>
<script type="text/javascript">
var grid;
var store;
dojo.addOnLoad(function(dom, Memory, Button, Cache, Grid) {
name: 'gridx', store = new Memory({
data : [ {
id : 1,
feedname : 'Feed4',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'Feed5',
startstop : 0,
pause : '',
config : ''
} ]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{
id : 'feedname',
field : 'feedname',
name : 'Feed Name',
width : '110px'
},
{
id : 'startstop',
field : 'startstop',
name : 'Start/Stop',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'pause',
field : 'pause',
name : 'Pause',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>' ].join('');
}
},
{
id : 'config',
field : 'config',
name : 'Config',
width : '61px',
widgetsInCell : true,
navigable : true,
allowEventBubble : true,
decorator : function() {
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>' ].join('');
}
} ];
//Create grid widget.
grid = Grid({
id : 'grid',
cacheClass : Cache,
store : store,
structure : structure,
//autoHeight: true,
columnWidthAutoResize : false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store) {
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data : [ {
id : 1,
feedname : 'testingThis1',
startstop : 0,
pause : '',
config : ''
}, {
id : 2,
feedname : 'testingThis2',
startstop : 0,
pause : '',
config : ''
}, {
id : 3,
feedname : 'testingThis3',
startstop : 0,
pause : '',
config : ''
}, {
id : 4,
feedname : 'testingThis4',
startstop : 0,
pause : '',
config : ''
}, {
id : 5,
feedname : 'testingThis5',
startstop : 0,
pause : '',
config : ''
}, {
id : 6,
feedname : 'testingThis6',
startstop : 0,
pause : '',
config : ''
}, {
id : 7,
feedname : 'testingThis7',
startstop : 0,
pause : '',
config : ''
} ]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
}
var toggled = false;
function toggle() {
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon"
: "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick() {
alert("Pause!");
}
function onConfigButtonClick() {
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick() {
alert("onStartStopButtonClick!");
}
function onPauseButtonClick() {
alert("onPauseButtonClick!");
}
function onConfigButtonClick() {
alert("onConfigButtonClick!");
}
</script>
</head>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
I am trying this out using Tomcat server but not able to get the grid.
Could you please help me with this?
You were the missing the dojo require statement. You can find the working code below. I believe you are a beginner in dojo so you can find excellent article about dojo # http://dojotoolkit.org/reference-guide/1.7/dojo/require.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js' data-dojo-config="async: true, parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/oria/gridx/1.3/resources/claro/Gridx.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/document.css">
<script type='text/javascript'>//<![CDATA[
var grid;
var store;
require({
packages: [
{
name: 'gridx',
location: '//cdn.rawgit.com/oria/gridx/1.3'
}
]
},[
//Require resources.
"dojo/dom",
"dojo/store/Memory",
"dijit/form/Button",
"gridx/core/model/cache/Sync",
"gridx/Grid",
"gridx/modules/CellWidget",
"dojo/domReady!"
], function(dom, Memory, Button, Cache, Grid){
store = new Memory({
data: [
{ id: 1, feedname: 'Feed4', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'Feed5', startstop: 0, pause: '', config: ''}
]
});
var cacheClass = "gridx/core/model/cache/Sync";
var structure = [
{ id: 'feedname', field: 'feedname', name: 'Feed Name', width: '110px' },
{ id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ',
'onClick="onStartStopButtonClick();" ',
'data-dojo-attach-point="btn" ',
'class="startStopButtonPlay" ',
'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set('label', data);
}
},
{ id: 'pause', field: 'pause', name: 'Pause', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onPauseButtonClick();" ',
'data-dojo-attach-point="btn2" ',
'class="pauseButton" ',
'data-dojo-props="iconClass:\'pauseIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(data){
//"this" is the cell widget
this.btn2.set('label2', data);
}
},
{ id: 'config', field: 'config', name: 'Config', width: '61px',
widgetsInCell: true,
navigable: true,
allowEventBubble: true,
decorator: function(){
//Generate cell widget template string
return [
'<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ',
'onClick="onConfigButtonClick();" ',
'data-dojo-attach-point="btn3" ',
'class="configButton" ',
'data-dojo-props="iconClass:\'configIcon\'" ',
'></button></div>'
].join('');
},
setCellValue: function(gridData, storeData, cellWidget){
//"this" is the cell widget
cellWidget.btn3.set('label3', data);
}
}
];
//Create grid widget.
grid = Grid({
id: 'grid',
cacheClass: Cache,
store: store,
structure: structure,
autoHeight: true,
columnWidthAutoResize: false
});
//Put it into the DOM tree.
grid.placeAt('compactWidgetGrid');
//Start it up.
grid.startup();
// TODO: I need to make Memory and store global somehow so I can get the data before creating the grid!!
updateGridXData(Memory, store);
});
function createDataStore(Memory, store){
currentGridXData = new Memory({
// TODO: Replace data here with actual feed data received from server!
data: [
{ id: 1, feedname: 'testingThis1', startstop: 0, pause: '', config: ''},
{ id: 2, feedname: 'testingThis2', startstop: 0, pause: '', config: ''},
{ id: 3, feedname: 'testingThis3', startstop: 0, pause: '', config: ''},
{ id: 4, feedname: 'testingThis4', startstop: 0, pause: '', config: ''},
{ id: 5, feedname: 'testingThis5', startstop: 0, pause: '', config: ''},
{ id: 6, feedname: 'testingThis6', startstop: 0, pause: '', config: ''},
{ id: 7, feedname: 'testingThis7', startstop: 0, pause: '', config: ''}
]
});
return currentGridXData;
}
function updateGridXData(Memory, store) {
grid.model.clearCache();
var appFeedsStore;
// Create new data store for GridX
//This line was giving a JavaScript error because appFeedListJSON undefined.
//Commnent out and uncomment other line to see difference.
appFeedsStore = createDataStore(Memory, store, appFeedListJSON);
//appFeedsStore = createDataStore(Memory, store);
grid.setStore(appFeedsStore);
grid.model.store.setData(appFeedsStore);
// grid.refresh();
grid.body.refresh();
//},
//error: function (error) {
// console.log("Inside ERROR");
// }
//});
}
function onStartStopButtonClick(){
alert("Start/Stop!");
}
var toggled = false;
function toggle(){
myToggleButton.set("iconClass", toggled ? "startStopButtonPlayIcon" : "startStopButtonStopIcon");
toggled = !toggled;
}
function onPauseButtonClick(){
alert("Pause!");
}
function onConfigButtonClick(){
alert("Config!");
}
// onClick functions for the app three buttons: Start/Stop, Pause, Config
function onStartStopButtonClick(){
alert("onStartStopButtonClick!");
}
function onPauseButtonClick(){
alert("onPauseButtonClick!");
}
function onConfigButtonClick(){
alert("onConfigButtonClick!");
}
//]]>
</script>
</head>
<body>
<body class="claro">
<div id="compactWidgetGrid"></div>
</body>
</html>
Related
In my ajax sucess i am calling this funcction and there from response I am extracting the data which I need to load.
success: function(response){
StoreloadData(this,response);
},
In StoreloadData function i am trying to load data in my grid like this but not getting data.
StoreloadData(me,response){
var myGrid = Ext.getCmp('#myGrid');
var myGridStore = myGrid.getStore();
var gridData = response.myData.data;
var total = gridData[0].recordsCount;
myGridStore.load(gridData); // Not loading
myGridStore.loadData(gridData); // Not loading
myGrid.refresh(); // Error.
}
Here I have myJSon data in this line var gridData = response.myData.data; this is a simple json object like this.
[{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"}]
Can anyone please suggest me how to overcome from this.
I suggest you this solution. Just define the empty store with fields definitions, then load data using Ext.JSON.decode() and store.loadData().
Working example:
File grid_json_load.json:
{
"data": [
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
},
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
}
],
"success": true
}
File grid_json_load.html:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('Test.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = Ext.create('Ext.data.ArrayStore', {
data: [],
fields: [
{name: "dataIndex1", type: "string"},
{name: "dataIndex2", type: "string"}
]
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Data Index 1', width: 100, dataIndex : 'dataIndex1'},
{header : 'Data Index 2', width: 100, dataIndex : 'dataIndex2'}
]
});
me.add(me.grid);
}
});
Ext.onReady(function(){
var win = Ext.create('Test.TestWindow', {
});
Ext.Ajax.request({
url: 'grid_json_load.json',
method: 'POST',
timeout: 1200000,
params: {
},
success: function (response, opts) {
var win = new Test.TestWindow({
});
var r = Ext.JSON.decode(response.responseText);
if (r.success == true) {
win.show();
win.store.loadData(r.data);
} else {
Ext.Msg.alert('Attention', 'Error');
};
}
});
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Notes:
Tested with ExtJS 4.2 and ExtJS 6.6.
how can I optimize my fullcalendar to dynamically add/bind events. I cannot find any usefull resources for angular. Most of the docs are jquery. Below is my set up. I have added the eventRender function but not filled. Thanks for the help..
function clearCalendar(){
if(uiCalendarConfig.calendars.myCalendar != null){
uiCalendarConfig.calendars.myCalendar.fullCalendar('removeProjects');
uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect')
}
}
function populate() {
clearCalendar();
$http.get('/projs', {
cache: false,
params: {}
}).then(function data) {
angular.forEach(data.data, function (value) {
$scope.projects.push({
projectID : value.projectID,
client : value.client,
title: value.title,
description: value.description,
start: new moment(value.startAt),
end: new moment(value.endAt),
employees: value.employees,
allDay: value.isFullDay,
stick: true
});
});
});
}
populate();
$scope.uiConfig = {
calendar: {
height: 500,
editable: true,
displayEventTime: true,
header: {
left: 'month, agendaWeek, agendaDay',
center: 'title',
right: 'today prev,next'
},
selectable: true,
selectHelper: true,
select: function(start, end){
$scope.showSelected = false;
var fromDate = moment(start).format('DD/MM/YYYY LT');
var endDate = moment(end).format('DD/MM/YYYY LT');
$scope.Project = {
ProjectID : 0,
Client: '',
Title : '',
Description: '',
Employees: '',
StartAt : fromDate,
EndAt : endDate,
IsFullDay : false
}
$scope.ShowModal()
},
eventClick: function (project) {
$scope.showSelected = true;
$scope.SelectedProject = project;
var fromDate = moment(project.start).format('DD/MM/YYYY LT');
var endDate = moment(project.end).format('DD/MM/YYYY LT');
$scope.Project = {
ProjectID : project.projectID,
Client : project.client,
Title : project.title,
Description: project.description,
Employees: project.employees,
StartAt : fromDate,
EndAt : endDate,
IsFullDay : false
}
$scope.ShowModal()
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function (){
if($scope.projects.length > 0 && isFirstTime) {
uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.projects[0].start);
isFirstTime = false;
}
}
}
};
calendar in my html
<div class="col-md-8">
<div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSource" calendar="myCalendar"></div>
</div>
UPDATE
current display on calendar
Fullcalendar accepts an eventSource object containing an array of events.
You're already building this array of events in $scope.projects. Now you can just add it to an eventSource like so:
$scope.eventSource = {
events: $scope.projects
};
You've alreay injected uiCalendarConfig so you can now add the eventSource to your calendar:
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);
All this should happen just after your forEach loop.
function ctrl($scope, uiCalendarConfig, $timeout) {
$scope.eventSource = {};
$scope.config = {
calendar:{
editable: true,
header:{
left: '',
center: 'title',
right: ''
},
dayClick: dayClick
}
};
$scope.projects = [
{
projectID : 123,
client : 321,
title: "test",
description: "test",
start: moment(),
end: moment(),
allDay: true,
stick: true
}
];
$scope.eventSource = {
events: $scope.projects
};
function dayClick(date, jsEvent, view) {
var source = [
{
projectID : 58,
client : 85,
title: "new",
description: "new",
start: date.format().toString(),
allDay: true,
stick: true
}
];
uiCalendarConfig.calendars['projects'].fullCalendar('addEventSource', source);
}
}
angular.module('app', ['ui.calendar']);
angular.module('app')
.controller('ctrl', ctrl);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<div ng-app="app">
<div ng-controller="ctrl">
<div calendar="projects" ui-calendar="config.calendar" ng-model="eventSource"></div>
{{hello}}
</div>
</div>
I'm using the dojo grid cell formatter to display an inner grid within another grid. Even though the inner grid is added, it does not display on the HTML page cause its height and width are 0px.
My JSP page and the JS page where the grids are created is shown below. Any help will be appreciated.
My guess is that calling grid.startup() in the cell formatter is probably not the right place. But where should I move the startup() call to -or- is there something else that needs to be done to get the inner grid to render correctly.
----JSP file ----
<script type="text/javascript"> dojo.require("portlets.ListPortlet"); var <portlet:namespace/>args = { namespace: '<portlet:namespace/>', listDivId: 'listGrid' }; var <portlet:namespace/>controller = new portlets.ListPortlet(<portlet:namespace/>args); dojo.addOnLoad(function(){ <portlet:namespace/>controller.init(); }); </script>
</div>
----JS file ----
dojo.declare("portlets.ListPortlet", null, {
constructor: function(args){
dojo.mixin(this,args);
this.params = args;
},
init: function(){
var layout = [[
{field: 'site', name: 'Site', width: '30px' }
{field: 'name', name: 'Full Name', width: '100px'},
{field: 'recordStatus', name: 'Status', width: '80px' }
],[
{field: '_item', name: ' ', filterable: false, formatter: this.formatNotesTable, colSpan: 3 }
]];
this.grid = new dojox.grid.EnhancedGrid({
autoHeight: true,
autoWidth: true,
selectable: true,
query:{
fromDate: start,
toDate: end
},
rowsPerPage: 10
});
this.grid.placeAt(dojo.byId(this.listDivId));
this.dataStore = new dojox.data.JsonRestStore({target: dataURL, idAttribute: idAttribute});
this.grid.setStructure(layout);
this.grid.startup();
},
formatNotesTable(rowObj) {
var gridData = {
identifier:"id",
items: [
{id:1, "Name":915,"IpAddress":6},
{id:2, "Name":916,"IpAddress":7}
]
};
var gridStructure = [{
cells:[
[
{ field: "Name",
name: "Name",
},
{ field: "IpAddress",
name: "Ip Address" ,
styles: 'text-align: right;'
}
]
]
}];
var gridStore = new dojo.data.ItemFileReadStore( { data: gridData} );
var cpane = new dijit.layout.ContentPane ({
content: "inner grid should be displayed below"
});
var subgrid = new dojox.grid.DataGrid({
store: gridStore,
structure: gridStructure,
style: {width: "325px", height: "300px"}
});
subgrid.placeAt(cpane);
subgrid.startup();
return cpane;
}
}
I solved my problem by using a dojox.layout.TableContainer inside the EnhancedGrid.
I found some code on GitHub (https://github.com/RallyCommunity/TagCloud) for displaying a TagCloud in Rally. Conceptually it looks great but I cannot seem to get it to work and wondered if there were any Rally JavaScript experts out there who could take a quick look.
I modified it slightly as the URL for the Analytics was incorrect (according to the docs) and the API's were hard coded to depreciated versions so I updated those.
I'm not a JavaScript expert. When I run this it doesn't find any Tags against stories.
When I run this in Chrome debugging mode I can take the URL and execute it in my browser but it also does not come back with any Tags. It comes back with a full result response from Analytics, but has no tags and I know there are tags against stories in the selected project.
Any ideas from anyone?
<!DOCTYPE html>
<html>
<head>
<title>TagCloud</title>
<script type="text/javascript" src="/apps/2.0p/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
layout: 'border',
items: [
{
title: 'Tag Cloud',
xtype: 'panel',
itemId: 'cloud',
region: 'west',
width: '30%',
collapsible: true,
bodyStyle: 'padding:15px',
listeners: { 'afterRender': function(el) { setTimeout(function() { el.setLoading(); }, 500);}} // needs a little delay
},
{
title: '<<< Select a tag from the Tag Cloud',
xtype: 'panel',
itemId: 'grid',
region: 'center',
width: '70%',
collapsible: false
}
],
tagMap : [],
maxFont : 24, // largest desired font size
minFont : 8, // and smallest
_renderTag : function renderHandler(tagLabel) {
tagLabel.getEl().on('click',this._tagSelected, this);
},
// does the actual building of the cloud from 'tagMap'
_buildCloud: function(app, response) {
//title: '<<< Select a tag from the Tag Cloud - Building',
var i, tag;
for (i=0;i<response.Results.length;i++) {
tag = response.Results[i];
if(typeof app.tagMap[tag.ObjectID] !== "undefined") {
app.tagMap[tag.ObjectID].Name = tag._refObjectName;
}
}
if(response.StartIndex+response.PageSize < response.TotalResultCount) {
app._queryForTagNames(response.StartIndex+response.PageSize, app, app._buildCloud);
} else {
if(app.tagMap.length === 0) {
tag = new Ext.form.Label({
id: 'tagNone',
text: ' No tagged Stories found '
});
app.down('#cloud').add(tag);
} else {
var minFrequency = Number.MAX_VALUE;
var maxFrequency = Number.MIN_VALUE;
var tuples = [];
for (var x in app.tagMap) {
if (app.tagMap.hasOwnProperty(x)) {
tuples.push([x, app.tagMap[x]]);
if(app.tagMap[x].count > maxFrequency) {
maxFrequency = app.tagMap[x].count;
}
if(app.tagMap[x].count < minFrequency) {
minFrequency = app.tagMap[x].count;
}
}
}
tuples.sort(function(a,b) { a = a[1]; b = b[1]; return a.Name > b.Name ? 1 : a.Name < b.Name ? -1 : 0 ;});
for (i = 0; i < tuples.length; i++) {
var ftsize = ((tuples[i][1].count-minFrequency)*(app.maxFont-app.minFont) / (maxFrequency-minFrequency)) + app.minFont;
tag = new Ext.form.Label({
id: 'tag'+tuples[i][0],
text: ' ' + tuples[i][1].Name + ' ',
overCls: 'link',
style:"font-size: "+ftsize+"pt;",
listeners: { scope: app, render: app._renderTag }
});
app.down('#cloud').add(tag);
}
}
app.getComponent('cloud').setLoading(false);
}
},
// collects the _queryForTags responses and calls _queryForTagNames when it has them all
_buildTagMap: function(app, response) {
for (var i=0;i<response.Results.length;i++) {
var ent = response.Results[i];
for (var j=0; j < ent.Tags.length; j++) {
var tag = ent.Tags[j];
var mapent = app.tagMap[tag];
if(typeof mapent === "undefined") {
mapent = { count: 1 };
} else {
mapent.count++;
}
app.tagMap[tag] = mapent;
}
}
if(response.StartIndex+response.PageSize < response.TotalResultCount) {
app._queryForTags(response.StartIndex+response.PageSize, app, app._buildTagMap);
} else {
app._queryForTagNames(0, app, app._buildCloud);
}
},
// get a list of the tags from the Lookback API, iterating if necessary (see _buildTagMap)
_queryForTags: function(start, app, callback) {
var params = {
find: "{'Tags':{'$exists':true}, '__At':'current', '_Type':'HierarchicalRequirement', '_ProjectHierarchy':"+ this.getContext().getProject().ObjectID +" }",
fields: "['Tags']",
pagesize: 20000,
start: start
};
Ext.Ajax.request({
url: 'https://rally1.rallydev.com/analytics/v2.0/service/rally/workspace/'+ this.context.getWorkspace().ObjectID + '/artifact/snapshot/query.js',
method: 'GET',
params: params,
withCredentials: true,
success: function(response){
var text = response.responseText;
var json = Ext.JSON.decode(text);
callback(app, json);
}
});
},
// once all the tags have been collected, get a list of the tag names from the WSAPI, iterating if necessary (see _buildCloud)
_queryForTagNames: function(start, app, callback) {
Ext.Ajax.request({
url: 'https://rally1.rallydev.com/slm/webservice/1.41/tag.js',
method: 'GET',
params: { fetch: "ObjectID", pagesize: 200, "start": start},
withCredentials: true,
success: function(response){
callback(app, Ext.JSON.decode(response.responseText).QueryResult);
}
});
},
_queryForStories: function(tagOid) {
Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
autoLoad: true,
fetch: ['Rank', 'FormattedID', 'Name', 'ScheduleState'],
filters: [{
property:'Tags',
operator: '=',
value: "tag/" + tagOid
}],
sorters: [{
property: 'Rank',
direction: 'ASC'
}],
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_tagSelected: function(app, elem) {
this.getComponent('grid').setLoading();
this._queryForStories(elem.id.substring(3)); // cheesy, id is "tag"+tagOid, we need the oid
this.tagName = elem.innerText;
},
_onDataLoaded: function(store, data) {
var records = [], rankIndex = 1;
Ext.Array.each(data, function(record) {
records.push({
Ranking: rankIndex,
FormattedID: record.get('FormattedID'),
Name: record.get('Name'),
State: record.get('ScheduleState')
});
rankIndex++;
});
var customStore = Ext.create('Rally.data.custom.Store', {
data: records,
pageSize: 25
});
if(!this.grid) {
this.grid = this.down('#grid').add({
xtype: 'rallygrid',
store: customStore,
columnCfgs: [
{ text: 'Ranking', dataIndex: 'Ranking' },
{ text: 'ID', dataIndex: 'FormattedID' },
{ text: 'Name', dataIndex: 'Name', flex: 1 },
{ text: 'State', dataIndex: 'State' }
]
});
} else {
this.grid.reconfigure(customStore);
}
this.getComponent('grid').setTitle('Stories tagged: ' + this.tagName);
this.getComponent('grid').setLoading(false);
},
launch: function() {
this._queryForTags(0, this, this._buildTagMap);
}
});
Rally.launchApp('CustomApp', {
name: 'TagCloud'
});
});
</script>
<style type="text/css">
.app {
}
.link {
color: #066792;
cursor: pointer;
} </style>
</head>
<body></body>
</html>
The code was out-of-date with respect to the most-recent LBAPI changes - specifically the use of _Type vs _TypeHierarchy and of course, the url, as you'd already discovered. Please pick up the changes and give it a whirl.
Below is the code by which I am creating a link in my page using ExtJS:
var linkTransValues = {
xtype: 'box',
id : 'testId',
hidden : true,
autoEl: {
tag: 'a',
href: 'javascript:addCategoryValue()',
html: 'Add Transition Category'
}
}
Now what I want is when user select value from one combo box whatever combo box description is there that description should come in link text here is my code I am calling on select of combo box:
transType.on('select', function(cbox, rec, index) {
Ext.getCmp("testId").transId = cbox.getValue();
Ext.getCmp("testId").autoEl.html="dropdown description";
Ext.getCmp("testId").show();
});
Problem is that it is changing the html value but new value not reflecting its showing the initial value only how to change link value. How can I change that?
Try
var linkTransValues = {
xtype: 'box',
id : 'testId',
hidden : true,
autoEl: {tag: 'a', id: 'my-element', href: 'javascript:addCategoryValue()', html: 'Add Transition Category'}
};
Ext.get('my-element').update('new value');
enter code here
View File :
Ext.define('ExtMVC.view.contact.ContactForm', {
extend : 'Ext.form.Panel',
alias : 'widget.contactform',
name : 'contactform',
frame : true,
title : 'XML Form',
items : [ {
xtype : 'fieldset',
title : 'Contact Information',
defaultType : 'displayfield',
defaults : {
width : 280
},
items : [ {
label : 'First',
xtype : 'hyperLink',
itemId : 'CData',
id : 'CData',
value : 'test'
} ]
} ]
});
Controller File :
Ext.define('ExtMVC.controller.Contacts', {
extend : 'Ext.app.Controller',
views : [ 'contact.ContactForm', 'contact.hyperLink' ],
init : function() {
this.control({
'[itemId=CData]' : {
afterrender : function(cmp) {
// debugger;
// cmp.down('[itemId=CData]').update('testst');
//Ext.get('CData-btnEl').update('new value');
//alert('rerer');
//$('#CData-btnEl').text('20/10/2013');
// console.log("tsrrtya::" +
// cmp.down('[itemId=CData]').update('New label'));
},
click : function(cmp) {
alert("test");
// debugger;
// cmp.down('[itemId=CData]').update('testst');
//Ext.get('CData-btnEl').update('new value');
//cmp.down('[itemId=CData]').setValue('NValue');
// console.log("tsrrtya::" +
// cmp.down('[itemId=CData]').update('New label'));
}
}
});
}
});
Dynamic HyperLink File
Ext.define('ExtMVC.view.contact.hyperLink', {
extend : 'Ext.Component',
alias : 'hyperLink',
xtype : "hyperLink",
itemId : "hyperLink",
autoEl : 'a',
renderTpl : '{label} {value}',
config : {
text : '',
value : '',
label : '',
handler : function() {
}
},
initComponent : function() {
var me = this;
me.callParent(arguments);
this.renderData = {
text : this.getText(),
value : this.getValue(),
label : this.getLabel()
};
},
onRender : function(ct, position) {
var me = this, btn;
me.addChildEls('btnEl');
me.callParent(arguments);
btn = me.btnEl;
me.on('afterrender', function () { });
me.mon(btn, 'click', me.onClick, me);
},
onClick : function(e) {
var me = this;
if (me.preventDefault || (me.disabled && me.getHref()) && e) {
e.preventDefault();
}
if (e.button !== 0) {
return;
}
if (!me.disabled) {
me.fireHandler(e);
}
},
fireHandler : function(e) {
var me = this, handler = me.handler;
me.fireEvent('click', me, e);
if (handler) {
handler.call(me.scope || me, me, e);
}
}
});
var linkTransValues = {
xtype: 'box',
id : 'testId',
hidden : true,
autoEl: {tag: 'a', id : 'testId',, href: 'javascript:addCategoryValue()', html: 'Add Transition Category'}
};
Ext.get('testId').dom.href="your URL or function";