The document discusses JavaScript and some JavaScript libraries. It provides information on: - What client-side JavaScript is and how it can manipulate page elements and handle events - Popular JavaScript libraries/frameworks like jQuery, MooTools, and Ext JS that provide reusable codes for DOM manipulation and events - How the Ext JS framework in particular provides many interactive widgets, is mature and stable, and has good documentation - How the Rally SDK can be used with Ext JS to easily access and display Rally data using Rally components - Examples of basic usage of Ext JS including creating buttons, adding event listeners, making REST requests to Rally, and filtering and displaying Rally data in a cardboard widget.

1. charles@rallydev.com

3.  Client script, ran at web browser
 Make web sites interactive and
programmable
 Manipulate page elements
 DOM manipulations
 Events
<script type="text/javascript">
alert("Hello");
</script>

4.  Collection of reusable codes to
help you code JavaScripts.
 Better DOM manipulations,
event handling, etc.

5.  Prototype  YUI
 script.aculo.us  Dojo
 jQuery  jQuery UI
 MooTools  Ajax.org
 Ext Core  Ext JS

6.  Mature and stable.
 Lots of widgets
available.
 Consistent look and
feel
 Good
documentation and
community
support.

7.  Easy access to Rally data.
 Use the same components we make the
Rally UI out of.

9. Buttons, ComboBox, DateField,
Slider, Quicktip, Tree, ListView...
var btn = new Ext.Button({
text: ‘Click me!‘,
width: 200,
height: 100
});

10. Cardboard, Tree, RichTextDialog,
Reports, Charts...
var board= this.add({
xtype:”rallycardboard”,
attribute:’ScheduleState’
});

11. Fit, Border,
Form, Accordion,
Card
http://www.extjs.com/deploy/dev/examples/
layout-browser/layout-browser.html

12. var btn = new Ext.Button({
text: 'Click me!',
width: 200,
height: 100,
listeners: {
listeners 'click': function() {
on() alert('Clicked!');
}
handler }
});
btn.on('mouseover', function() {
alert('Hovered!');
});

14. Basic Records and Stores
Store are based on a model, and communicate with the rally api based on that
model to generate records.
Records can be used to access the attributes of an artifact.
Use event listeners to invoke store actions once the store actions have
completed.
Use the get method on a record to retrieve attribute data.
Ext.create(‘Rally.data.WsapiDataStore’, {
model: ‘User Story’,
fetch: true,
listeners: {
load: function(store, records, success) {
records[0].get(‘Schedule State’);
}
}
});

15. Fetch and Filters
The config for the data store supports optional settings for fetching specific fields,
sorting, and filtering.
fetch: [‘Name’, ‘State’]
filters: [
{
property: ‘State’,
operator: ‘=‘,
value: ‘Open’
}
]
sorters: [
{
property: ‘Severity’,
direction: ‘DESC’
}
]

17. IterationCombobox To Cardboard
this.add({
xtype: ‘rallyiterationcombobox’,
listeners: {
‘select’: function(combobox) {
this.add({
xtype: ’rallycardboard’,
model: ’defect’,
storeConfig : {
filters: [
{
property : 'Iteration',
value : combobox.getRecord().get('_ref')
}
]
}
});
},
scope: this
}
});