Totti's Blog

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.. continue reading »

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

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

continue reading »

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
continue reading »

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

continue reading »