Note: You must provide your own Ext JS 4 SDK and run these examples locally.

Ext JS Message Box

ExtJS Dialogs (or popups) are not actually popups, They are divs that are injected into the root level of the DOM. They are most easily identified by their div class containing  “x-window”  and an ID which is always auto-generated but that starts with “messagebox”.

Example Application: form1.html

Example Test: Form1TestBase.java

example_extjs_dialog

Ext JS Usage:

Ext.MessageBox.show({
	title: 'ERROR',
	msg: 'Invalid first name',
	buttons: Ext.MessageBox.OK,
});

Resulting HTML:

<div>
...
<div>Invalid first name</div>
...
<button><span>OK</span></button>
...
</div>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsMessageBox() Generates the XPath for getting the current dialog
Button by Text  findExtJsMessageBoxButtonByText(String text) Generates the XPath for getting the button containing the given text within the currently displayed message box

 

Ext JS Split Button

A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event of the button.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.button.Split 

Example Application: form2.html

Example Test: Form2TestBase.java

example_extjs_splitbutton

Ext JS Usage:

Ext.create('Ext.button.Split', {
    renderTo: Ext.getBody(),
    text: 'Select a Family',
    menu: new Ext.menu.Menu({
        items: [
            // these will render as dropdown menu items when the arrow is clicked:
            {text: 'Simpsons' },
            {text: 'Flanders' }
        ]
    })
});

Resulting HTML:

<button>
...
<span>Select a family</span>
... 
</button>

However, once the split button is clicked the items are injected into the DOM like with a popup, resulting in the following HTML:

<div>
...
	<span>Simpsons</span>
	...
	<span>Flanders</span>
	...
</div>

The Split Button itself is just a regular button, so it can be located as if it was an HTML Button. Once the Split Button is pressed the resulting popups are referred to as Split Button Menu Items.

Methods for look-up via XPathUtils:

Means Method Description
Menu Item By Text  findExtJsSplitButtonMenuItem(String text) Generates the XPath for getting the Menu Item resulting from clicking on a split button by its text.

 

Ext JS Grid Panel

Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged <table>, GridPanel makes it easy to fetch, sort and filter large amounts of data.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.grid.Panel

It is important to note that an Ext JS Grid Panel can be accessed if it is was a plain HTML Table.

Example Application: form2.html

Example Test: Form2TestBase.java

 

Ext JS Tree Panel

The TreePanel provides tree-structured UI representation of tree-structured data.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.tree.Panel

Example Application: form3.html

Example Test: Form3TestBase.java

example_tree

Ext JS Usage:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
           	{ text: "Alpha, Adam", leaf: true },
           	{ text: "Bravo, Billy", leaf: true }
		{ text: "Power Users", children: [
               		{ text: "Charlie Cherry", leaf: true },
                	{ text: "Delta, DOnny", leaf: true}
            	]},
        ]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

Resulting HTML:

<table>
	<tr>
		<td>Alpha, Adam</td>
	</tr>
	<tr>
		<td>Bravo, Billy</td>
	</tr>
	<tr>
		<td><img />Power Users</td>
	</tr>
</table>

Once the + icon is clicked on new rows are injected into the table:

<table>
	<tr>
		<td>Alpha, Adam</td>
	</tr>
	<tr>
		<td>Bravo, Billy</td>
	</tr>
	<tr>
		<td><img />Power Users</td>
	</tr>
	<tr>
		<td>Charlie, Cherry</td>
	</tr>
	<tr>
		<td>Delta, Donny</td>
	</tr>
