Totti's Blog » Ext JS

ExtJS Accordion-Vbox custom hybrid layout

admin — Sat, 21 Aug 2010 11:40:34 +0000

ExtJs has two well-known layouts called Accordion and Vbox.

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

ExtJS Vertical TabPanel example

admin — Wed, 31 Mar 2010 02:16:28 +0000

Currently, ExtJS 3.1.1 doesn’t support Vertical TabPanel. Here is my simple custom Vertical TabPanel ux class. Currently, it supports the same set of features as Ext.Tabpanel except advanced auto tab-scrolling feature. Default position is “left”.

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

ExtJS : How to disable browser context menu

admin — Wed, 10 Feb 2010 17:06:07 +0000

This is a quick solution to disabling browser default context menu when right-clicking in ExtJS.


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.

ExtJS : 2 secs with custom vType

admin — Tue, 22 Dec 2009 17:54:59 +0000

Following another question on ExtJS forum, I’ve created a sample of how to use vType for ExtJS newbies.

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

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();
				}
			}
		]
	});
});

vType.html



	ExtJS - VTypes

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

Happy coding,

Totti

Ext JS Examples: Drag n’ Drop buttons on a panel

admin — Fri, 18 Dec 2009 20:17:24 +0000

This blog entry was written following a question of an user in ExtJS forum: How to drag n’ drop a button on a panel ?

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



	ExtJS - Drag n' Drop Demo

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