Tested working on FF3.6, IE7, IE8, Chrome 4, Safari 4, and Opera 10.

You can put the source files in ExtJS Tabs folder to test: ext-3.1.1\examples\tabs\..

Check out the live example here

Download the whole example
Download the extension code only

Extension updated to work with ExtJS 3.1.2

Cheers,

Totti

alert(window);  // object Window
alert(window.window);   // object Window
alert(window.window.window);  // object Window
alert(window.window.window === window);   // true

A fun bit about this is the window object is read-only, while the self object, also referring to the current opened window, is not.

// Try assigning window to null
window = null;
alert(window);  // object Window
window.window = null;
alert(window.window); // object Window

// Try assigning self to null
window.self = null;  // only on IE 6, 7 this will returns exception: 'Not Implemented'
alert(window.self)  // on other browsers, self now is null.
alert(window)  // object Window .

This proves that self object actually is just a reference of window. And self could be assigned to point to other objects while window remains intact.

Totti

length :
- available : both in/outside a function’s body. Could be called using : functionName.length
- is : the total number of arguments declared in the function’s signature

Below is the demo snippet showing how to use these properties:

var myFunction = function(a, b, c, d, e) {
		// total number of params declared : TRUE
		alert(myFunction.length == 5);

		// real number of arguments provided : TRUE
		alert(arguments.length == 2);

		// you can also refer to the function using its name : TRUE
		alert(myFunction.arguments.length == 2);		

// how to refer to the arguments provided ?
		alert(a === 'x' && arguments[0] === 'x');
		alert(b === 'y' && arguments[1] === 'y');
};

// myFunction is called with two arguments only
myFunction( 'x', 'y' );

// total number of params declared : TRUE
alert(myFunction.length == 5);

// undefined : FALSE
alert(myFunction.arguments == 2);

Have fun,

Totti

Totti

http://ejohn.org/apps/learn/

and also the page teaching jQuery at http://ejohn.org/apps/learn-jquery/

You could also find more of his lectures in the upcoming book called Secrets of Javascript Ninja.

Totti

Global variables are evil. Within YUI, we use only two globals: YAHOO and YAHOO_config. Everthing in YUI makes use of members within the YAHOO object hierarchy or variables that are scoped to such a member. We advise that you exercise similar discipline in your own applications, too.

Douglas Crockford has been teaching a useful singleton pattern for achieving this discipline, and I thought his pattern might be of interest to those of you building on top of YUI. Douglas calls this the “module pattern.” Here’s how it works:

1. Create a namespace object: If you’re using YUI, you can use the YAHOO.namespace() method:

YAHOO.namespace("myProject");

This assigns an empty object myProject as a member of YAHOO (but doesn’t overwrite myProject if it already exists). Now we can begin adding members to YAHOO.myProject.

2. Assign the return value of an anonymous function to your namespace object:

YAHOO.myProject.myModule = function () {
	return  {
		myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
		myPublicMethod: function () {
			YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
		}
	};

}(); // the parens here cause the anonymous function to execute and return

Note the very last line with the closing curly brace and then the parentheses () — this notation causes the anonymous function to execute immediately, returning the object containing myPublicProperty and myPublicMethod. As soon as the anonymous function returns, that returned object is addressable as YAHOO.myProject.myModule.

3. Add “private” methods and variables in the anonymous function prior to the return statement. So far, the above code hasn’t bought us any more than we could have gotten by assigning myPublicProperty and myPublicMethod directly to YAHOO.myProject.myModule. But the pattern does provide added utility when we place code before the return statement:

YAHOO.myProject.myModule = function () {

	//"private" variables:
	var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

	//"private" method:
	var myPrivateMethod = function () {
		YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
	}

	return  {
		myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
		myPublicMethod: function () {
			YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

			//Within myProject, I can access "private" vars and methods:
			YAHOO.log(myPrivateVar);
			YAHOO.log(myPrivateMethod());

			//The native scope of myPublicMethod is myProject; we can
			//access public members using "this":
			YAHOO.log(this.myPublicProperty);
		}
	};

}(); // the parens here cause the anonymous function to execute and return

