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

3 Columns Layout Using CSS

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

Further Reading

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