Javascript returns object object error while executing this code.As i am new to javascript,i am not able to identify the specific issue.Also the name of the user story is not properly aligned wiht the Userstory id.Looking for help.Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title>UserStoryWithPredecessors</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
fetch:
['Iteration','FormattedID','Name','Predecessors','PredecessorID','Project','ScheduleState'],
filters: [
{
property: 'Iteration.Name',
operator: '=',
value: 'RT4 Iteration #4'
}
],
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data) {
var records = [];
Ext.Array.each(data, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
var myPredecessors = record.get('Predecessors');
var predecessorData = "";
var predecessorCreationDate = "";
var predecessorState = "";
var predecessorProject = "";
var predecessorID = "";
var predecessorName = "";
// Loop through and process Predecessor data
for (var i=0; i<myPredecessors.length; i++) {
thisPredecessor = myPredecessors[i];
thisPredecessorFormattedID = thisPredecessor["FormattedID"];
thisPredecessorName = thisPredecessor["Name"];
thisPredecessorScheduleState=thisPredecessor["ScheduleState"];
thisPredecessorProject= thisPredecessor["Project"];
// Post-pend updated data to value for array
// predecessorData += thisPredecessorFormattedID + ": " +
thisPredecessorName + "<br>"
predecessorID += thisPredecessorFormattedID + "<br>";
predecessorName += thisPredecessorName + "<br>";
predecessorState += thisPredecessorScheduleState + "<br>";
predecessorProject += thisPredecessorProject + "<br>";
}
records.push({
FormattedID: record.get('FormattedID'),
Name: record.get('Name'),
Iteration:
(record.get('Iteration')&&record.get('Iteration')._refObjectName) || '',
PredecessorID : predecessorID,
PredecessorName : predecessorName,
PredecessorState: predecessorState,
PredecessorProject: predecessorProject,
});
});
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: records,
pageSize: 20
}),
columnCfgs: [
{
text: 'Iteration', dataIndex: 'Iteration', width: '100px'
},
{
text: 'FormattedID', dataIndex: 'FormattedID', width: '100px'
},
{
text: 'Name', dataIndex: 'Name', width: '400px'
},
{
text: 'PredecessorID', dataIndex: 'PredecessorID', width: '100px'
},
{
text: 'PredecessorName', dataIndex: 'PredecessorName', width:
'200px'
},
{
text: 'Project', dataIndex: 'PredecessorProject', width: '200px'
},
{
text: 'State', dataIndex: 'PredecessorState', width: '400px'
}
//,
//{
// text: 'Predecessor Creation Date(s)', dataIndex:
'PredecessorCreationDate', width: '200px'
// }
]
});
}
});
Rally.launchApp('CustomApp', {
name: 'UserStoryWithPredecessors'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>
i have found an answer the question my self.I did small modification in the code and it works.
thisPredecessorProject= thisPredecessor["Project"]._refObjectName;
I need to Print this sheet in to a Report.Looking for yours assistance.Thanks in advance.
Related
I have a main.js
**Ext.define('EDevlet.view.Main', {
viewport: {
autoMaximize: true
},
extend: 'Ext.Container',
xtype: 'mainview',
defaultColumnCount: 2,
config: {
scrollable:"vertical",
cls: "page-content-style page-with-main-buttons",
fullscreen: true,
title: i18n["edevlet_title"],
flex:1,
height:800,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex:1
},
items: [{
xtype: "panel",
id: "greeting-message",
cls: "greeting",
docked: "top"
}
]
},**
loadMenu: function () {
Logger.log("#Main::loadMenu");
this.removeAll(true, false);
var services = SegmentUtil.getServiceContent(), // boş olma ihtimali yok, BE den gelmez ise yereldeki DEFAULT segment içeriğini kullanıyor
maxServiceSize = SegmentUtil.getHomePageMaxServiceSize(),
columnCount = this.defaultColumnCount,
rowCount = Math.ceil((maxServiceSize + 1) / columnCount), // +1 diğer servisler düğmesi için !
index,
service,
title,
itemId,
button,
menuRow,
rowIndex,
isLeftSide,
verticalPosition = -1;
Logger.log('services: ' + services);
Logger.log('rowCount: ' + rowCount + ', columnCount: ' + columnCount + ', maxServiceSize: ' + maxServiceSize);
// satırları oluştur
var newCount=rowCount+1;
for (index = 0; index < newCount; index++) {
if(index==0){
**this.add({
id: 'mainRow-' + index,
xtype: 'carousel', flex:3,
layout: 'hbox',
defaults: {
flex:1
}, items: [
{ id: 'Image1',
html: ''
},
{ id: 'Image2',
html: ''
},
{ id: 'Image3',
html: ''
},
{ id: 'Image4',
html: ''
}
]
});
this.requestBackEndForNewsUrl();
}
else{
this.add({
id: 'mainMenuRow-' + index,
xtype: 'container',
flex:2,
layout: 'hbox',
defaults: {
flex:1
}
});
}**
}
}
}
And I have a load function.Load function add items(this items is image).But my scrool seem but not working.I hold scroll but if a release scroll is going up.
I have a vbox.After two hbox is added.But scroll is not working.
Try this. Write this override code in app.js file & then check.
// Fix for scroll
Ext.override(Ext.util.SizeMonitor, {
constructor: function (config) {
var namespace = Ext.util.sizemonitor;
return new namespace.Scroll(config);
}
});
Ext.override(Ext.util.PaintMonitor, {
constructor: function (config) {
return new Ext.util.paintmonitor.CssAnimation(config);
}
});
Change your view's config to this:
scrollable: {
direction: 'vertical',
directionLock: true
},
flex:1,
height: '100%',
This will serve your purpose. Let me know if it helps or not.
I created a dropdown inside a column of angularJS UI grid. Infact I took the same example as there in UI grid tutorial.ref:http://ui-grid.info/docs/#/tutorial/201_editable
. Here I modified to apply my own template(partial.html) for editableCelltemplate . When I change the drop down value, it's not captured.
app.js
http://plnkr.co/edit/UMsOeeETHxbMMdZQry90?p=preview
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'addressFormatter']);
angular.module('addressFormatter', []).filter('address', function () {
return function (input) {
return input.street + ', ' + input.city + ', ' + input.state + ', ' + input.zip;
};
});
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = { };
$scope.editDropdownOptionsArrayValue = [{id:1, gender:'male'},
{id:1, gender:'male'}
];
$scope.gridOptions.columnDefs = [
{ name: 'id', enableCellEdit: false, width: '10%' },
{ name: 'name', displayName: 'Name (editable)', width: '20%' },
{ name: 'age', displayName: 'Age' , type: 'number', width: '10%' },
{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'partial.html', width: '20%',
cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: $scope.editDropdownOptionsArrayValue},
{ name: 'registered', displayName: 'Registered' , type: 'date', cellFilter: 'date:"yyyy-MM-dd"', width: '20%' },
{ name: 'address', displayName: 'Address', type: 'object', cellFilter: 'address', width: '30%' },
{ name: 'address.city', displayName: 'Address (even rows editable)', width: '20%',
cellEditableCondition: function($scope){
return $scope.rowRenderIndex%2
}
},
{ name: 'isActive', displayName: 'Active', type: 'boolean', width: '10%' },
{ name: 'pet', displayName: 'Pet', width: '20%', editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownRowEntityOptionsArrayPath: 'foo.bar[0].options', editDropdownIdLabel: 'value'
}
];
$scope.msg = {};
$scope.gridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
$scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
$scope.$apply();
});
};
$http.get('/data/500_complex.json')
.success(function(data) {
for(i = 0; i < data.length; i++){
data[i].registered = new Date(data[i].registered);
data[i].gender = data[i].gender==='male' ? 1 : 2;
if (i % 2) {
data[i].pet = 'fish'
data[i].foo = {bar: [{baz: 2, options: [{value: 'fish'}, {value: 'hamster'}]}]}
}
else {
data[i].pet = 'dog'
data[i].foo = {bar: [{baz: 2, options: [{value: 'dog'}, {value: 'cat'}]}]}
}
}
$scope.gridOptions.data = data;
});
}])
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
})
;
.grid {
width: 600px;
height: 450px;
}
<select ng-model="gender" data-ng-options="d as d.gender for d in grid.appScope.editDropdownOptionsArrayValue">
<option value="" selected="selected">select</option>
</select>
you can see when I change dropdown value the
gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
$scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
$scope.$apply();
is not getting executed.
The same is getting executed in I apply editableCellTemplate: 'ui-grid/dropdownEditor' the default template. But in case of custome it's not executed. Any workaround/solution/pointer will really helpful.
In order to have a custom editor you need to write a directive and provide the events that the editable feature hooks onto - the end cell edit etc. I wrote the original dropdown editor for ui-grid, which was a bit of fiddling around. The commit that included it is here: https://github.com/angular-ui/ng-grid/pull/1561, which will give some idea of the bits and pieces that are required to make it work. (there's some mention of this in the editable tutorial).
I have a jqQrid that I have placed inside a HTML table. Now as per my requirement I have to show this grid inside the dynamic tab which is opened on hyper link click.
Here is the code for dynamic tab creation:
function addTab(title) {
if ($('#tt').tabs('exists', title)) {
$('#tt').tabs('select', title);
}
else {
if (title == "Check in List") {
//Here i have to call jqgrid loading function but how I am not getting !!!
var content = '';
}
else {
var content = '<p>Hii</p>';
}
$('#tt').tabs('add', {
title: title,
content: content,
closable: true
});
}
}
Here is the function to generate the grid:
function CheckInRecordgrid() {
//Grid Codes
}
And here is the HTML table placeholder:
<table id="CheckIngrid"></table>
Now my question is how to call the grid generation function if the clicked tab is as per the condition?
Here is my full grid code..
function CheckInRecordgrid() {
var data = [[48803, "DELUX", "A", "2014-09-12 12:30:00", "Done"], [48804, "NORAML", "V", "2014-09-12 14:30:00", "Pending"]];
$("#CheckIngrid").jqGrid({
datatype: "local",
height: '100%',
autowidth: true,
colNames: ['Room No.', 'Category', ' Guest name', ' Date & Time ', 'Status'],
colModel: [
{
name: 'Room No.', index: 'Room No.', width: 100, align: 'center'
},
{
name: 'Category', index: 'Category', width: 100, align: 'center'
},
{
name: 'Guest name', index: 'Guest name', width: 100, align: 'center'
},
{
name: 'Date & Time', index: 'Date & Time', width: 100, align: 'center'
},
{
name: 'status', index: 'status', width: 100, align: 'center'
}
],
caption: "Check In List"
});
var names = ["Room No.", "Category", "Guest name", "Date & Time", "status"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
mydata[i] = {};
for (var j = 0; j < data[i].length; j++) {
mydata[i][names[j]] = data[i][j];
}
}
for (var i = 0; i <= mydata.length; i++) {
$("#CheckIngrid").jqGrid('addRowData', i + 1, mydata[i]);
}
}
try this
if (title == "Check in List") {
var content = '';
}else {
var content = '<p>Hii</p>';
};
$('#tt').tabs('add', {
title: title,
content: content,
closable: true,
}).tabs({
onAdd: function(title,index){
if (title == "Check in List") {
CheckInRecordgrid();
}
}
});
Using AppSDK 2.0, how can I see the "Release" field in the PortfolioItem/Feature when I create a store?
Release needs to be among the fetched fields in WsapiDataStore:
fetch: ['FormattedID','Name','UserStories','Release']
But then in a Rally.data.custom.Store, to account for Features that are not assigned to a release, this condition is used:
Release: (release && release.Name) || 'None'
Here is the code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'PortfolioItem/Feature',
fetch: ['FormattedID','Name','UserStories','Release'],
pageSize: 100,
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_createGrid: function(features) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: features,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'Release', dataIndex: 'Release'
},
{
text: 'Story Count', dataIndex: 'StoryCount'
},
{
text: 'User Stories', dataIndex: 'UserStories',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(userstory){
html.push('' + userstory.FormattedID + '')
});
return html.join(', ');
}
}
]
});
},
_onDataLoaded: function(store, data){
var features = [];
var pendingstories = data.length;
//debugger;
Ext.Array.each(data, function(feature) {
var release = feature.get('Release');
var f = {
FormattedID: feature.get('FormattedID'),
Name: feature.get('Name'),
Release: (release && release.Name) || 'None',
_ref: feature.get("_ref"),
StoryCount: feature.get('UserStories').Count,
UserStories: []
};
var stories = feature.getCollection('UserStories');
stories.load({
fetch: ['FormattedID'],
callback: function(records, operation, success){
Ext.Array.each(records, function(story){
var number = story.get('DirectChildrenCount');
if (number == 0) {
f.UserStories.push({_ref: story.get('_ref'),
FormattedID: story.get('FormattedID')
});}
}, this);
--pendingstories;
if (pendingstories === 0) {
this._createGrid(features);
}
},
scope: this
});
features.push(f);
}, this);
}
});
I have some problem with pie charts on ExtJS 4.1.
I load by Ajax and Json the datastore:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['status', 'data', 'data1', 'data2']
});
var store1 = Ext.create('Ext.data.JsonStore', {
model: 'MyModel',
proxy: {
type: 'ajax',
url : 'PieChartJsonServlet',
},
autoLoad: true
});
I would like to display pie charts representing:
1) data by status
2) data1 by status
3) data2 by status
To display each pie chart, I click on buttons from tbar on a panel.
When I load HTML page, the first chart (data by status) is correctly loaded and display.
My problem is after clicking on buttons from tbar, data seem to be loaded but pie chart doesn't refresh! (When I highlight slices, I display loaded data and I see data are well loaded)
My code:
Ext.require('Ext.chart.*');
Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.require('Ext.JSON.*');
Ext.onReady(function () {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['status', 'data', 'data1', 'data2']
});
var store1 = Ext.create('Ext.data.JsonStore', {
model: 'MyModel',
proxy: {
type: 'ajax',
url : 'PieChartJsonServlet',
},
autoLoad: true
});
var titlePieChart = 'Data by status',
dataToDisplay = 'data',
highlightToDisplay = ' data',
chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
items: [{
type : 'text',
text : titlePieChart,
font : '18px Arial',
width : 100,
height: 30,
x : 155,
y : 30
}],
series: [{
type: 'pie',
field: dataToDisplay,
showInLegend: true,
tips: {
trackMouse: true,
width: 180,
height: 35,
renderer: function(storeItem, item) {
var total = 0;
store1.each(function(rec) {
total += rec.get(dataToDisplay);
});
this.setTitle(storeItem.get('status') + ' : ' + storeItem.get(dataToDisplay) + highlightToDisplay + '\n(' + Math.round(storeItem.get(dataToDisplay) / total * 100) + '%)');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'status',
display: 'rotate',
font: '18px Arial',
}
}]
});
var panel1 = Ext.create('widget.panel', {
width: 600,
height: 500,
renderTo: 'chartCmp',
layout: 'fit',
tbar: [{
text: 'Data',
handler: function(button, evt) {
titlePieChart = 'Data by status',
dataToDisplay = 'data';
highlightToDisplay = ' data',
chart.refresh(); // Doesnt' work !
}
}, {
text: 'Data 1',
handler: function(button, evt) {
titlePieChart = 'Data1 by status',
dataToDisplay = 'data1';
highlightToDisplay = ' data1',
chart.refresh(); // Doesnt' work !
}
}, {
text: 'Data 2',
handler: function(button, evt) {
titlePieChart = 'Data2 by status',
dataToDisplay = 'data2';
highlightToDisplay = ' data2',
chart.refresh(); // Doesnt' work !
}
}],
items: chart
});
});
Each line "chart.refresh();" from tbar doesn't work whereas I would like a refreshed chart.
For information, I use ExtJS 4.1 on java web application.
With these lines of code for tbar, it works :
tbar: [{
text: 'Data',
handler: function(button, evt) {
titlePieChart = 'Data by status',
dataToDisplay = 'data';
chart.series.first().field = dataToDisplay,
highlightToDisplay = ' data',
chart.refresh();
}
}, {
text: 'Data 1',
handler: function(button, evt) {
titlePieChart = 'Data1 by status',
dataToDisplay = 'data1';
chart.series.first().field = dataToDisplay,
highlightToDisplay = ' data1',
chart.refresh();
}
}, {
text: 'Data 2',
handler: function(button, evt) {
titlePieChart = 'Data2 by status',
dataToDisplay = 'data2';
chart.series.first().field = dataToDisplay,
highlightToDisplay = ' data2',
chart.refresh();
}
}],