In the codeblock above, we’re returning from an anonymous function an object with two members. These members are addressable from within YAHOO.myProject.myModule as this.myPublicProperty and this.myPublicMethod respectively. From outside of YAHOO.myProject.myModule, these public members are addressable as YAHOO.myProject.myModule.myPublicProperty and YAHOO.myProject.myModule.myPublicMethod.

The private variables myPrivateProperty and myPrivateMethod can only be accessed from within the anonymous function itself or from within a member of the returned object. They are preserved, despite the immediate execution and termination of the anonymous function, through the power of closure — the principle by which variables local to a function are retained after the function has returned. As long as YAHOO.myProject.myModule needs them, our two private variables will not be destroyed.

4. Do something useful with the pattern. Let’s look at a common use case for the module pattern. Suppose you have a list, some of whose list items should be draggable. The draggable items have the CSS class draggable applied to them.

<!--This script file includes all of the YUI utilities:-->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>

<ul id="myList">
	<li class="draggable">Item one.</li>
	<li>Item two.</li> <!--item two won't be draggable-->
	<li class="draggable">Item three.</li>
</ul>

<script>
YAHOO.namespace("myProject");
YAHOO.myProject.myModule = function () {

	//private shorthand references to YUI utilities:
	var yue = YAHOO.util.Event,
		yud = YAHOO.util.Dom;

	//private method:
	var getListItems = function () {

		//note that we can use other private variables here, including
		//our "yud" shorthand to YAHOO.util.Dom:
		var elList = yud.get("myList");
		var aListItems = yud.getElementsByClassName(
			"draggable", //get only items with css class "draggable"
			"li", //only return list items
			elList //restrict search to children of this element
		);
		return aListItems;
	};

	//the returned object here will become YAHOO.myProject.myModule:
	return  {

		aDragObjects: [], //a publicly accessible place to store our DD objects

		init: function () {
			//we'll defer making list items draggable until the DOM is fully loaded:
			yue.onDOMReady(this.makeLIsDraggable, this, true);
		},

		makeLIsDraggable: function () {
			var aListItems = getListItems(); //these are the elements we'll make draggable
			for (var i=0, j=aListItems.length; i<j; i++) {
				this.aDragObjects.push(new YAHOO.util.DD(aListItems[i]));
			}
		}

	};
}(); // the parens here cause the anonymous function to execute and return

//The above code has already executed, so we can access the init
//method immediately:
YAHOO.myProject.myModule.init();
</script>

This example is a simple one, and it’s deliberately verbose — if this was all we were doing, we could doubtless write it in a more compact way. However, this pattern scales well as the project becomes more complex and as its API grows. It stays out of the global namespace, provides publicly addressable API methods, and supports protected or “private” data and methods along the way.

Basically, in form submission you need to validate user input and / or prevent user from entering invalid keys. Pure Javascript implementation could be quite a headache to some folks. ExtJS now provides a regex-based validation class called, vType, which helps you to do both things mentioned above.

Demo: a simple Custom vType

You can find more examples at ExtJS 3.1 API: vType

vType.js

<pre>
Ext.onReady(function(){
	// QuickTips to display error messages next to form fields
	Ext.QuickTips.init();

	// Declare a custom VType
	Ext.apply(Ext.form.VTypes, {
                 // This function validates input text
		AlphaNum:  function(v) {
			return /^[a-z0-9]$/i.test(v);
		},
                // This is the tooltip message displayed when invalid input occurs
		AlphaNumText: 'Must be an alphanumeric word',
                // This mask filter invalid keystrokes
		AlphaNumMask: /[a-z0-9]/i
	});

	// Simple form with a text field for demo purpose
	var myForm = new Ext.FormPanel({
		width: 300,
		renderTo: Ext.getBody(),
		title: '2 secs with vType Demo',
		items: [
			{
				xtype: 'textfield',
				id: 'alphanum',
				fieldLabel: 'AlphaNum',
				vtype: 'AlphaNum'
			}
		],
		buttons: [
			{
				text: 'Submit',
				handler: function() {
					// myForm.getForm().submit();
					Ext.Msg.alert('Action', 'Form submitted');
				}
			}, {
				text: 'Reset',
				handler: function() {
					myForm.getForm().reset();
				}
			}
		]
	});
});
</pre>

