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.
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.
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.
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.
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.
This example show both horizontal and vertical anchoring of form fields.
Fields resize to fill the available space when you resize the window.
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.
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.
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.
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.
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.
This example shows how to put a grid in a tab which can be initially inactive.
The key is lazy instantiating and rendering.
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.
This is a minimalistic example of Border Layout configuration; it cannot be any simpler.
This is a simple Viewport with Border Layout example.
This example shows how to put a TabPanels in an Accordion Layout.
The key is lazy instantiating and rendering.
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.
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.
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.
Example of creating a 3 column layout with CSS only, no coding is required.
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:
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:
This example shows how to populate a combo with data received from the server on form load.
This example shows simple setup of a draggable tree and processing of drops at the target.
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.
This example shows simple setup of a draggable tree and processing of drops at the target.
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.
This example shows how to dynamically add tabs to TabPanel. You can choose between simple adding and adding and activating the new tab.
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.
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.
This is advanced, full-fledged example of a combo with remote store.
The example shows:
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.
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.
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.
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.
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.
This is example accompanying blog post on Ext.ux.MsgBus Plugin
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.