Ext.define('Ext.ux.MessageBroker', {
    extend: 'Ext.util.Observable',

    statics: {
        instance: null,
        setInstance: function(i) {
            this.instance = i;
        },
        sendMessage: function(msg, data) {
            this.fireEvent('message',{"msg":msg,"data":data});
        }
    },

    constructor: function(config){
        this.addEvents({
            "message" : true
        });

        if(config && config.listeners) this.listeners = config.listeners;

        Ext.ux.MessageBroker.superclass.constructor.call(this, config)
    }

}, function() {
    Ext.ux.MessageBroker.setInstance(new Ext.ux.MessageBroker());
});

// Sending a message:
Ext.ux.MessageBroker.sendMessage("load_stock", {"symbol":"INTC"});

// Recieving a message:
Ext.util.Observable.observe(Ext.ux.MessageBroker);
Ext.ux.MessageBroker.on('message', function(msg) {
    console.log('message fired: ',msg);
});

Share/Save

This demo showcases these custom components:

• Backend:
  • pSOAPjr
  • sfSOAPjrActionPlugin
• Frontend
  • eSOAPjr

Questions/comments? We’d love to hear from you!

Share/Save

Here is the code I came up with for common component elements:

ComponentWrapperBase = Ext.extend(Ext.util.Observable, {
	delayBuild: false,

	eventObj: {
			"buildwidget": true,
			"showwidget": true,
			"destroy": true,
			"refresh": true
		},

	globalEvents: [],

	widget: null,
	widgetCfg: null,

	build: function() {
		if (this.widgetCfg && !this.widget) {
			//console.log("buildwidget", this);
			this.widget = Ext.ComponentMgr.create(this.widgetCfg);
			this.widget.wrapper = this;
			this.fireBuildEvent();
		}
	},

	fireBuildEvent: function() {
		this.fireEvent("buildwidget", this, this.widget);
	},

	showWidget: function(locationId) {
		if (this.widget) {
			if (this.widget.xtype == "window") {
					if (locationId != null) {
						this.widget.show(locationId);
					} else {
						this.widget.show();
					}
			}
			else {

				if (locationId != null) {
					this.widget.render(locationId);
				}
				else {
					this.widget.render();
				}
			}
			this.fireEvent("showwidget", this);
		}
	},

	constructor: function(config){
		if (config) {
			if (config.widgetCfg) {
				this.widgetCfg = config.widgetCfg;
			}

			if (config.delayBuild) {
				this.delayBuild = config.delayBuild;
			}

			// Copy configured listeners into *this* object so that the base class's
			// constructor will add them.
			if (config.listeners) {
				Ext.apply(this.listeners,config.listeners);
			}

			if(config.events && Ext.isArray(config.events)) {
				for (var i=0; i
This creates a simple widget wrapped in an Observable object. You can reach the contained widget through wrapper.widget. Using the framework above, here's how you could create a simple widget.
SimpleTextField = Ext.extend(ComponentWrapperBase, {
	widgetCfg: {
		xtype: 'textfield',
		fieldLabel: 'Name'
	},
	constructor: function(config){		// Constructor is not required, but I've included
							// it to demonstrate the flexibility of this framework
		if (config) {
			Ext.apply(this,config);
		}

		this.widgetCfg.value = 'John Smith';

		SimpleTextField.superclass.constructor.call(this);
	}
});

var simpleTextField = new SimpleTextField();
// Actual component is available at simpleTextField.widget, useful for adding to other containers
That's it! If you have any questions or comments, feel free to post them below.
No related content found.
Share/Save
]]> http://werxltd.com/wp/2009/08/13/primitive-oop-with-extjs/feed/ 1  http://werxltd.com/wp/2009/07/03/cleaning-up-unresponsive-script-errors/ http://werxltd.com/wp/2009/07/03/cleaning-up-unresponsive-script-errors/#comments Fri, 03 Jul 2009 18:58:13 +0000 wes      http://werxltd.com/wp/?p=85  I recently worked on improving performance in a labor scheduling application. The app was originally designed to load all the employees at one time in one large chunk, processing and stuffing the data into various places as needed on startup. This all worked fairly well on average stores with 50-100 employee records until we discovered several stores with 100+ employee records which caused the browser to display an unresponsive script warning due to the rather heavy pre-processing algorithms.
After scouring the web for clues to help me get rid of this warning without changing settings on the browser, I found out that the only way to avoid these warnings was through a pseudo-threading pattern using setTimeout.
One of the patterns I came up with to process a sequence of commands (such as adding records to a store) one at a time while still allowing the browser time to refresh and process other commands:
var chainedTasks = [
   function() {
      console.log('first set of tasks');
   },
   function() {
      console.log('second set of tasks');
   },
   function() {
      console.log('third set of tasks');
   }
];

var currentTaskNum = 0;
var isExecuting = false;
var emptask = {var emptask = {
	scope: this,
	interval: 100,
	run: function(){
		if(currentTaskNum > chainedTasks.length) {
			Ext.TaskMgr.stop(emptask);
		}

		if (!threadIsRunning) {
			threadIsRunning = true;
			if (typeof chainedTasks[currentTaskNum] === 'function') {
				chainedTasks[currentTaskNum](currentTaskNum);
			}
			currentTaskNum++;
			threadIsRunning = false;
		}
	}
};
Ext.TaskMgr.start(emptask);
No related content found.
http://www.dojotoolkit.org/forum/support/general-support/need-suggestions-how-manage-firefox-warning-unresponsive-script
http://dev.opera.com/articles/view/efficient-javascript/?page=all
Share/Save
]]> http://werxltd.com/wp/2009/07/03/cleaning-up-unresponsive-script-errors/feed/ 0  http://werxltd.com/wp/2009/07/01/extjs-resources/ http://werxltd.com/wp/2009/07/01/extjs-resources/#comments Wed, 01 Jul 2009 20:20:15 +0000 wes    http://werxltd.com/wp/?p=78  For what it’s worth, here are some ExtJS specific resources  I’ve found helpful:
ExtJS Official Website, specifically the forum, API, and examples pages
ExtJS UX repository for plugins
Saki’s Extensions
ExtJS GUI Builder
No related content found.
Share/Save
]]> http://werxltd.com/wp/2009/07/01/extjs-resources/feed/ 0  http://werxltd.com/wp/2009/06/10/multi-threading-in-web-20/ http://werxltd.com/wp/2009/06/10/multi-threading-in-web-20/#comments Wed, 10 Jun 2009 19:21:22 +0000 wes      http://werxltd.com/wp/?p=54  I’ve been tasked with speeding up a web 2.0 application based on ExtJS 2.2.0 that contains several routines that take up quite a bit of time and, because IE6′s javascript processing engine is less than stellar, I needed to find a way to “speed things up”.
Enter Ext.TaskMgr, a helpful ExtJS object that is essentially a glorified setTimeout implementation that allows us to run tasks that don’t block execution. This means we can set our more expensive blocks of code to run later but return control back to the user in the meantime. It’s not true multi-threading, but it does allow us to make the user interface a lot more responsive and in an age when users think 5 seconds is an eternity, perception is everything.
No related content found.
In other words, it sucks pretty bad.
]]> http://werxltd.com/wp/2009/06/10/multi-threading-in-web-20/feed/ 0  http://werxltd.com/wp/2009/05/20/how-many-mondays-are-in-the-month-of/ http://werxltd.com/wp/2009/05/20/how-many-mondays-are-in-the-month-of/#comments Wed, 20 May 2009 20:02:13 +0000 wes   http://werxltd.com/wp/?p=21  I recently ran into a situation where I needed to know how many Monday’s were in a given month via javascript and figured I would make the function (which depends on Date extensions by ExtJS) for it available here in case anyone else runs into the same problem.
/*
 * This function takes a date and determines how many of each day of the week
 * are in the month.
 */