vType.html

<html>
<head>
	<title>ExtJS - VTypes</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
	<script src="../adapter/ext/ext-base.js" type="text/javascript"></script>
	<script src="../ext-all.js" type="text/javascript"></script>

	<script src="js/vtype.js" type="text/javascript"></script>
</head>

<body>
</body>
</html>

You need to know a little bit of javascript regular expression in order to configure vType as you want.

Happy coding,

Totti

var str = ” — This is %$# ‘\’ a test string ha    hee hhhoo    1   22 33  “;
str = str.replace(/\s/g, ”);
// str is now –Thisis%$#”ateststringhaheehhhoo12233

ExtJs people tend to just focus on the grid-to-grid, grid-to-listview.. sort of drag and drop, and forgot to include in their documentation a typical example of ‘drag and drop’ of a simple element like a button on a panel. Below is my implementation:

ExtJS: 3.x

Demo: Drag and Drop a button

index.html

<html>
<head>
	<title>ExtJS - Drag n' Drop Demo</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
	<script src="js/ext-base.js" type="text/javascript"></script>
	<script src="js/ext-all.js" type="text/javascript"></script>

	<script src="js/dd_button.js" type="text/javascript"></script>
</head>

<body>
	<div id="canvas">
	</div>
</body>
</html>

dd_button.js

Ext.onReady(function(){

	// Make the button Draggable inside  tag
	var initDragZone = function(v) {

		v.dragZone = new Ext.dd.DragZone(Ext.getBody(), {
			getDragData: function(e) {
				// .button-draggable == class of the button you want to drag around
				if(sourceEl = e.getTarget('.button-draggable')) {
					d = sourceEl.cloneNode(true);
					d.id = Ext.id();
					return v.dragData = {
						sourceEl: sourceEl,
						repairXY: Ext.fly(sourceEl).getXY(),
						ddel: d
					}
				}
			},

			onDrag: function(e) {
				// !Important: manually fix the default position of Ext-generated proxy element
				// Uncomment these line to see the Ext issue
				var proxy = Ext.DomQuery.select('*', this.getDragEl());
				proxy[2].style.position = '';
			},

			getRepairXY: function() {
				return this.dragData.repairXY;
			}
		});
	};		

        // Make the panel droppable to the button
	var initDropZone = function(g) {
		g.dropZone = new Ext.dd.DropZone(g.body, {

			getTargetFromEvent: function(e) {
				return e.getTarget('#canvas');
			},

			onNodeOver : function(target, dd, e, data){
				return Ext.dd.DropZone.prototype.dropAllowed;
			},

			onNodeDrop : function(target, dd, e, data) {
				// !Important: We assign the dragged element to be set to new drop position
				if(dragEl = Ext.get(data.sourceEl)) {
					dragEl.setXY([e.getPageX(),e.getPageY()]);
				}

				return true;
			}	

		});
	};

        // Make the Panel Droppable
	var myPanel = new Ext.Panel({
		width: 500,
		height: 300,
		renderTo: 'canvas',
		bodyStyle: { background: 'yellow' },
		html: 'Drop your button here',
		listeners: {
			render: initDropZone
		}
	});		

	var myButton = new Ext.Button({
		width: 30,
		height: 20,
		cls: 'button-draggable',
		text: "Drag me",
		renderTo: Ext.getBody(),
		listeners: {
			render: initDragZone
		}
	});
});

The important point of this implementation is the onDrag method

onDrag: function(e) {
				// !Important: manually fix the default position of Ext-generated proxy element
				// Uncomment these line to see the Ext issue
				var proxy = Ext.DomQuery.select('*', this.getDragEl());
				proxy[2].style.position = '';
			},

Try removing the function onDrag above, you’ll see this positioning issue:

Have fun,

Totti