Ext JSJavaScript Framework

charles@rallydev.com

Basics of

(1)INTRODUCTION

What is JavaScript ? 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>

What are JavaScript Frameworks ?

Collection of reusable codes to help you code JavaScripts.

Better DOM manipulations, event handling, etc.

Prototype script.aculo

.us jQuery MooTools

WidgetsUI components like panels, grids, tabs...

YUI Dojo jQuery UI Ajax.org Ext JS Ext Core

BasicUseful methods, DOM, event, AJAX...

Why Ext JS ? Mature and

stable. Lots of widgets

available. Consistent look

and feel Good

documentation and community support.

What does Rally’s AppSDK do?Easy access to Rally data.Use the same components we

make the Rally UI out of.

(2)FUNDAMENTALS

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

CONFIG OPTIONS

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

CONFIG OPTIONS

LayoutFit, Border, Form, Accordion, Card

http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

Eventslistenerson()handler

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

btn.on('mouseover', function() { alert('Hovered!');});

(3)Records And Data

Basic Records and StoresStore 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’);

}}

});

Fetch and FiltersThe 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’

}]

(4)Component Interactions

IterationCombobox To Cardboardthis.add({

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

(5)First App