Basically, in a vertical list of panels, AccordionLayout manages multiple Panels in an expandable accordion style such that only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.

VboxLayout, on the other hand, arranges items vertically down a Container. This layout optionally divides available vertical space between child items containing a numeric flex configuration.

From the need of one of my projects, I came up with a custom hybrid layout between Accordion and Vbox.. that allows multiple panels to be collapsed at a time but the sizes of other expanded panels are automatically resized according to the new empty space available.

This is a very practical layout when you have a long vertical panel consisting of different sub-panels. Users can selectively collapse some unused panels, and all of the other expanded panels will take up the available space accordingly.

Main configuration follows the API doc of VboxLayout.

You can check out the demo and comparison between layouts here.

Extension tested working on IE6+, FF3, Safari 4, Chrome, and Opera 10.54+ with ExtJS 3.2.1

Download the source

You’re welcome if having any feedback.

Cheers,

Totti

http://www.quirksmode.org/…/Explorer_z_index_bug.html

and here

http://therealcrisp.xs4all.nl/../IE-zindexbug.html

Basically here is the break-down of the workaround…

We have two div elements box1, nested in box3 and box2.

<div class="canvas">

		<div class="box" id="box3">
			<div class="box" id="box1">
				Box 1
			</div>
		</div>

		<div class="box" id="box2">
			Box 2
		</div>

	</div>

And we want box1 to be on top of box2 by setting z-index as the following :

.canvas {
 position: relative;
}

.box {
 width: 50px;
 height: 50px;
 position: absolute;
}

#box1 {
 top: 20px;
 left: 20px;
 background: green;
 z-index: 4000;
}

#box2 {
 top: 50px;
 left: 50px;
 background: yellow;
 z-index: 3000;
}

The above code makes box1 appear on top of box2 on all browsers except IE 6+ as positioned elements do generate a new stacking context, starting with z-index of 0.     In this case since box3 and box2 are siblings (on the same level), and box3 's z-index is less than that of box2, so  box2 and its child nodes ( on a higher stacking context ) will be always on top of box3 and its child nodes.. even if some of box3's child nodes have higher z-index than those of box2 and its child nodes  ( box1 has z-index of 4000 but is still displayed beneath box2 of z-index 3000).      
The solution here is to put box1 in a stacking context higher than that of box2 by making z-index of box3 higher than that of box2. 
#box3 {
  z-index: 30001;
}

Now box1 is on top of box2 as desired !  How about two elements nested in <td> cells of the same table like this: 
<table>
    <tr>
        <td class="td3">
             <div class="box1"></div>
        </td>
    </tr>

    <tr>
        <td>
             <div class="box2"></div>
        </td>
    </tr>
</table>

All you need to do is set the z-index of td3 higher than that of box2 to make td3 and its child nodes (including box1) stay on top of box2. 

.td3 {
    position: relative;
    z-index: 3001;
}

.box {
	width: 50px;
	height: 50px;
	position: absolute;
}

#box1 {
         z-index: 4000;
}

#box2 {
         z-index: 3000;
}

You will notice I set td3 to position:relative so that the TD cell still keeps its relative position with respect to other cells in the table.

That is for today   Feel free to share your ideas on this bug IE bug with us..

Cheers,

Totti

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

<!-- single class -->
<div class="cls3">Single</div> 

<!-- multiple classes -->
<div class="cls1 cls2 cls3">Multiple</div>

To select the later element we can use CSS class-chaining like:

.cls1.cls2.cls3 {
    /* your style */
}

However, IE6, 7, will see this as

.cls3 {
}

because .cls3 is placed last in the chain .cls1.cls2.cls3
This selector .cls3 apparently applies to both the first and second HTML elements.

A workaround to this IE bug is using parent-child CSS selector by adding additional child elements:

<div class="cls1 cls2 cls3">Multiple</div>
<!-- now becomes -->
<div class="cls1">
       <div class="cls2">
                 <div class="cls3">Multiple</div>
       </div>
</div>

And now we can select this element by

.cls1 .cls2 .cls3 {
    /* your style */
}

which is fully supported by IE 7+.

Cheers,

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

Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});  

Basically, you can implement a TreePanel or other ExtJS components like:

new Ext.tree.TreePanel({
        listeners: {
               render: function() {
                       // After the component has been rendered, disable the default browser context menu
                       Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
               },
               contextmenu: function(e) {
                       // Init your context menu
               }
        }
});

Tested working on FF 3.6, Chrome 3, Safari 4 and IE7. Opera 10 unfortunately fails.

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.