</table>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsGrid() Generates the XPath for getting a grid assuming there is only one on the page
By Text  findExtJsGridByText(String text) Generates the XPath for getting a grid that contains any of the given text
By Text in Div  findExtJsGridByTextInDiv(String text, String divId) Generates the XPath for getting a grid that contains any of the given text in the div of the given ID
By Default in Div  findExtJsGridInDiv(String divId) Generates the XPath for getting the grid as it resides in the div of the given ID
Row By Index  findExtJsGridRow(int row) Generates the XPath for getting a grid row at the given 1-based index
Row by Text  findExtJsGridRow(String text) Generates the XPath for getting a grid row by its text
Row by Index in Div  findExtJsGridRowInDiv(int row, String divId) Generates the XPath for getting a grid row by its 1-based index in the div of the given ID
Row by Text in Div  findExtJsGridRowInDiv(String rowText, String divId) Generates the XPath for getting the grid row containing the given text in the div of the given ID
Expand Icon by Row  findExtJsGridRowExpansionNode(int row) Generates the XPath for getting the icon used for expanding and contracting a tree node in the given 1-based index for a row
Expand Icon by Row in Div  findExtJsGridRowExpansionNodeInDiv(int row, String divId) Generates the XPath for getting the icon use for expanding and contracting a tree node in the given 1-based index for a row in the div of the given ID
Expand Icon by Text in Div findExtJsGridRowExpansionNodeInDiv(String text, String divId) Generates the XPath for getting the icon for expanding and contracting a tree node by its text in the div of the given ID
Expand Icon By Text  findExtJsGridRowExpansionNode(String text) Generates the XPath for getting the icon for expanding and contracting a tree node by its text

 

ExtJS Combo

A ComboBox is like a combination of a traditional HTML text <input> field and a <select> field; the user is able to type freely into the field, and/or pick values from a dropdown selection list.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.ComboBox

The combo box field itself is a regular input of type test, so it can be interacted with an if it were an HTML Text Input.

The icon used to display the items within is a type of button, while the items themselves are injected into the DOM like with a popup.

Example Application: form4.html

Example Test: Form4TestBase.java

example_combobox

Ext JS Usage:

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"1", "name":"One"},
        {"abbr":"2", "name":"Two"},
        {"abbr":"3", "name":"Three"},
        {"abbr":"4", "name":"Four"}
    ]
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'ExtJS Combo Box',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});

Resulting HTML:

<input type="text" name="optionBox">
...
	<table>
		<td></td>
		<td><!-- This is the button --></td>
	</table>
</input>

The following is injected into the DOM like with the popup with the button within the combo box is pressed:

<div>
...
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
</div>

Methods for look-up via XPathUtils:

Means Method Description
Button by Value  extJsComboBoxButtonByValue(String value) Generates the XPath for the drop-down button in the combo box by that combo box's value
Button by Name  extJsComboBoxButtonByName(String name) Generates the XPath for the drop-down button by the name attribute of that combo box
Item by Row  extJsComboItemByRow(int row) Generates the XPath for the item within the combo box popup once displayed by its 1-based index
Item by Text  extJsComboItemByText(String text) Generates the XPath for the item within the combo box popup once display by its text

 

Ext JS Radio

Similar to checkbox, but automatically handles making sure only one radio is checked at a time within a group of radios with the same name.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.Radio

An Ext JS Radio is actually rendered as a specially formatted button.

example_extjs_radio

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype      : 'fieldcontainer',
	fieldLabel : 'ExtJS Radio Buttons',
	defaultType: 'radiofield',
	defaults: {
		flex: 1
	},
	layout: 'hbox',
	items: [
		{
			boxLabel  : 'M',
			name      : 'size',
			inputValue: 'medium_value',
			checked: true
		}, {
			boxLabel  : 'L',
			name      : 'size',
			inputValue: 'large_value',
		}, {
			boxLabel  : 'XL',
			name      : 'size',
			inputValue: 'xl_value',
	 	}
	]
}

Resulting HTML:

<td>
	<input></input>
	<label>M</label>
</td>
<td>
	<input></input>
	<label>L</label>
</td>
<td>
	<input></input>
	<label>XL</label>
</td>

Methods for look-up via XPathUtils:

Means Method Description
By Text  findExtJsRadioByText(String text) Generates the XPath for getting the radio that contains the given text
By Text in Div  findExtJsRadioByTextInDiv(String text, String divId) Generates the XPath for getting the radio that contains the given text in the div of the given ID

 

Ext JS HTML Editor

Provides a lightweight HTML Editor component.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.HtmlEditor

This HTML Editor works (in most browsers) by existing as an IFrame that contains another page to contain the text. This means that in order to interact with the content of the IFrame the context has to be “switched” from the default context to the IFrame itself.

example_html_editor

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'htmleditor',
	name: 'htmlEditorName',
	value: '<b>This is some HTML</b>'
}

Resulting HTML:

<iframe>
	<html>
		<body>
			<b>This is some HTML</b>
		</body>
	</html>
