Ext Designer allows you to rapidly assemble your application’s visual structure and immediately export your code as JavaScript classes or JSON. It can even be used by business managers and non-programmers to create a prototype, which can then be enhanced by developers.

If you would like to know more features about this awesome EXT Designer Desktop application click on this link – learn more, and if you want to download the same – click here.

You can either directly browse to TechVideoBytes (or) the option is available from this website as well. I have included an option, where you can easily navigate to various options and can view your favorite video through the “Video” option provided at the most menu in this website. For more information you can view the screen-shot below:

TechVideoBytes

Below are the screen shots of the same:

New Look of TechVideoBytes home page

TechVideoBytes - Video Page

Please do Bookmark this as your favorite, and please do let me know your feedback on the same through the comment option provided.

Below is the simple snippet which allows us to show or hide the Ext.Window panel, on button or link click it will show the Window panel and on button or link click it hides the Window panel accordingly, the respective Window is a modal Window. This is a simple and basic snippet which all beginners can understand easily.

Preview / Download:

If you would like to see the working example, please do click here. And if you would like to download the snippet, click here

HTML Code

1
2
3
4
5
6

<div id="divWindowId" class="x-hidden" style="padding:10px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a vestibulum sem. In a elit ipsum, at cursus enim. Nullam non dui tellus, vitae vestibulum tortor. Aliquam gravida tellus lorem, quis consectetur quam. Donec mollis auctor nunc eget scelerisque.</p>
<p>Vivamus dignissim diam in ligula semper vestibulum. Aenean luctus nisi in metus ultrices eu congue odio sodales. Aenean volutpat viverra est, at feugiat libero commodo ut. Maecenas at quam eget libero feugiat ullamcorper quis placerat ligula. Aliquam et tortor vitae enim viverra faucibus.</p>
	    <input type="button" value="Close" onClick="hideWindow();"/>
<br/>
</div>

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script language="javascript">
var winPanel = Ext.getCmp('panelWindowId');
if(!winPanel){
	winPanel = new Ext.Window({
	title: 'Sample Window', //Title of the Window 
	id: 'panelWindowId', //ID of the Window Panel
	autoHeight: true, //Height of the Window will be auto
	width:300, //Width of the Window
	resizable: false, //Resize of the Window, if false - it cannot be resized
	closable: false, //Hide close button of the Window
	modal: true, //When modal:true it make the window modal and mask everything behind it when displayed
	contentEl: 'divWindowId' //ID of the respective 'div'
	});
}
 
function showWindow()
{ 
	winPanel.show(); 
	//show method has got three optional parameters like animateTarget, callback, Object scope
}
 
function hideWindow()
{ 
	Ext.getCmp('panelWindowId').hide(); 
	//Even this hide methof has got same three optional parameters like animateTarget, callback, Object scope
	//getCmp method is to retrieve the reference to the component
}
</script>

Preview / Download:

If you would like to see the working example, please do click here. And if you would like to download the snippet, click here

Date Ranging is simple using ExtJS DateField. Yes! When I was working for one of my project, In one of my form I got to include Date Range functionality. When I was searching for this functionality, I got an answer from ExtJS forums, I followed one thread and got the answer. Here is the respective thread, which I was talking about. – problem with custom VTypes – daterange, if you drill down on the same page, you can view a link which depicts about the advance vtype by Brian. So, you can grab the latest version of advance vtypes here – vtypes

Preview | Download

Code Courtesy for vtypes – ExtJS and Brian

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);
 
        if(!date){
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        } 
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

Below is the required example:

1
2
3
4
5
6
7
8
9

<div>
  <div style="float:left;"><strong>From</strong><br />
    <div id="fromdate"></div>
  </div>
  <div style="float:left; padding-left:20px;"><strong>To</strong><br />
    <div id="todate"></div>
  </div>
  <div style="clear:both"></div>
</div>

