Werx Limited » extjs

SOAPjr Demo

wes — Sat, 17 Oct 2009 13:36:33 +0000

A demo of SOAPjr using PHP/Symfony and ExtJS is now available at http://dev.communitybookshelf.org/

This demo showcases these custom components:

Backend:
- pSOAPjr
- sfSOAPjrActionPlugin
Frontend
- eSOAPjr

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

Primitive OOP observer pattern with ExtJS

wes — Thu, 13 Aug 2009 16:11:45 +0000

Recently I embarked on a quest to design a framework which would help us keep track of large and complex javascript projects in easily identifiable and extendable patterns. After some thought and deliberation, we eventually settled on the observer pattern using Ext’s Ext.util.Observable object as the base object to use in responding to event broadcasts and the Ext.ux.BroadcastEvents plugin for managing global event broadcasts.

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.

Cleaning up unresponsive script errors

wes — Fri, 03 Jul 2009 18:58:13 +0000

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);

ExtJS resources

wes — Wed, 01 Jul 2009 20:20:15 +0000

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

Multi-threading in Web 2.0

wes — Wed, 10 Jun 2009 19:21:22 +0000

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.

In other words, it sucks pretty bad.

How many Mondays are in the month of…

wes — Wed, 20 May 2009 20:02:13 +0000

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;
};