Developing custom HTML app using Rally:
I want to present a text box and pull value from the enterd data in it. How do i access the text in a rallytextfield while creating a custom html app using App SDK ?
Make sure you use the API docs provided - you can find information about a rallytextbox here.
Specifically, there is a method called:
getValue()
That you will find in the documentation - I think that is what you are looking for.
Here is a piece of code which is causing problems on this:
How do i access the value of the datepicker, i tried the .getValue. It is not able to get the value.Please help
Ext.define('CustomApp', {
extend: 'Rally.app.App', componentCls: 'app', id: 'appid', launch: function () {
var datepickerfrom = Ext.create('Ext.Container', {
id: 'datepickerfrom',
items: [{
xtype: 'rallytextfield',
fieldLabel: 'Enter text: ',
labelWidth: 10
}],
renderTo: Ext.getBody().dom
});
this.add(datepickerfrom);
button = {
xtype: 'rallybutton',
text: 'Generate Report',
handler: function () {
console.clear();
console.log(datepickerfrom.getRawValue());
},
};
});
Related
I want to create a combobox listing all user story's formatted id.
The js is somethiing like below:
Ext.define('CustomApp', {
extend : 'Rally.app.App',
componentCls : 'app',
launch : function() {
var usComboBox = Ext.create('Ext.Container', {
items : [ {
xtype : 'rallycombobox',
storeConfig : {
autoLoad : true,
model : 'User story',
displayField:'FormattedId',
}
} ],
});
this.add(usComboBox);
},
});
First of all, the comboBox cannot show any formatted id;
Secondly, if I removed the "displayField" config, I can see list of user story names but somehow it's not always showing like that. Sometime if I refresh the page, the list may not be shown.
I tested this by changing the App.js file and view App-debug.html file in Chrome since Chrome extension terminal couldn't be installed properly in Windows 7. Is this the right way to do?
You may use filterFieldName of rallymultiobjectpicker, and fetch FormattedID. It currently does not automatically add the value in filterFieldName to the fetch.
var box = Ext.create('Ext.Container', {
items: [{
xtype: 'rallymultiobjectpicker',
modelType: 'userstory',
filterFieldName: 'FormattedID',
storeConfig: {
fetch:['FormattedID']
}
}]
});
this.add(box);
I have a simple List inside a container that I would like to see refreshed with new items when it is activated.
In my controller, I have an event for this:
onActivate: function() {
var that = this;
var store = this.getApprovalRequestsStore();
store.getProxy().setUrl('http://mobile-approvals-services.example.com/'+ Global.approvalsListUri + Approvals.app.user);
store.load({
callback: function (records, model) {
debugger;
that.getApprovalsList().refresh();
}
});
},
And in my list, I have a tpl for the items that come back from the store (verified I have items coming back from store at break point above), yet no items are shown:
Ext.define('Approvals.view.approvals.List', {
extend: 'Ext.List',
xtype: 'approvalsList',
config: {
itemId: 'ApprovalsList',
store: 'ApprovalRequests',
itemHeight: 70,
variableHeights: false,
pressedDelay: 0,
emptyText: "<div>No Approvals Found</div>",
loadingText: "Loading...",
onItemDisclosure: false,
itemTpl: '<div class="listView">Request For: {requestedFor}</div>',...
Is there something flawed in my approach?
It was a problem with the reader. Once I set totalProperty and successProperty to values being returned from the service it worked. WTHO.
I have a rallycombobox that is configured to show the Rollups in the current scope:
App.down('#associateWith').add({
xtype : 'rallycombobox',
fieldLabel : 'Dropdown',
id : 'association',
allowNoEntry : true,
storeConfig : {
autoLoad : true,
model : 'PortfolioItem/Rollup'
}
});
This app also has an addnew component that enables users to add a new PortfolioItem/Rollup - If they add a new one, then I want to refresh this combobox to have that rollup as an option as well. I was not able to find a way to refresh the combobox in the API docs, so I am doing the messy version - which involves creating and destroying the combobox quite frequently.
I tried doing a:
setStoreConfig(...);
But that did not seem to refresh the data at all. Any way to accomplish this without destroying and re-creating?
The easiest way to to this is to hook into the AddNew's create event. It will give you a record of the newly created Rollup, and from there you can place it in your ComboBox's store
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.combobox = this.add({
xtype: 'rallycombobox',
allowNoEntry: true,
storeConfig: {
autoLoad: true,
model: 'PorfolioItem/Rollup'
}
});
this.add({
xtype: 'rallyaddnew',
recordTypes: ['PortfolioItem/Rollup'],
listeners: {
create: this._onCreate,
scope: this
}
});
},
_onCreate: function(addNew, record) {
this.combobox.getStore().add(record);
}
});
I`m trying to write editable list with sencha touch,
I saw many examples but nothing did not work properly so I decided to build from scratch,
I have a list with items and on item tap my controller run the next code
showDetail: function (list, record) {
this.getMain().push({
xtype: 'vedit',
title: record.fullDetails(),
data: record.getData()
});
My "vEdit" screen is an form that should display the current tapped item data
This is the code for the edit form:
var form = Ext.define('TM.view.vEdit', {
extend: 'Ext.form.Panel',
xtype: 'vedit',
config: {
title: 'Edit task',
styleHtmlContent: true,
scrollable: 'vertical',
items: [
{
xtype: 'textfield',
name: 'title',
label: ''
},
{
xtype: 'textfield',
name: 'desc',
label: ''
}
]
}
});
I tried to load the data with the next code:
var ed = Ext.create('TM.model.mTasks', {
title: 'Ed',
desc: 'ed#sencha.com'
});
form.setRecord(ed);
and getting the next error:
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'setRecord'
NEED YOUR HELP,
Thanks!
Since you have not define a field named record in form's config, so you won't get setRecord() method.
To pass on data you may try doing this:
form.config.record = ed;
and in initialize function of view you can get it like:
var taskData = this.config.record;
var form = Ext.define('TM.view.vEdit', {
Man, you need to create new form(), because it's just a type definition.
I know you guys will be making a really nice charting tool available for 2.0 SDK soon, but until then, I'd like to use Google Charts.
In the 1.x API, you could could define html object by id, and then use getElementById() to get a reference to that item. So for example:
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
But in the new SDK, you don't have an HTML block to work with-- how would you do the following? This question is relevant for any item where you want to pin an object to a place in your html.
In the new API the app base class is simply an extension of Ext.container.Container which itself is an extension of AbstractComponent and so has the getEl() method. (Note that by adding content directly to dom nodes you lose out on the automatic layout functionality provided by Ext containers).
Here's a quick example to illustrate doing something like this though:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
}
});
In the last answer (your code snippet), you were just missing the items child of the app, which creates the chartContainer element you want to render the chart into. I think this code should work for you:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'chartContainer'
}
],
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
Here's the code. It crashes with "Uncaught TypeError: Cannot read property 'parentNode' of null" inside of "Ext.define.initComponent" initiated from "Ext.define.Rally.loadScripts". Never gets to _drawChart():
I've also added the following line to the rake script to reference the google API:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
And here's App.js:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
//Write app code here
google.load("visualization", "1.0", {packages:["corechart"]});
google.setOnLoadCallback(this._drawChart);
},
_drawChart: function() {
var chartContainer = this.down('#chartContainer').getEl().dom;
var chart = new google.visualization.BarChart(chartContainer);
var graphArray = [['Module', 'Payload Code', 'Test Code']];
chartData = google.visualization.arrayToDataTable(graphArray);
chart.draw(chartData, {width: 700, height: 500});
}
});
The first draft of the SDK 2.0 charting component is now live.
You can find out about it here.