Respective ExtJS JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<script language="javascript">
// Add the additional 'advanced' VTypes -- [Begin]
Ext.apply(Ext.form.VTypes, {
	daterange : function(val, field) {
		var date = field.parseDate(val);
 
		if(!date){
			return;
		}
		if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
			var start = Ext.getCmp(field.startDateField);
			start.setMaxValue(date);
			start.validate();
			this.dateRangeMax = date;
		} 
		else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
			var end = Ext.getCmp(field.endDateField);
			end.setMinValue(date);
			end.validate();
			this.dateRangeMin = date;
		}
		/*
		 * Always return true since we're only using this vtype to set the
		 * min/max allowed values (these are tested for after the vtype test)
		 */
		return true;
	}
});
// Add the additional 'advanced' VTypes -- [End]
 
dateRangeFunc();
function dateRangeFunc()
	{
		// Date picker				
		var fromdate = new Ext.form.DateField({
			format: 'Y-M-d', //YYYY-MMM-DD
			fieldLabel: '',
			id: 'startdt',
			name: 'startdt',
			width:140,
			allowBlank:false,
			vtype: 'daterange',
            endDateField: 'enddt'// id of the 'To' date field
		});
 
		var todate = new Ext.form.DateField({
			format: 'Y-M-d', //YYYY-MMM-DD
			fieldLabel: '',
			id: 'enddt',
			name: 'enddt',
			width:140,
			allowBlank:false,
			vtype: 'daterange',
            startDateField: 'startdt'// id of the 'From' date field
		});
 
		fromdate.render('fromdate');
		todate.render('todate');
} //dateRangeFunc() close
</script>

Below is the working example for the same:

Preview – Date Range using ExtJS Date Field

Download:

Download – Date Range using ExtJS Date Field

When I was working on Ext JS Tab Panels, I was strucked at one position like, let me explain you the scenario: I am using ‘autoLoad‘ for loading an HTML page using AJAX concept, in one of my html page I have used some JavaScript, which needs to be initialized on tab activate (this is my requirement). For evaluating I have used ‘scripts:ture‘, I thought this will do my Job, when I executed respective page, it has worked fine for the first time, when I navigate to other tabs and came back to the tab panel which has got ‘scripts:ture‘ the respective JavaScript code is not initializing. This has disappointed me a lot since I need that functionality. For this to achieve we have to use refresh() method through getUpdater().

In Two ways we can achieve this one, that is purely depending on your requirement.

• First method would be, add a ‘listener’ and to the respective ‘tabchange’ event write a function which does your job.
• Second method would be, adding a ‘listener’ to the respective tab panel

Live Preview | Download

HTML Code

1
2
3

<h1>How To: Make Tabs Reload and Evaluate Scripts</h1>
<!-- container for the existing markup tabs -->
<div id="renderTabs"></div>

First Method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    // First Method
    var ajaxtabPanels = new Ext.TabPanel({
        renderTo: 'renderTabs',
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
		listeners: {
		tabchange: function(tabPanel,newTab){
			 var thisObj = newTab.getUpdater();
			 if(thisObj) thisObj.refresh();
		  }
	    },
        items:[{
                title: 'Ajax Tab 1 - Simple Page without JS Code',
                autoLoad:'ajaxtab1.html' // Simple Page without JavaScript Code
            },{
                title: 'Ajax Tab 2 - Page with JavaScript Code',
                autoLoad:{url: 'ajaxtab2.html', scripts:true} //Simple Page with JavaScript Code
            },{
                title: 'Ajax Tab 3 Disabled',
                disabled:true
            }
        ]
    });

Second Method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

	// Second Method
    var ajaxtabPanels = new Ext.TabPanel({
        renderTo: 'renderTabs',
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Ajax Tab 1 - Simple Page without JS Code',
                autoLoad:'ajaxtab1.html' // Simple Page without JavaScript Code
            },{
                title: 'Ajax Tab 2 - Page with JavaScript Code',
                autoLoad:{url: 'ajaxtab2.html', scripts:true}, //Simple Page with JavaScript Code
				listeners:{
					activate : function(tabpanel){
						tabpanel.getUpdater().refresh();
					}
				}
            },{
                title: 'Ajax Tab 3 Disabled',
                disabled:true
            }
        ]
    });

Live Preview | Download

This respective code has helped me a lot, for this I would like to thank ExtJS Team for giving me a valuable answer and for helping me as well.

