Here we talk about Ext.extend and how it can be used to your advantage to ‘extend’ or ‘override’ methods or properties from one class to another.

This page serves as a test bed for my future venture in sketch casting.

In response to this thread at the Ext forums, I initially created a simple override (Click here to see it action) to the Ext Border Layout. The solution was a quick one hour deal with no magic or gloss. There was some posts soon there after that requested more functionality for this override. These requests include:

• images for the east/west regions (for CBC)
• ability to re-use the original title
• the freedom to insert what ever element object or HTML fragment the end developer desired
• change from override to extension.

So, I’ve rolled up all of these requests into one Ext.ux.TDGi.BorderLayout class. This solution provides all of the freedom flexibility that was requested.

Click here to view a working example of this extension.  Click here to download the zip file of the full source and example.
Simple Example:

Actual Example Source:

For those us who are familiar with the ext combo box examples, you may be able to recall the awesome forum-search code. I wanted similar functionality, but needed to change some things to make it fit for this site. I found that the horizontal space required for the tool bar was too much for my blog use. Also, bottom placement of the paging tool bar, which seems to be a favorite among many Ext developers, is not something I particularly care for. From my observation, it requires the user to move the mouse too far downward to click the next/previous buttons, thus reducing UI efficiency.

So, I took a combination of the forum-search.html example and applied it to my previous work for styling results of a combo box using XTemplates.

(Ext forum-search.html example illustration)

So in about an hour or two, I came up with something that fits my taste, search bar size and is easier to read. I still need to apply custom CSS to the mouseover for the search results and the text area focus. This code will soon make it’s way to my wife’s site, bebe kisses as well as a few customers.

Click here to download the zip file

Example code to create the comboBox

I got the idea for this when I was working with IBM’s net cool  Omnibus.  The users are allowed a set of ‘views’ to automatically show a set of columns.

Synopsis:

This override gives you the ability to have preset ‘filters’ called ‘columnViews’. Also, I added a ’showAll’ button above the columns checkboxes. I have not tested this with anything other than the generic gridPanel.

Example: http://tdg-i.com/js/examples/ext/dataGrid/colview/

View in action: Here (screencast)

Example on how to use this override: