Components Communication

This example shows where to put the code that implements the communication among components.

Code that creates and activates the new tab when a link is clicked is neither part of the west "link" panel nor the center tab panel but it is part of the window which is aware of the existence of both panels.

Further Reading

Production/Development Switch

This example shows how to easily and automatically switch between production and development system.

We include individual JavaScript files and the debug version of ExtJS Library in the development version and concatenated and compressed files and the compressed version of ExtJS Library in the production version.

Further Reading

Drag & Drop Between Grids

This is a simple grid-to-grid D&D implementation that allows you to drag rows from one grid and drop them to another. Rows are only appended to the target grid for simplicity.

The key is to enable the built-in D&D for both grids and to implement the custom GridDropZone that removes records from the source store and appends them to the destination store.

Further Reading

Displaying Form Submit Errors

This example shows how to display errors that come back from the server if the server validation fails.

Form initially loads valid from the client validation viewpoint but the server returns errors after submit. These errors are displayed as toolips of error icons. They can be alternatively displayed in any valid field msgTarget.

The key is to return JSON in the format that Ext can understand and process as fields errors.

Further Reading

Fieldsets in 2 Columns Layout

This example shows how to properly configure side-by-side anchored fieldsets.

As you resize the window, the fieldsets with fields resize themselves to fill the new width. This is done with the help of Form Layout that extends Anchor Layout. Column Layout is used to put fieldsets side-by-side.

Further Reading

Form Fields Anchoring

This example show both horizontal and vertical anchoring of form fields.

Fields resize to fill the available space when you resize the window.

Further Reading

Form Load And Submig

This example shows how to load form data from server and how to submit form.

The form starts empty and when you click Load button the data is loaded from the server and the form fields are filled in. When you click Submit button the data is sent to the server and a result is returned. In this example, result alternates between success and failure.

Submit button in disabled until the form becomes valid.

Further Reading

Image In Form

This example shows how to put an image, or any other static content, into a form.

The key is a BoxComponent with properly configured autoEl.

Further Reading

Tabs in Form

This example shows how to correctly configure tabs in a form.

If form containing tabs is not properly configured, rendering problems of fields on initially inactive tabs, especially combos or dates, may result. Form can also submit only fields from the active tab or anchoring of fields on tabs does not work. The example is free of all these problems.

Further Reading

Displaying 1:n Data in QuickTips

This example shows how to display data from "many" table in QuickTips of a grid that displays data from "one" table.

Although simple, it can be useful for displaying person:phones, company:addresses, invoice:items or any other 1:many data.

Further Reading

Grid In An Accordion

This example shows how to put a grid in an Accordion Layout panel which can be initially inactive.

The key is lazy instantiating and rendering.

Further Reading

Grid In An Inactive Tab

This example shows how to put a grid in a tab which can be initially inactive.

The key is lazy instantiating and rendering.

Further Reading

Grid In Border Layout

This example shows how to put a grid in a Border Layout region.

The key is lazy instantiating and rendering.

The example uses the working Paging Toolbar so you can also see how it is implemented including the server side PHP script.

Further Reading

Simplest Border Layout

This is a minimalistic example of Border Layout configuration; it cannot be any simpler.

Further Reading

Simple Table Layout

This is a simple Table Layout example.

Further Reading

Simple Viewport

This is a simple Viewport with Border Layout example.

Further Reading

Tab Panel in Accordion

This example shows how to put a TabPanels in an Accordion Layout.

The key is lazy instantiating and rendering.

Further Reading

Simple Window/Panel autoLoad

This example shows how to configure Window or Panel content autoLoad.

When the Window or Panel is rendered a request is sent to the server and the Window or Panel body is updated with the delivered content.

Further Reading

Keeping An Accordion State

This example shows how to keep an Accordion Layout state so it expands same panel on a new page load.

The trick is to supply getState function that returns collapsed state of panels and this state is saved by the State Manager. When Accordion is instantiated next time, collapsed configuration property is applied to all panels as retrieved from the State Manager so the Accordion renders in the same state as you left it last time.

Further Reading

Keeping Active Tab and Window State

This example shows how to keep active tab of TabPanel and how to keep Window position and size between sessions.

The trick is to supply getState function that returns active tab index for TabPanel. This state is saved by the State Manager. When TabPanel is instantiated next time, activeTab configuration property is retrieved from the State Manager and applied to TabPanel so it renders in the same state as you left it last time. It is even simpler for Window, see the code.

Further Reading

3 Columns Layout Using CSS

Example of creating a 3 column layout with CSS only, no coding is required.

Further Reading

Handling Item Clicks

Example of handling clicks on items contained in a container (Panel, Window) with one event handler.

It also shows how to cleverly filter clicks from disabled items that are made visually disabled too.

The example also shows:

Free Drag with State

This example shows how to setup dragging of items within a container to reposition them. Items positions are saved using Ext state management and CookieProvider.

The example also shows:

Further Reading

Populate Combo on Form Load

This example shows how to populate a combo with data received from the server on form load.

Drag from Tree to Div

This example shows simple setup of a draggable tree and processing of drops at the target.

Complex Data Binding

This example shows how to implement component communication using data binding. The data is kept in records in grid store. When a cell is clicked, the underlying record is bound to both show panel and form.

Changes made in the grid are automatically reflected in both Show Panel and Form, changes in Form are updated in both Grid and Show Panel - data is changed in one place, the record, in fact.

Note: This example is not for beginners.

Drag from Tree to Div

This example shows simple setup of a draggable tree and processing of drops at the target.

CheckTreePanel in Form

This example shows how to use my CheckTreePanel in a form. The form is capable of loading and submitting from/to the server.

Note:

I have added simple form compatibility methods to CheckTreePanel only for the purpose of this example. I would write better ones if the interest of the community would be adequate.

Dynamically Adding Tabs

This example shows how to dynamically add tabs to TabPanel. You can choose between simple adding and adding and activating the new tab.

Column Layout in Form

This example shows how to properly configure column layout in form. Using a column layout in form is one of the solutions of putting form fields side by side in one row.

Using Grid rowBody

This example shows how to use grid rowBody for displaying longer information pertinent to the whole row such as description or similar.

Note that the text in the row body is selectable so it can by copied & pasted. See CSS Source to find out how it is done.

Same, or similar CSS can be used also for grids with RowExpander plugin.

Combo with Remote Store

This is advanced, full-fledged example of a combo with remote store.

The example shows:

Asynchronous Tree State

This example shows how to keep state of an asynchronous tree.

The core code is written in the form of plugin so it can be used with any existing tree.

Keeping Tab State Using Plugin

This example shows how to keep active tab of TabPanel between sessions.

The core code is written in the form of plugin so it can be used with any existing TabPanel.

Downloading Files

This example shows how to invoke browser "Save As..." dialog when downloading a file from the server.

Server side script is oversimplified for the purpose of this example. You would open the file to download and you would return content of that file from the server in a real application.

Drag from Grid to Tree

This example shows how to drag row(s) from grid to tree.

The example is simplified so you may need more logic in a real application.

Simple Message Bus

This is extremely simplified example of one way of implementing a message bus in Ext using the global Ext.util.Observable instance.

The real application would probably implement subject, for example org.saki.app.desktop and message body as an object with data.

Ext.ux.MsgBus

This is example accompanying blog post on Ext.ux.MsgBus Plugin

Grid in Card Layout

This is example shows how to create a grid in Card Layout.

It uses Ext 3.x and it will produce errors or will not work in Ext 2.x. However, the logic used would be same in Ext 2.x.

When you click a specific example in the tree above the brief explanation of that example appears here.