This valuable article helps you in implementing interactive Web Application / Web Portal. This includes Manual, Carousel, Lightbox, Menu, JSONP and Simple Tabs.

Vote of Thanks

I would like to thank Ext Core Team members for introducing awesome Ext JS to this Web World. Since, it is giving life to each and every developer in this Web World and it is a nice environment to learn some good things in Life. Thanks a lot friends…..

Ext Core 3.0 Beta Released

There was a good blog post by Tommy on 04 April 2009, regarding Ext Core 3.0 Beta Release, the Ext Team has announced the launch of Ext Core 3.0 to the World of Web. You can download the same from this link – http://extjs.com/products/extcore/download.php

Ext Core provides a cross-browser consistent API for performing the most common tasks in JavaScript development for web pages.

This Ext Core provides cross-browser abstractions for DOM manipulation and traversal, CSS management, Event handling, Dimensions and Sizing, AJAX and JSON Support and Animations. And even this includes most used popular utilities from Ext JS like Classical Inheritance Class System, Observable Class, Markup generation and Templating, Timed code execution, URL encoding and decoding.

Examples using Ext Core

As I have stated above, Ext Team has showcased some of useful and awesome interactive examples which can be used in your Web Pages very extensively. These includes Manual, Carousel, Lightbox, Menu, JSONP and Simple Tabs.

Manual

Carousel

Lightbox

Menu

JSONP

Simple Tabs

Once again, I would like to thank Ext Team for this effort… You guys! Rocks! Cheers!

Mostly jQuery, ExtJS, Mootools, YUI are used in these examples. Choose your choice of Slider and implement it in your project accordingly. I would like to suggest that those who have good hands on knowledge on the above mentioned frameworks / APIs can handle it very easily. Even the respective list will also help beginners who wanted to know on how these sliders are worked and how can it be customized accordingly.

Ext Slider – ExtJS

Website: extjs.com
Preview: click here

Developing an accessible slider

WebSite: filamentgroup.com
Preview: Click here
Description: This slider is made up of non-semantic markup that is divs and spans, requires advanced CSS for positioning, for background images and JavaScript to work properly. If you would like to know more about the same, then click here

Yahoo! UI Library: Slider

Website: developer.yahoo.com
Preview: Example Sliders
Description:

The Slider component is a UI control that enables the user to adjust values in a finite range along one or two axes. Typically, the Slider control is used in a web application as a rich, visual replacement for an input box that takes a number as input. The Slider control can also easily accommodate a second dimension, providing x,y output for a selection point chosen from a rectangular region.

Click here to know more about this Slider.

Slider Control examples includes Basic Vertical Slider, Horizontal Slider with Tick Marks, RBG Slider Control, Bottom to top Vertical Slider, Horizontal Slider with two thumbs, Dual-thumb Slider with range highlight

DHTML Widget : Inline Range Slider

Website: hedgerwow.com

DHTML Slider

Website: DHTML Slider
Description: It’s designed with a combination of (X)HTML, Cascading Style Sheets (CSS) and JavaScript. Read More…

UI/Slider – jQuery

Website: docs.jquery.com

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

Banner slider – Mootools 1.2

Website: php-help.ro

Hope this article to improve your skills in JavaScript and on latest JavaScript API’s. Please let me know your feedback on the collection and please do post if you come across more widgets like this

Before looking at the below code just download the respective Ext JS 2.2 SDK on your desktop and just download the below tutorial and save it to this location: ExtJS2.2\examples\layout this is because I have not changed the respective relative paths.

Live Preview | Download

HTML Code:

<title id="page-title">OnClick of a link open respective Accordion Panel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
</style>