var getMonthlyDayOfWeekCount = function(sourceDate){
    var iDate = Date.parseDate(sourceDate.format('m') + '/1/' + sourceDate.format('Y'), 'm/j/Y');
    var days = [0, 0, 0, 0, 0, 0, 0];

    while (iDate.format('m') == sourceDate.format('m')) {
        days[iDate.format('w')]++;
        iDate = iDate.add(Date.DAY, 1);
    }

    return days;
};

/*
 * This function takes a date and returns an interger cotnaining the
 * occurance of this day in the month.
 *
 * Useful for when you want to know if this is the 1st or 3rd Saturday in
 * the month.
 */
var getDayInMonthCount = function(sourceDate){
    var iDate = Date.parseDate(sourceDate.format('m') + '/1/' + sourceDate.format('Y'), 'm/j/Y');
    count = 1;

    while (iDate.format('m') == sourceDate.format('m')) {
        if (iDate.format('z Y') == sourceDate.format('z Y')) {
            return count;
        }

        if (iDate.format('w') == sourceDate.format('w')) {
            count++;
        }
        iDate = iDate.add(Date.DAY, 1);
    }

    return count;
};
No related content found.
Share/Save
]]> http://werxltd.com/wp/2009/05/20/how-many-mondays-are-in-the-month-of/feed/ 0