</iframe>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsHtmlEditor() Generates the XPath for getting the HTML Editor assuming there is only one on the page
By Default in Div  findExtJsHtmlEditorInDiv(String divId) Generates the XPath for getting the HTML Editor inside the div of the given ID
By ID  findExtJsHtmlEditorById(String id) Generates the XPath for getting the the HTML Editor of the given ID
Body of IFrame //body After switching the context to the IFrame component use this XPath to get the component that contains the actual text

 

Ext JS Date Field

Provides a date input field with a date picker dropdown and automatic date validation.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.Date

The field itself is just a text input so you can interact with it like a regular HTML Text Input. The date button is a specially formatted button, and the date popup just contains links so you can interact with just like a regular HTML Link.

example_datefield

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'datefield',
	fieldLabel: 'ExtJS Date Field',
	name: 'extJsDateFieldName',
	value: '01-01-2012'
}

Resulting HTML:

<table>
	<td>
		<input name="extJsDateFieldName" value="01/01/2012" />
	</td>
	<td>
		<div><!-- This is the date button --></div>
	</td>
</table>

Methods for look-up via XPathUtils:

Means Method Description
Button by Name  findExtJsDateButtonByName(String name) Generates the XPath for getting the date button by the date field's name
Button by Name in Div  findExtJsDateButtonByNameInDiv(String name, String divId) Generates the XPath for getting the date button by the date field's name in the div of the given ID
Button by Value findExtJsDateButtonByValue(String value) Generates the XPath for getting the date button by the date field's value
Button by Value in Div  findExtJsDateButtonByValueInDiv(String value, String divId) Generates the XPath for getting the date button by the date field's value in the div of the given ID

 

Ext JS Check Box

Can be used as a direct replacement for traditional checkbox fields.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.form.field.Checkbox

example_extjs_checkbox

Ext JS Usage:

{
	xtype: 'fieldcontainer',
	fieldLabel: 'ExtJS Checkboxes',
	defaultType: 'checkboxfield',
	items: [
		{
			boxLabel  : 'Anchovies',
			name      : 'AnchoviesBox',
			inputValue: '1',
		}, {
			boxLabel  : 'Artichoke Hearts',
			name      : 'ArtichokeBox',
			inputValue: '2',
			checked   : true,
		}, {
			boxLabel  : 'Bacon',
			name      : 'BaconBox',
			inputValue: '3',
		}
	]						        
}

Resulting HTML:

<td>
	<input />
	<label>Anchovies</label>

</td>
...
<td>
	<input />
	<label>Artichoke Hearts</label>

</td>
...
<td>
	<input />
	<label>Bacon</label>

</td>

Methods for look-up via XPathUtils:

Means Method Description
By Text  findExtJsCheckboxByText(String text) Generates the XPath for getting the check box that contains the given test
By Text in Div  findExtJsCheckboxByTextInDiv(String text, String divId) Generates the XPath for getting the check box that contains the given text in the div of the given ID

 

Ext JS Color Picker

Color picker provides a simple color palette for choosing colors.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.picker.Color

The color options generated are special links, which you can locate using the 6 character hex color code.

example_color_picker

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'colorpicker'
}

Resulting HTML:

...
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
...

Methods for look-up via XPathUtils:

Means Method Description
By Value  findExtJsColorPickerLinkByValue(String value) Generates the XPath for getting a color option by its 6-character hex color code for example 00FF00
By Value in Div  findExtJsColorPickerLinkByValueInDiv(String value, String divId) Generates the XPath for getting a color option by its 2-character hex color code  in the div of the given ID

 

Ext JS Slider

Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation.

– http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.slider.Single

example_extjs_slider

Example Application: form4.html

Example Test: Form4TestBase.java

Ext JS Usage:

{
	xtype: 'sliderfield',
	name: 'sliderName',
	fieldLabel: 'ExtJS Slider',
	value: 50,
	increment: 10,
	minValue: 0,
	maxValue: 100,
	width: 200,
}

Resulting HTML:

<div>
...
</div>

Methods for look-up via XPathUtils:

Means Method Description
By Default  findExtJsSlider() Generates the XPath for getting the slider assuming there is only
By Default in Div  findExtJsSliderInDiv(String divId) Generates the XPath for getting the slider in the div of the given ID