JavaScript Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<script type="text/javascript">
		Ext.onReady(function() {
			var win = new Ext.Window({
				renderTo: document.body,
				title:Ext.get('page-title').dom.innerHTML,
				width:450,
				height:380,
				plain:true,
				layout:'accordion',
				border:false,
				closable:false,
				items:[{
					title:'Tech Video Bytes',
					id:'techvideopanel',
					bodyStyle:'padding:10px',
					html:'<p>Want to explore your choice of video from all over world at once place! then what are you waiting for, just click, explore and learn.. <a href="http://www.developersnippets.com/techvideobytes" title="Tech Video Bytes">Tech Video Bytes</a></p><br/><p>Through videos you can Learn Photoshop, Flash, Adobe AIR, ExtJS, jQuery, Ajax, Dojo, HTML, CSS, JavaScript, XML, Accessibility, Database, DWR, Gears, GWT, Java, JSON, MooTools, Office, Perl, PHP, Programming, Prototype, Scriptaculous and more...</p>'
				},{
					title:'Developer Snippets',
					id:'devpanel',
					bodyStyle:'padding:10px',
					html:'<p>Here is the place where you can learn Photoshop, Flash, Adobe AIR, ExtJS, jQuery, Ajax, Dojo, HTML, CSS, JavaScript, XML, Accessibility, Database, DWR, Gears, GWT, Java, JSON, MooTools, Office, Perl, PHP, Programming, Prototype, Scriptaculous and more.... at <a href="http://www.developersnippets.com" title="Developer Snippets">Developer Snippets</a></p><br/><p>As the site name depicts, this site is fully related to developers who are starting their career and who want to develop there career in developing some good innovative things. This site not only posts about present technologies and even posts some past development technologies. I am striving hard to give up something useful info to the developers who want to learn online without going to the outside world, the developers can learn some innovative things by sitting and browsing through this site.</p><br/><p>In the long way run, I will deliver the best to the developers who really wish to surge ahead in life on their own without any support from others. So folks rock up your life with your own thoughts and ideas. I look forward to seeing a change in everybody’s life in the years to come.</p>'
				},{
					title:'JavaScript',
					id:'javascriptpanel',
					bodyStyle:'padding:10px',
					html:'JavaScript loveable language'
				},{
					title:'CSS Styles',
					id:'csspanel',
					bodyStyle:'padding:10px',
					html:'Style'
				}]
			});
win.show();
 
//adding an event listener to a ahref tag			
Ext.EventManager.addListener("devsnippets", 'click', function(){
	Ext.getCmp('devpanel').expand();
}, this, { preventDefault: true } );
 
//adding an event listener to a ahref tag			
Ext.EventManager.addListener("techvideo", 'click', function(){
	Ext.getCmp('techvideopanel').expand();
}, this, { preventDefault: true } );
 
});// end of function onready
</script>

Place the below HTML code in Body Tag:

1

<div style="margin-top:100px; text-align:center;"><a href="#" id="devsnippets">Developer Snippets</a> | <a href="#" id="techvideo">Tech Video Bytes</a></div>

Updated Code on 2-Dec-2009:
Viewers, if there are more than one link, then firstly add similar ‘class’ to all the respective links, like earlier I have not added the ‘class’ attribute to the respective links. Below is the HTML code for the same

1

<div style="margin-top:100px; text-align:center;"><a href="#" id="devsnippets" class="ahreflinks">Developer Snippets</a> | <a href="#" id="techvideo" class="ahreflinks">Tech Video Bytes</a></div>

And I have changed the id’s of ‘devpanel’ to ‘devsnippetspanel’ in the JavaScript Code, then in the place of adding Listeners for each link, you can replace the same with the below code:

1
2
3

Ext.select('.ahreflinks').on('click', function(e) {
    Ext.getCmp(e.target.id+"panel").expand();
});

I have updated the respective code in the download and preview versions, please do have a look at it.

Live Preview | Download

The above code helps us a lot in the case of performance. And I would like to say thanks to ‘Claude’ for his valuable comment.

OnClick of a link open respective Accordion Panel

Live Preview | Download

Enjoy Coding and Enjoy Holidays!

Before looking at the below code just download the respective Ext JS 2.2 SDK on your desktop and just download the below tutorial and save it to this location: ExtJS2.2\examples\panel this is because I have not changed the respective relative paths.

Live Preview | Download

HTML Code:
Below is the code were you need to place it in the… Tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">
    .x-panel-body p {
        margin:10px;
    }
    #container {
        padding:10px;
    }
</style>

JavaScript Code:
JavaScript Code should be placed below this line

1

<script type="text/javascript" src="../../ext-all.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13

