A Techno Blog, mainly about Java

MVC and more with extjs

Every framework/toolkit has their example app. GWT has its Stockwatcher. The Sencha EXTJS  toolkit has the Pandora.

After downloading the code for this, it doesn’t work out of the box until you add the following line of code to app.js:


The app.js file defines yout stores, controllers, and

Ext.application({name: ‘Pandora’,

autoCreateViewport: true,

models: [‘Station’, ‘Song’],
stores: [‘Stations’, ‘RecentSongs’, ‘SearchResults’],
controllers: [‘Station’, ‘Song’]

Lets start by looking at ViewPort file in view package:

Ext.define(‘Pandora.view.Viewport’, {
extend: ‘Ext.container.Viewport’,
layout: ‘fit’,

It uses the dock item – Any components may be docked to any side of a panel via the new dockedItems config property, and docked items must be configured with a dock property to specify which border to dock to. This allows for amazingly flexible Panel layouts now :

initComponent: function() {
this.items = {
dockedItems: [{
dock: ‘top’,
xtype: ‘toolbar’,
height: 80,
items: [{
xtype: ‘newstation’,
width: 150
}, {
xtype: ‘songcontrols’,
flex: 1
}, {
xtype: ‘component’,
html: ‘Pandora<br>Internet Radio’

From left to right,

layout: {
type: ‘hbox’,
align: ‘stretch’

The station list and ad  is in west region,

items: [{
width: 250,
xtype: ‘panel’,
id: ‘west-region’,
layout: {
type: ‘vbox’,
align: ‘stretch’
items: [{
xtype: ‘stationslist’,
flex: 1
}, {
html: ‘Ad’,
height: 250,
xtype: ‘panel’

followed by the container in middle:

xtype: ‘container’,
flex: 1,
layout: {
type: ‘vbox’,
align: ‘stretch’
items: [{
xtype: ‘recentlyplayedscroller’,
height: 250
}, {
xtype: ‘songinfo’,
flex: 1

Select a station, Station.js has:

stationslist’: {
selectionchange: this.onStationSelect

onStationSelect: function(selModel, selection) {
// Fire an application wide event
this.application.fireEvent(‘stationstart’, selection[0]);

In Song.js, wired up for the event as follows:

// Listen for an application wide event
stationstart: this.onStationStart,
scope: this

Thus calls onStationStart which uses store to do a proxy call, but has call back to OnRecentSongsLoad:

onStationStart: function(station) {
var store = this.getRecentSongsStore();
callback: this.onRecentSongsLoad,
params: {
station: station.get(‘id’)
scope: this

Next, we go into call back after proxy call:

onRecentSongsLoad: function(songs, request) {
var store = this.getRecentSongsStore(),
selModel = this.getRecentlyPlayedScroller().getSelectionModel();
// The data should already be filtered on the serverside but since we
// are loading static data we need to do this after we loaded all the data
store.filter(‘station’, request.params.station);
store.sort(‘played_date’, ‘ASC’);;

It hits the which selModel is equivalent to


We have an event in Song.js that says invoke OnSelect method:

‘recentlyplayedscroller’: {
selectionchange: this.onSongSelect

In OnSelect method in Song.js tells us to go update SongInfo:

 onSongSelect: function(selModel, selection) {

SongInfo update method:

update: function(record) {
var data = record ? : {};

However, this MVC  app example  for mobile Sencha is great.

Create your first EXTJS Object

What is a Store  along with a Store/Proxy –

Model with a validator

Model grid example


Reference your view anywhere in MVC

Revisit MVC

Treegrid in EXTJS


Sample, Sample

March 30, 2012 Posted by | Uncategorized | | Leave a comment