View Full Version : Component Communication Structure

21 Jul 2009, 2:48 AM
Hi Guys

I'm looking for some guidance and some tips on best practice when it comes to structuring my app and how its components communicate with each other. Specifically where to place and how to organise code so it doesn't turn into a maintenance nightmare!

My scenario is this...

I have a BorderLayout - Navigation in the West; TabPanel in the Center. As per Saki's tutorial and examples (http://examples.extjs.eu/?ex=compcomm) the events are hooked up within the ViewPort that has the BorderLayout, this works great and tabs are created as i want.

The problem now is that i want to have buttons within the newly created tabs (Grid toolbar buttons in this case) to create new tabs.

Firstly, am i correct in wanting to place this event code within the outer ViewPort object? If so, how do i structure this as there are, say, 6 main tabs that will be opened, each with 5 actions, and these 5 actions may have several more - this adds up to a lot of code that has to be contained in one object and sifted through to make changes.

Is there a better way of doing it? Or at least a way of separating these function definitions into separate files based on their modules so it is at least a bit more organised?

I know this is quite vague and a bit confusing but any pointers would be greatly appreciated! If there's anything that i can clarify then let me know.


21 Jul 2009, 4:45 AM
Have you spotted Sakis' other tutorials
He has a three parter on this, starting with writing a big application part 1 (http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/)
This is a good area to get started

In the learning centre there is also some great tutorials (http://extjs.com/learn/Tutorials) under "Application design".

21 Jul 2009, 4:52 AM
Hi Andy

Yea ive read over these tutorials but didn't really find the answers i was looking for. Ill have another closer look though and see if anything jumps out at me!


EDIT: Ive looked through those tutorials again and can't find any answer to my question. Can anyone provide any "This is how I do It" type explanations?

22 Jul 2009, 2:44 AM
Does anyone have any other ideas/thoughts?


22 Jul 2009, 5:45 AM
I usually start with creating an appplication level singleton which includes an initiation method for most of my extended components.

Entry function looks like this


myApp.widget = function(){

var private = "data";

return {
init : function(){

var searchList = new Ext.ux.Search({renderTo:'messages', data:myData});


Ext.onReady(myApp.widget.init, myApp.widget);Extended components I have created can look like the code below
Great example of this is the tutorial (http://extjs.com/learn/Tutorial:Creating_new_UI_controls)written by Animal and is expanded on by MJ in this post (http://extjs.com/forum/showthread.php?p=259901#post259901)

/// <reference path="../ExtJS/ext-base-debug.js" />
/// <reference path="../ExtJS/ext-all-debug.js" />

* This will create a search class
* This will display a label,formField, button, and ajax loader gif
* It will send the values of the form field to a server using Ajax


Ext.ux.Search = Ext.extend(Ext.Container,{
URL : 'myURL'
,layout : 'column'
,labelText : 'Label'
,buttonText : 'click me'
,initComponent : function(){

Ext.apply(this, this.config);

this.label = new Ext.BoxComponent({
autoEl : {
tag : 'div'
,cls : 'label'
,html : this.labelText
,style : {'margin':'8px'}

this.field = new Ext.form.TextField({
width : 150
,height : 34
,id : 'custRef'
,cls : 'custRefBox'

this.ajaxLoader = new Ext.BoxComponent({
autoEl : {
tag : 'div'
,id : 'loader'

this.searchButton = new Ext.Button({
width : 60,
height : 30,
text : this.buttonText,
style : {'margin':'2px 10px 0px 20px'},
listeners : {
click: this.onButtonClick,
scope: this


this.items = [this.label, this.field, this.searchButton, this.ajaxLoader];

,onButtonClick : function(){
var loader = Ext.get('loader');

url : this.URL
, method : 'post'
, params : {'custRef': this.field.getValue()}

// , jsonData: { "custRef": Ext.getCmp('extCustRef').getValue()}//for FF
// , headers: { 'Content-Type': 'application/json;charset=utf-8' }

, success : function(response, options) {

var msgData = Ext.decode(response.responseText).data;

//Ext.getCmp(targetDiv + 'panel').body.update(response.responseText);
, failure : function(response, options) {
// console.log(response.responseText);

Ext.reg('search', Ext.ux.Search);

23 Jul 2009, 1:35 AM
I just came across this tutorial (http://extjs.com/learn/Tutorial:RelayEvents)on relay events and I was thinking you may not have read this but it is very good at showing one way of communicating between different components and how you would structure an application