Ext.onReady(function(){
	var mypanel = new Ext.Panel({
		title: 'My Panel',
		collapsible:true,
		width:500,
		html: Ext.example.bogusMarkup
	});
	var myButton = Ext.get('myHrefIdClick');
		myButton.on('click', function(){
			//render the panel to id -> 'container'
			mypanel.render('container'); 
	});
}); //onReady Close

Below code should be placed in… tag:

1
2
3
4
5

<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>onClick of a link opens up a Panel</h1>
<a href="#" id="myHrefIdClick">Click Here</a>
<div id="container">
</div>

If you would like to view the preview, you can click the below link:
Live Preview | Download

Below is the simple and sample snippet for creating nested tabs using Ext JS, after the launch of Ext JS 2.2 SDK I started working on some simple projects, I have download the latest Ext JS 2.2 SDK from download page. So Guys! before looking at the below code just download the respective Ext JS 2.2 SDK on your desktop and just download the below tutorial and save it to this location: ExtJS2.2\examples\tabs this is because I have not changed the respective relative paths.

Live Preview | Download

Below code should be placed in between of….

1
2
3
4
5
6
7
8
9
10

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- Tabs Example Files -->
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

Below code should be placed in between of….

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<h1>Nested Tab Panel Example</h1>
<h3>Nested Tabs with auto height that resize to the content.</h3>
<br>
<!-- container for the existing markup tabs -->
<div id="tabsContainer">
  <div id="parentTab1" class="x-hide-display">
    <!-- Sub Tabs -->
    <div id="childTab1" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.</p>
    </div>
    <div id="childTab2" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/>
        <br/>
        Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
    </div>
    <!-- Sub Tabs -->
  </div>
  <div id="parentTab2" class="x-hide-display">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.</p>
    <!-- Sub Tabs -->
    <div id="childTab3" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.</p>
    </div>
    <div id="childTab4" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/>
        <br/>
        Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
    </div>
    <!-- Sub Tabs -->
  </div>
</div>

Below is the respective JavaScript code for the tabs to rendered. Copy & paste the same just below this line

1

<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<script language="javascript">
Ext.onReady(function(){
	//parent tabs
    var tabs = new Ext.TabPanel({
        renderTo: 'tabsContainer',
        width:450,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'parentTab1', title: 'Parent Tab1'},
            {contentEl:'parentTab2', title: 'Parent Tab2'}
        ]
    });
 
	//subtabs
	var subtabs = new Ext.TabPanel({
        renderTo: 'parentTab1',
        autoWidth:true,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'childTab1', title: 'Sub Tab1'},
            {contentEl:'childTab2', title: 'Sub Tab2'}
        ]
    });
 
	//subtabs
	var subtabs = new Ext.TabPanel({
        renderTo: 'parentTab2',
        autoWidth:true,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'childTab3', title: 'Sub Tab3'},
            {contentEl:'childTab4', title: 'Sub Tab4'}
        ]
    });
 
});
</script>

Below is the snap shot of the same:

Nested Tabs

Live Preview | Download

These new features includes:
Drag and Drop:
In this version of Ext GWT 1.2 it has got a new Drag and Drop (DND) framework. Respective Support is added via the DragSource and DroptTarget classes with specialized subclasses for Grid, Trees, and Lists. The DND code exposes a rich event model to allow precise control of your DND operations.

Form Data Binding:
With the new data binding framework, your model can be “bound” to forms and fields. The relationship is bi-directional with updates propagating in both directions.

File Upload
This version introduces a few new fields including the FileUploadField which allows files to be uploaded to the server via standard HTML form submissions.

Examples:

Ext GWT 1.2

For Notable new examples are added to the demo applications and which includes Grid to Grid DND, Reordering Tree, Image Organizer, Grid Binding, DualListField and more examples in action

Download:
To download respective Ext GWT 1.2 please visit the Ext GWT download page. And for the release notes you can click here.

If you would like to know more about Selenium, then please do visit ExtJS for brief description on how we are going to test our own Ext JS applications.

Selenium IDE

Reference:
For reference of respective test lists please do click here

Installation of Selenium IDE:
If you want to install the same then please do download ) the same and while installing follow the steps carefully.

