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

Sencha extjs4 learning


Viewport is a  specialized container representing the viewable application area,  to simply make a single child item occupy all available space, use fit layout, To display one “active” item at full size from a choice of several child items, use card layout.

Components may be added to a Container through the items config option at the time the Container is created, or they may be added dynamically via the add method.

* Base class of any component is Ext.container.Container -GUIDE working with LAYOUTS/CONTAINERS

* Can specify child items of a Container, or dynamically adding Components to a Container

* All Components are registered with the Ext.ComponentManager on construction

* Components created with an id may be accessed globally using Ext.getCmp

* The xtype configuration option can be used to optimize Component creation and rendering. It serves as a shortcut to the full componet name.

* You can define your own xtype on a custom component by specifying the alias config option with a prefix of widget.

* a  layout  default Auto scheme Certain layout managers allow dynamic addition of child components. Those that do include Ext.layout.container.CardExt.layout.container.Anchor,Ext.layout.container.VBoxExt.layout.container.HBox, and Ext.layout.container.Table.

* Ext.panel.Panel  extend a Container have properties like closeable To enable the close tool to simply hide a Panel for later re-use, configure the Panel withcloseAction: 'hide'.

* Instead of using assigned ids, use the itemId config, and ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying!/api/Ext.ComponentQuery

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