Knowledge on demand has become the ultimate purpose of many websites. Widgets are nothing but mini-applications, which provide effective solutions to visitors’ needs. Widgets of modern times play a crucial role in making the website a magical stage where you get instant answers for your queries. Apart from making a website interesting and interactive one, they provide instant information on news, entertainment, weather, calculations, and many more.

As today’s web visitors expect more and more from websites, and widgets have become an absolute necessity in order to retain the visitors for a longer period or entice more visitors to your site. If you really want a high traffic to your site, just place a few gadgets that are of great interest to your visitors. Of late, widgets have started attracting web visitors of all ages, and it has been proved that useful and simple widgets increase the traffic of websites in multi-folds. One other specialty of widgets is that users can get easy access to information available on the internet without visiting specific websites. YouTube videos, movie trailers, photo slideshows, news widgets are some of the popular widgets for blog sites and websites. Desktop widgets on the other hand can be downloaded and used to access information without having to visit the website. Some of the good examples include the weather gadget offered on websites that forecast weather, new feeds, maps, pictures, videos, and music.

It is a good idea for website promotion too! Do you know that widgets are great marketing tools in the arena of internet marketing? Well, here are a few points on the marketing capability of the widgets. Instead of placing banner ads, website owners can opt for a useful widget that bears the name of the company on it. As it is an interactive tool that provides a service, you are likely to draw more targeted traffic than your banner ads can bring in. Moreover, allowing users to share the widget gets you more inbound links that is a great plus when it comes to search engine optimization for higher page ranking.

Using widgets on you blog could enhance the looks and usability of your blog site. Apart from providing the blog with great looks, it can draw the attention of the visitors to a large extent. For example, blog widgets like Twitter or Plurk on your site will enable your visitors to know what you do, or even help them subscribe to your blog or follow it.

In order to help developers in learning more about the widgets, there are number of dedicated websites that provide useful information on widgets. These websites explain in detail about the widget and its uses. One good example is developersnippets.com. You can find a good number of snippet articles that are from basic to high-level. This site helps young developers wishing to have fruitful career in developing innovative web products.

CloudComputing:

Cloud Computing

* Under 10K!
* Simple, JavaScript Centric Syntax
* Fast
* Easy to include in any web application
* Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
* CRUD Interface (Create, Read, Update, Delete)
* Sorting
* Looping
* Advanced Queries

We can think this as a SQL database in our web browser. If you would like to know more about the same then please do have a look at here – Getting Started
Below are the few example snippets on how we are going to implement and utilize the same:
Example #1:
Let’s say you have a collection of products and you want to find every product that costs less $10 and is a book. Simple, just write some JavaScript:

1

products.find({price:{lessthan:10},type:"Book"}});

Example #2:
Let’s say you want to update every product from XZYDesign and set the status to not available:

1

products.update({status:"NA"},{manufacturer:"XZYDesign"});

Example #3:
Let’s say you want to sort your products based on type, price descending, and quantity descending:

1

products.orderBy(["type",{"price":"desc"},{"quantity":"desc"}]);

If you would like to know more about the same then please do have a look at here – Getting Started

Download Taffy DB
Feedback/Bugs
FAQ

Articles which you would like to read:
System Error: -1072896658 in IE
Simple steps to develop AJAX Website – DeveloperSnippets
Snippet Code for Simple Ajax Tabs with cool CSS Styles
A simple snippet code to learn basics of Ajax

The respective application will retrieve data from Flickr by extending Ext’s native data package to display an image gallery. This image gallery widget will support search ability as well we can search images based on how they are tagged inside Flickr.

Getting Started, firstly we need have an API key, the API key is sent with all requests and its used to identify the caller. Its a free of cost to get the API key, just follow this URL – http://www.flickr.com/services/api/keys/ and it will ask for yahoo’s authentication and proceed further to get your own API key. After getting your own API key then just do follow respective steps can be viewed at this URL – http://extjs.com/blog/2008/10/17/ext-flickr-image-gallery/ to built your own widget.

Live Demo:
If you would like to see the demo, then below is the link for the same its awesome! really awesome enough… http://extjs.com/playpen/flickr/flickr.html

This widget can be placed on your websites or on your rocking blogs.