Docs Help

## Terms, Icons, and Labels

Many classes have shortcut names used when creating (instantiating) a class with a configuration object. The shortcut name is referred to as an `alias` (or `xtype` if the class extends Ext.Component). The alias/xtype is listed next to the class name of applicable classes for quick reference.

### Access Levels

Framework classes or their members may be specified as `private` or `protected`. Else, the class / member is `public`. `Public`, `protected`, and `private` are access descriptors used to convey how and when the class or class member should be used.

- Public classes and class members are available for use by any other class or application code and may be relied upon as a stable and persistent within major product versions. Public classes and members may safely be extended via a subclass.

- Protected class members are stable `public` members intended to be used by the owning class or its subclasses. Protected members may safely be extended via a subclass.

- Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.

### Member Types

- Config - The configuration options for a class.
- Property - Set once a class is instantiated. *See Read Only below.
- Method - Actions that can be performed by a class. Methods should be read as instance methods and can only be called from a instance of a given class. Static methods that can be called directly from the class itself will have a `static` label next to the method name. *See Static below.
- Event - Events are specific to the framework event system allowing for classes to programmatically raise an event to be handled by one or more event handler methods. DOM events, while handled by the framework event system, are not specifically described within the API documentation. *For DOM events refer to the event reference page from MDN.
- Theme Variable - Variables used by the visual theme engine employed by the framework.
- Theme Mixin - Functions used by the visual theme engine employed by the framework and may use values set in various Theme Variables.

### Member Syntax

Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).

Ext.container.Container
view source
lookupComponent ( item ) : Ext.Component
protected

Called when a raw config object is added to this container either during initialization of the items config, or when new items are added), or {@link #insert inserted.

This method converts the passed object into an instanced child component.

This may be overridden in subclasses when special processing needs to be applied to child creation.

Parameters

item : Object

The config object being added.

Returns
Ext.Component

The component to be added.

Let's look at each part of the member row:

- Expand/Collapse - On the left-hand size of the member row is a control used to expand and collapse each member row to show / hide member details.
- Member Name - The name of the class member (`lookupComponent` in this example)
- Method Param - Any required or optional params used by a method (or passed to an event handler method) will be listed next to the method name within parenthesis (`( item )` in this example)
- Return type - The class instance or javascript object returned by the method or property (`Ext.Component` in this case). This may be omitted for methods that do not return anything other than `undefined` or may display as multiple possible values separated by a forward slash `/` signifying that what is returned may depend on the results of the method call (i.e. a method may return a Component if a get method calls is successful or `false` if unsuccessful which would be displayed as `Ext.Component/Boolean`).
- Flags - Any flags applicable to the member will be displayed next (`PROTECTED` in this example - see the Flags section below)
- Member Origin - On the right-hand side of the member row is the class where the member was initially described (`Ext.container.Container` in this example). The source class will be displayed as a blue link if the member originates from the current class and gray if it is inherited from an ancestor or mixed-in class.
- Member Source - On the right-hand side below the member origin class is a link to view the member's source (`view source` in the example)
- Params List - Each param for a class method will be listed using the same name found above in parenthesis, the type of class or object expected, and a description of the param (`item : Object` in the example).
- Returns - If a class returns a value other than `undefined` a "Returns" section will note the type of class or object returned and a description (`Ext.Component` in the example)
- Since (not shown in the example) - Some members will show which version of the product the member was first introduced (i.e. `Available since 3.4.0` - not pictured in the example) just after the member description
- Default (not shown in the example) - Configs often show the default config value to be applied to a class instance if not overridden (i.e. `Defaults to: false`)

### Member Flags

The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.

- Required - Required config when instantiating a class
- Bindable - The config has a setter which allows this config to be set via ViewModel binding
- Read Only - The property may be read, but cannot be used to configure / re-configure a class instance at runtime
- Singleton - Singleton classes are instantiated immediately once defined and may not be instantiated manually
- Static - A static method or property is a method or property belonging to the class itself, not an instance of the class
- Chainable - Refers to methods that return the class instance back when called.
  This enables chained method calls like: `classInstance.method1().method2().etc();`
- Deprecated - A class or member that is scheduled for removal in a future framework version and is provided in the current version for backwards compatibility.
  Deprecated classes and members will have a message directing you to the preferred class / method going forward.
- Removed - A removed class or member that exists in documentation only as a reference for users upgrading between framework versions
- Template - A method defined within a base class designed to be overridden by subclasses
- Abstract - A class or member may be be defined as abstract. Abstract classes and members establish a class structure and provide limited, if any, code. Class-specific code will be furnished via overrides in subclasses.
- Preventable - Events marked preventable will not fire if `false` is returned from an event handler

### Class Icons

- Indicates a framework class

- A singleton framework class. *See the singleton flag for more information

- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)

- Indicates that the class, member, or guide is new in the currently viewed version

### Member Icons

- Indicates a class member of type `config`

- Indicates a class member of type `property`

- Indicates a class member of type `method`

- Indicates a class member of type `event`

- Indicates a class member of type `theme variable`

- Indicates a class member of type `theme mixin`

- Indicates that the class, member, or guide is new in the currently viewed version

## Navigation and Features

### Class Member Quick-Nav Menu

Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.

### Getter and Setter Methods

Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.

### History Bar

Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.

Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.

If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.

### Search and Filters

Both API docs and guides can be searched for using the search field at the top of the page.

On API doc pages there is also a filter input field that filters the member rows using the filter string. In addition to filtering by string you can filter the class members by access level and inheritance. This is done using the checkboxes at the top of the page. Note that filtering out `private` members also filters the API class navigation tree.

Clicking on an empty search field will show your last 10 searches for quick navigation.

### API Doc Class Metadata

Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:

- Alternate Name - One or more additional class name synonymns (in Ext JS 6.0.0 the `Ext.button.Button` class has an alternate class name of `Ext.Button`). Alternate class names are commonly maintained for backward compatibility.
- Hierarchy - The hierararchy view lists the inheritance chain of the current class up through its ancestor classes up to the root base class.
- Mixins - A list of classes that are mixed into the current class
- Inherited Mixins - A list of classes that are mixed into an ancestor of the current class
- Requires - All classes required to be defined for the class to be instantiated
- Uses - A list of classes potentially used by the class at some point in its lifecycle, but not necessarily requried for the class to initially be instantiated
- Subclasses - Classes that extend the current class

### Expanding and Collapsing Examples and Class Members

Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.

Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.

### Desktop -vs- Mobile View

Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:

- Global navigation will be located in a menu on the left-hand side accessible via the hamburger menu icon. The menu houses the following (on most pages):
  - The name of the current product (as a link to the product landing page)
  - The Sencha icon used to navigate back to the documentation home page
  - The product menu drop-down button
  - Tabs of navigation trees for the API docs and guides
- Current context navigation and tools is located on the right-hand side accessible via the gear icon. The context menu houses teh following:
  - The global search input field
  - (API doc) A "Filters" tab with the member filter, expand / collapse all examples button, expand / collapse all member rows button, the access level filter checkboxes, and the counts of each member
  - (API doc) A "Related Classes" tab containing the menu of metadata related to the current class
  - (Guides) The table of contents for the guide

### Viewing the Class Source

The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.

Ext Direct Specification
Classic Toolkit

##
Ext JS 6.2.0 - Modern Toolkit

Guides
API
▸ Ext
▸ app
▸ bind
▸ AbstractStub
▸ BaseBinding
▸ Binding
▸ Formula
▸ LinkStub
▸ Multi
▸ Parser
▸ RootStub
▸ Stub
▸ Template
▸ TemplateBinding
▸ domain
▸ Component
▸ Controller
▸ Direct
▸ Global
▸ Store
▸ View
▸ route
▸ Queue
▸ Route
▸ Router
▸ Application
▸ BaseController
▸ Controller
▸ EventBus
▸ EventDomain
▸ Profile
▸ Util
▸ ViewController
▸ ViewModel
▸ behavior
▸ Behavior
▸ Draggable
▸ Translatable
▸ calendar
▸ date
▸ Range
▸ Util
▸ dd
▸ DaysAllDaySource
▸ DaysAllDayTarget
▸ DaysBodySource
▸ DaysBodyTarget
▸ DaysProxy
▸ WeeksProxy
▸ WeeksSource
▸ WeeksTarget
▸ form
▸ AbstractForm
▸ Add
▸ Base
▸ CalendarPicker
▸ Edit
▸ Form
▸ header
▸ Base
▸ Days
▸ Weeks
▸ model
▸ Calendar
▸ CalendarBase
▸ Event
▸ EventBase
▸ panel
▸ AbstractBase
▸ AbstractPanel
▸ Base
▸ Day
▸ Days
▸ Month
▸ Panel
▸ Week
▸ Weeks
▸ store
▸ Calendars
▸ Events
▸ EventSource
▸ theme
▸ Palette
▸ Theme
▸ util
▸ Dom
▸ view
▸ Base
▸ Day
▸ Days
▸ DaysRenderer
▸ Month
▸ Multi
▸ Week
▸ Weeks
▸ WeeksRenderer
▸ AbstractList
▸ Event
▸ EventBase
▸ List
▸ carousel
▸ Carousel
▸ Indicator
▸ Infinite
▸ Item
▸ chart
▸ axis
▸ layout
▸ CombineDuplicate
▸ Continuous
▸ Discrete
▸ Layout
▸ segmenter
▸ Names
▸ Numeric
▸ Segmenter
▸ Time
▸ sprite
▸ Axis
▸ Axis3D
▸ Axis
▸ Axis3D
▸ Category
▸ Category3D
▸ Numeric
▸ Numeric3D
▸ Time
▸ Time3D
▸ grid
▸ CircularGrid
▸ HorizontalGrid
▸ HorizontalGrid3D
▸ RadialGrid
▸ VerticalGrid
▸ VerticalGrid3D
▸ interactions
▸ Abstract
▸ Crosshair
▸ CrossZoom
▸ ItemEdit
▸ ItemHighlight
▸ ItemInfo
▸ PanZoom
▸ Rotate
▸ RotatePie3D
▸ label
▸ Callout
▸ legend
▸ sprite
▸ Border
▸ Item
▸ store
▸ Item
▸ Store
▸ Legend
▸ LegendBase
▸ SpriteLegend
▸ plugin
▸ ItemEvents
▸ series
▸ sprite
▸ Aggregative
▸ Area
▸ Bar
▸ Bar3D
▸ Box
▸ CandleStick
▸ Cartesian
▸ Line
▸ Pie3DPart
▸ PieSlice
▸ Polar
▸ Radar
▸ Scatter
▸ Series
▸ StackedCartesian
▸ Area
▸ Bar
▸ Bar3D
▸ CandleStick
▸ Cartesian
▸ Gauge
▸ Line
▸ Pie
▸ Pie3D
▸ Polar
▸ Radar
▸ Scatter
▸ Series
▸ StackedCartesian
▸ sprite
▸ Label
▸ theme
▸ Base
▸ Default
▸ AbstractChart
▸ CartesianChart
▸ MarkerHolder
▸ Markers
▸ PolarChart
▸ SpaceFillingChart
▸ d3
▸ axis
▸ Axis
▸ Color
▸ Data
▸ canvas
▸ Canvas
▸ HiDPI
▸ hierarchy
▸ partition
▸ Icicle
▸ Partition
▸ Sunburst
▸ tree
▸ HorizontalTree
▸ Tree
▸ Hierarchy
▸ Pack
▸ Partition
▸ Tree
▸ TreeMap
▸ interaction
▸ Abstract
▸ PanZoom
▸ legend
▸ Color
▸ Legend
▸ mixin
▸ Detached
▸ ToolTip
▸ svg
▸ Svg
▸ Component
▸ HeatMap
▸ Helpers
▸ data
▸ amf
▸ Encoder
▸ Packet
▸ Proxy
▸ Reader
▸ RemotingMessage
▸ XmlDecoder
▸ XmlEncoder
▸ field
▸ Boolean
▸ Date
▸ Field
▸ Integer
▸ Number
▸ String
▸ flash
▸ BinaryXhr
▸ identifier
▸ Generator
▸ Negative
▸ Sequential
▸ Uuid
▸ matrix
▸ Matrix
▸ Side
▸ Slice
▸ operation
▸ Create
▸ Destroy
▸ Operation
▸ Read
▸ Update
▸ proxy
▸ Ajax
▸ Client
▸ Direct
▸ JsonP
▸ LocalStorage
▸ Memory
▸ Proxy
▸ Rest
▸ Server
▸ SessionStorage
▸ WebStorage
▸ reader
▸ Array
▸ Json
▸ Reader
▸ Xml
▸ request
▸ Ajax
▸ Base
▸ Form
▸ schema
▸ Association
▸ HasMany
▸ HasOne
▸ ManyToMany
▸ ManyToOne
▸ Namer
▸ OneToOne
▸ Reference
▸ Role
▸ Schema
▸ session
▸ BatchVisitor
▸ ChangesVisitor
▸ ChildChangesVisitor
▸ soap
▸ Proxy
▸ Reader
▸ validator
▸ Bound
▸ Email
▸ Exclusion
▸ Format
▸ Inclusion
▸ Length
▸ List
▸ Presence
▸ Range
▸ Validator
▸ writer
▸ Json
▸ Writer
▸ Xml
▸ AbstractStore
▸ ArrayStore
▸ Batch
▸ BufferedStore
▸ ChainedStore
▸ Connection
▸ DirectStore
▸ Error
▸ ErrorCollection
▸ JsonP
▸ JsonPStore
▸ JsonStore
▸ LocalStore
▸ Model
▸ ModelManager
▸ NodeInterface
▸ NodeStore
▸ PageMap
▸ ProxyStore
▸ Request
▸ ResultSet
▸ Session
▸ SortTypes
▸ Store
▸ StoreManager
▸ TreeModel
▸ TreeStore
▸ Types
▸ Validation
▸ XmlStore
▸ dataview
▸ component
▸ Container
▸ DataItem
▸ element
▸ Container
▸ List
▸ plugin
▸ ItemTip
▸ DataView
▸ IndexBar
▸ ItemHeader
▸ List
▸ ListItem
▸ ListItemBody
▸ ListItemDisclosure
▸ NestedList
▸ SimpleListItem
▸ direct
▸ AmfRemotingProvider
▸ Event
▸ ExceptionEvent
▸ JsonProvider
▸ Manager
▸ PollingProvider
▸ Provider
▸ RemotingEvent
▸ RemotingMethod
▸ RemotingProvider
▸ Transaction
▸ dom
▸ CompositeElement
▸ CompositeElementLite
▸ Element
▸ ElementEvent
▸ Fly
▸ GarbageCollector
▸ Helper
▸ Query
▸ Shadow
▸ Shim
▸ TouchAction
▸ Underlay
▸ UnderlayPool
▸ drag
▸ proxy
▸ None
▸ Original
▸ Placeholder
▸ Constraint
▸ Info
▸ Item
▸ Manager
▸ Source
▸ Target
▸ draw
▸ engine
▸ SvgContext
▸ Gradient
▸ Canvas
▸ excanvas
▸ Svg
▸ gradient
▸ Gradient
▸ GradientDefinition
▸ Linear
▸ Radial
▸ modifier
▸ Animation
▸ Highlight
▸ Modifier
▸ Target
▸ overrides
▸ hittest
▸ sprite
▸ Instancing
▸ Path
▸ Path
▸ Surface
▸ plugin
▸ SpriteEvents
▸ sprite
▸ AnimationParser
▸ Arc
▸ Arrow
▸ AttributeDefinition
▸ AttributeParser
▸ Circle
▸ Composite
▸ Cross
▸ Diamond
▸ Ellipse
▸ EllipticalArc
▸ Image
▸ Instancing
▸ Line
▸ Path
▸ Plus
▸ Rect
▸ Sector
▸ Sprite
▸ Square
▸ Text
▸ Tick
▸ Triangle
▸ Animator
▸ Container
▸ Draw
▸ LimitedCache
▸ Matrix
▸ Path
▸ PathUtil
▸ Point
▸ SegmentTree
▸ Surface
▸ SurfaceBase
▸ TextMeasurer
▸ TimingFunctions
▸ env
▸ Browser
▸ OS
▸ Ready
▸ event
▸ gesture
▸ DoubleTap
▸ Drag
▸ EdgeSwipe
▸ LongPress
▸ MultiTouch
▸ Pinch
▸ Recognizer
▸ Rotate
▸ SingleTouch
▸ Swipe
▸ Tap
▸ publisher
▸ Dom
▸ ElementPaint
▸ ElementSize
▸ Focus
▸ Gesture
▸ Publisher
▸ Event
▸ exporter
▸ data
▸ Base
▸ Cell
▸ Column
▸ Group
▸ Row
▸ Table
▸ excel
▸ Xlsx
▸ Xml
▸ file
▸ excel
▸ Cell
▸ Column
▸ Row
▸ Style
▸ Table
▸ Workbook
▸ Worksheet
▸ html
▸ Doc
▸ Style
▸ ooxml
▸ excel
▸ Border
▸ BorderPr
▸ Cell
▸ CellAlignment
▸ CellStyleXf
▸ CellXf
▸ Column
▸ Fill
▸ Font
▸ NumberFormat
▸ Row
▸ SharedStrings
▸ Sheet
▸ Stylesheet
▸ Workbook
▸ Worksheet
▸ Base
▸ ContentType
▸ ContentTypes
▸ CoreProperties
▸ Excel
▸ Relationship
▸ Relationships
▸ zip
▸ Archive
▸ File
▸ Folder
▸ Base
▸ Style
▸ text
▸ CSV
▸ Html
▸ TSV
▸ Base
▸ File
▸ Plugin
▸ field
▸ trigger
▸ Clear
▸ Date
▸ Expand
▸ Reveal
▸ Search
▸ SpinDown
▸ SpinUp
▸ Trigger
▸ Checkbox
▸ DatePicker
▸ DatePickerNative
▸ Email
▸ Field
▸ File
▸ FileInput
▸ Hidden
▸ Input
▸ Number
▸ Password
▸ Picker
▸ Radio
▸ Search
▸ Select
▸ SingleSlider
▸ Slider
▸ Spinner
▸ Text
▸ TextArea
▸ TextAreaInput
▸ TextInput
▸ Toggle
▸ Url
▸ form
▸ FieldContainer
▸ FieldSet
▸ Panel
▸ fx
▸ animation
▸ Abstract
▸ Cube
▸ Fade
▸ FadeOut
▸ Flip
▸ Pop
▸ PopOut
▸ Slide
▸ SlideOut
▸ Wipe
▸ WipeOut
▸ easing
▸ Abstract
▸ Bounce
▸ BoundMomentum
▸ EaseIn
▸ EaseOut
▸ Easing
▸ Linear
▸ Momentum
▸ layout
▸ card
▸ Abstract
▸ Cover
▸ Cube
▸ Fade
▸ Flip
▸ Pop
▸ Reveal
▸ Scroll
▸ ScrollCover
▸ ScrollReveal
▸ Slide
▸ Style
▸ Card
▸ runner
▸ Css
▸ CssAnimation
▸ CssTransition
▸ Animation
▸ Runner
▸ State
▸ google
▸ data
▸ AbstractProxy
▸ CalendarsProxy
▸ EventsProxy
▸ ux
▸ Client
▸ grid
▸ cell
▸ Base
▸ Boolean
▸ Cell
▸ Check
▸ Date
▸ Expander
▸ Number
▸ RowNumberer
▸ Summary
▸ Text
▸ Tree
▸ Widget
▸ column
▸ Boolean
▸ Check
▸ Column
▸ Date
▸ Number
▸ RowNumberer
▸ Selection
▸ Tree
▸ plugin
▸ ColumnResizing
▸ Editable
▸ Exporter
▸ MultiSelection
▸ PagingToolbar
▸ RowExpander
▸ SummaryRow
▸ ViewOptions
▸ Grid
▸ HeaderContainer
▸ HeaderGroup
▸ PagingToolbar
▸ Row
▸ RowBody
▸ RowHeader
▸ Tree
▸ layout
▸ wrapper
▸ BoxDock
▸ Dock
▸ Inner
▸ Abstract
▸ Box
▸ Card
▸ Default
▸ Fit
▸ FlexBox
▸ Float
▸ HBox
▸ VBox
▸ list
▸ AbstractTreeItem
▸ RootTreeItem
▸ Tree
▸ TreeItem
▸ mixin
▸ Accessible
▸ Bindable
▸ ComponentDelegation
▸ ConfigState
▸ Container
▸ Dirty
▸ Factoryable
▸ Hookable
▸ Identifiable
▸ Inheritable
▸ Keyboard
▸ Mashup
▸ Observable
▸ Pluggable
▸ Progressable
▸ Queryable
▸ Responsive
▸ Selectable
▸ StyleCacher
▸ Templatable
▸ Traversable
▸ panel
▸ Header
▸ Title
▸ Tool
▸ parse
▸ symbol
▸ Constant
▸ Infix
▸ InfixRight
▸ Paren
▸ Prefix
▸ Parser
▸ Symbol
▸ Tokenizer
▸ perf
▸ Accumulator
▸ Monitor
▸ picker
▸ Date
▸ Picker
▸ Slot
▸ pivot
▸ axis
▸ Base
▸ Item
▸ Local
▸ cell
▸ Cell
▸ Group
▸ dimension
▸ Item
▸ feature
▸ PivotStore
▸ filter
▸ Base
▸ Label
▸ Value
▸ matrix
▸ Base
▸ Local
▸ Remote
▸ plugin
▸ configurator
▸ model
▸ Select
▸ store
▸ Select
▸ Column
▸ Container
▸ DragZone
▸ DropZone
▸ Field
▸ FieldSettings
▸ Form
▸ FormController
▸ Panel
▸ PanelController
▸ rangeeditor
▸ Panel
▸ PanelController
▸ Configurator
▸ DrillDown
▸ Exporter
▸ RangeEditor
▸ result
▸ Base
▸ Collection
▸ Local
▸ update
▸ Base
▸ Increment
▸ Overwrite
▸ Percentage
▸ Uniform
▸ Aggregators
▸ Grid
▸ MixedCollection
▸ Row
▸ plugin
▸ field
▸ PlaceHolderLabel
▸ Abstract
▸ LazyItems
▸ ListPaging
▸ MouseEnter
▸ PullRefresh
▸ Responsive
▸ SortableList
▸ promise
▸ Consequence
▸ Deferred
▸ Promise
▸ scroll
▸ Scroller
▸ slider
▸ Slider
▸ Thumb
▸ Toggle
▸ sparkline
▸ Bar
▸ BarBase
▸ Base
▸ Box
▸ Bullet
▸ CanvasBase
▸ CanvasCanvas
▸ Discrete
▸ Line
▸ Pie
▸ RangeMap
▸ Shape
▸ TriState
▸ VmlCanvas
▸ tab
▸ Bar
▸ Panel
▸ Tab
▸ table
▸ Table
▸ tip
▸ Manager
▸ Tip
▸ ToolTip
▸ util
▸ paintmonitor
▸ Abstract
▸ CssAnimation
▸ OverflowChange
▸ sizemonitor
▸ Abstract
▸ OverflowChange
▸ Scroll
▸ TaskRunner
▸ Task
▸ translatable
▸ Abstract
▸ CssPosition
▸ CssTransform
▸ Dom
▸ ScrollParent
▸ ScrollPosition
▸ AbstractMixedCollection
▸ Audio
▸ Bag
▸ Base64
▸ BufferedCollection
▸ Cache
▸ Collection
▸ CollectionKey
▸ Color
▸ CSS
▸ CSV
▸ DelayedTask
▸ DelimitedValue
▸ Draggable
▸ Droppable
▸ Event
▸ Filter
▸ FilterCollection
▸ Fly
▸ Format
▸ Geolocation
▸ Group
▸ GroupCollection
▸ Grouper
▸ HashMap
▸ History
▸ Inflector
▸ InputBlocker
▸ ItemCollection
▸ LineSegment
▸ LocalStorage
▸ LruCache
▸ MixedCollection
▸ ObjectTemplate
▸ Observable
▸ Offset
▸ Operators
▸ PaintMonitor
▸ Point
▸ Positionable
▸ PositionMap
▸ Region
▸ Schedulable
▸ Scheduler
▸ SizeMonitor
▸ Sortable
▸ Sorter
▸ SorterCollection
▸ TapRepeater
▸ TaskManager
▸ TextMetrics
▸ Translatable
▸ TranslatableGroup
▸ TranslatableList
▸ TSV
▸ Wrapper
▸ XTemplateCompiler
▸ XTemplateParser
▸ ux
▸ ajax
▸ DataSimlet
▸ JsonSimlet
▸ PivotSimlet
▸ Simlet
▸ SimManager
▸ SimXhr
▸ XmlSimlet
▸ event
▸ Driver
▸ Maker
▸ Player
▸ Recorder
▸ google
▸ Api
▸ Feeds
▸ Gauge
▸ viewport
▸ Android
▸ Default
▸ Ios
▸ Viewport
▸ WindowsPhone
▸ AbstractComponent
▸ AbstractManager
▸ ActionSheet
▸ Ajax
▸ Anim
▸ AnimationQueue
▸ anims
▸ Array
▸ Assert
▸ Audio
▸ Base
▸ browser
▸ Button
▸ Class
▸ ClassManager
▸ Component
▸ ComponentManager
▸ ComponentQuery
▸ Config
▸ Configurator
▸ Container
▸ Date
▸ Decorator
▸ Deferred
▸ Error
▸ Evented
▸ Factory
▸ feature
▸ Function
▸ GlobalEvents
▸ Glyph
▸ Img
▸ Inventory
▸ JSON
▸ Label
▸ Loader
▸ LoadMask
▸ Mask
▸ Media
▸ MessageBox
▸ Mixin
▸ Msg
▸ Number
▸ Object
▸ os
▸ Panel
▸ Progress
▸ ProgressBase
▸ Promise
▸ SegmentedButton
▸ Sheet
▸ Sortable
▸ Spacer
▸ String
▸ supports
▸ TaskQueue
▸ Template
▸ Title
▸ Titlebar
▸ TitleBar
▸ Toast
▸ Toolbar
▸ Version
▸ Video
▸ Viewport
▸ Widget
▸ XTemplate
▸ Array
▸ Boolean
▸ CanvasRenderingContext2D
▸ CanvasRenderingContext2D_
▸ Date
▸ Function
▸ Global_CSS
▸ Number
▸ Object
▸ RegExp
▸ String
▸ Getting Started
▸ Setup & Getting Started
▸ Ext JS - FAQ
▸ Sample Login App
▸ API Diffs
▸ Modern - 6.0.2 and 6.2.0
▸ Classic - 6.0.2 and 6.2.0
▸ Examples
▸ 6.2.0 Examples
▸ What's New?
▸ Release Notes
▸ Core Concepts
▸ The Class System
▸ Layouts and Containers
▸ Components
▸ Data Package
▸ Events and Gestures
▸ Drag and Drop
▸ Theming System
▸ Material Theme
▸ Memory Management
▸ Draw Package
▸ Draw Package
▸ Creating Images - Pt 1
▸ Creating Images - Pt 2
▸ Creating Images - Pt 3
▸ Accessibility
▸ Localization
▸ Right to Left in Ext JS
▸ Sencha Font Packages
▸ Tablet Support
▸ Architecture
▸ Intro to App Architecture
▸ Multiple Screens
▸ View Controllers
▸ View Models & Binding
▸ View Model Internals
▸ Using the Router
▸ UI Components
▸ Carousel
▸ Forms
▸ Introduction to Charting
▸ Trees
▸ Grids
▸ Pivot Grid
▸ Widgets and Widget Cols
▸ Backend Connectors
▸ SOAP Services
▸ AMF Data Sources
▸ Ext Direct
▸ Ext Direct Specification
▸ Using MySQL and PHP
▸ Other Resources
▸ Basics of OOP
▸ Ext JS Ecosystem
▸ From the Sencha Blog
▸ Supported Browsers
top

# Ext Direct Specification

## Overview

Ext Direct is a platform and language agnostic remote procedure call (RPC) protocol. Ext Direct allows for seamless communication between the client side of an Ext JS application and any server platform that conforms to the specification. Ext Direct is stateless and lightweight, supporting features like API discovery, call batching, and server to client events.

## Conventions

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.

Ext Direct is partially based on JSON (see http://www.json.org or RFC 4627 ), and utilizes HTML Form-based File Uploads ( RFC 1867, RFC 2388 ).

## API discovery

Server MAY support publishing its API to Clients via API discovery mechanism. If API discovery is supported the Server MUST respond to HTTP GET requests at preconfigured URI, returning a document with a correct content type for the browser to interpret this document as JavaScript code.

### API declaration

The Server API declaration MUST be valid JavaScript code that results in creation of a set of nested Objects assigned to a variable that can later be passed to Ext Direct initialization code in the Client application. It is RECOMMENDED that the code also conforms to stricter rules of JSON object syntax, for the benefit of non-JavaScript implementations that might try to parse the API declarations as JSON.

An example of API declaration code:

Sample Code

    var Ext = Ext || {};
    Ext.REMOTING_API = {
        "id": "provider1",
        "url": "ext/direct/router",
        "type": "remoting",
        "actions": {
            "Album": [{
                "name": "getAll",
                "len": 0
            }, {
                "name": "add",
                "params": ["name", "artist"],
                "strict": false
            }, {
                "name": "delete",
                "len": 1
            }]
        }
    };

### API declaration properties

The JavaScript Object of the API declaration MUST contain the following mandatory properties:

- `url` - The Service URI for this API.
- `type` - MUST be either `remoting` for Remoting API, or `polling` for Polling API.
- `actions` - A JavaScript Object listing all Actions and Methods available for a given Remoting API. MUST be omitted in Polling API declarations.

The API declaration MAY also contain the following OPTIONAL properties:

- `id` - The identifier for the Remoting API Provider. This is useful when there are more than one API in use.
- `namespace` - The Namespace for the given Remoting API.
- `timeout` - The number of milliseconds to use as the timeout for every Method invocation in this Remoting API.

Any other properties are OPTIONAL.

### Action and Method declarations

Each Action within the `actions` property of the API declaration is an Array of Objects that represent Methods. Actions do not have properties in themselves. Action names MAY be nested, i.e. an Action may contain other Actions as well as Methods.

Method declaration MUST have the following properties:

- `name` - The name of this Method. MUST be unique within its Action.

Each Method is fully qualified by Action and Method names concatenated with dot character (.), prefixed by optional Namespace:

Sample Code

    [Namespace.]Foo.Bar.baz

Where `Foo` is outer Action name, `Bar` is inner Action name, and `baz` is the Method name.

#### Method calling conventions

Method declaration MUST have one of the following mutually exclusive properties that describe the Method's calling convention:

- `len` - The number of arguments required for Ordered Methods. This number MAY be 0 for Methods that do not accept arguments.
- `params` - An array of parameters supported by a Named Method. This array MAY be empty.
- `formHandler` - A JavaScript Boolean value of `true` indicates that this Method accepts Form submits.

Ordered Methods MUST always conform to their calling convention. When Remoting Method proxy function is called for an Ordered Method, it MUST be supplied with exactly the number of arguments required, in exactly the same order as required by the Method. If less than required number of arguments is passed, the Router MAY choose to return an Exception without invoking the actual Method.

Named Methods MAY use `strict` property to control how the arguments will be checked and passed to the Server when a Method is called:

- When `strict` is set to `true`, only arguments with names listed in the `params` array are sent to the Server; any other arguments are discarded. This is the default behavior.
- When `strict` is set to `false`, all arguments are passed to the Server. The Router SHOULD pass all arguments to the actual Method.

The Router MAY choose to return an Exception if some of the listed parameters are missing, and omit invoking the actual Method. If the `params` Array is empty and `strict` property is set to `false`, the Router MUST NOT perform any argument checks and MUST pass all arguments to the invoked Method.

An example of a Named Method with all optional parameters:

Sample Code

    "actions": {
        "TestAction": [{
            "name": "named_no_strict",
            "params": [],
            "strict": false
        }]
    }

#### Call metadata

Method declaration MAY contain the optional `metadata` property that defines the type of Call Metadata accepted by the Method. If the `metadata` property is not present in Method declaration, the Client MUST NOT send call metadata to the Server for any invocation of that Method.

The `metadata` property, if present, MUST be a JavaScript object with the following properties:

- `len` - The number of arguments required for by-position Call Metadata. This number MUST be greater than 0.
- `params` - The Array of names of the supported for by-name Call Metadata. This Array MAY be empty.
- `strict` - JavaScript Boolean value that controls how Call Metadata arguments are checked.

When present, Call Metadata arguments MUST conform to their calling convention. Call Metadata calling convention MAY be different from the main Method arguments calling convention, e.g. an Ordered Method MAY accept by-name Call Metadata, or Named Method MAY accept by-position Call Metadata.

The argument checks are performed the same way as with main Method arguments.

Some examples of Method declarations accepting Call Metadata:

Sample Code

    "actions": {
        "TestAction": [{
            "name": "meta1",
            "len": 0,
            "metadata": {
                "len": 1
            }
        }, {
            "name": "meta2",
            "len": 1,
            "metadata": {
                "params": ["foo", "bar"],
                "strict": false
            }
        }, {
            "name": "meta3",
            "params": [],
            "strict": false,
            "metadata": {
                "len": 3
            }
        }, {
            "name": "meta4",
            "params": ["foo", "bar"],
            "metadata": {
                "params": ["baz", "qux"]
            }
        }]
    }

### Polling API declaration

Declaring Polling API is OPTIONAL. If the Server implements more than one Event Provider, it is RECOMMENDED to include Polling API declarations along with Remoting API declaration in the same JavaScript document.

An example of API declaration with one Remoting API and one Polling API:

Sample Code

    var Ext = Ext || {};
    Ext.REMOTING_API = {
        "id": "provider1",
        "type": "remoting",
        "url": "ext/direct/router",
        "actions": {
            "User": [{
                "name": "read",
                "len": 1
            }, {
                "name": "create",
                "params": ["id", "username"]
            }]
        }
    };
    Ext.POLLING_API = {
        "id": "provider2",
        "type": "polling",
        "url": "ext/direct/events"
    };

## Remoting function calls

A remoting call is represented by sending a Request object, or multiple Request objects, to a Server. Request(s) are encoded in JSON and are sent as raw payload in a HTTP POST request to the Service URI advertised as the `url` in API Declaration. There MUST not be any other data present in the HTTP POST, except valid JSON document containing one or more Requests. Among HTTP headers for the POST request, there MUST be the Content-Type header with the value of "application/json". The Client MUST use UTF-8 character encoding for the Request document.

### Remoting function call requests

A Request is an Object with the following members:

- `type` – MUST be a string "rpc".
- `tid` – The transaction id for this Request. MUST be an integer number unique among the Requests in one batch.
- `action` – The Action that the invoked Method belongs to. MUST be specified.
- `method` – The Remoting Method that is to be invoked. MUST be specified.
- `data` – A set of arguments to be passed to the called Remoting Method. MUST be either `null` for Methods that accept 0 (zero) parameters, an Array for Ordered methods, or an Object for Named methods.
- `metadata` - OPTIONAL set of meta-arguments to be made available to the called Remoting Method, if provided by the Client. If no metadata is associated with the call, this member MUST NOT be present in the Request.

A typical JSON encoded Request Object for an Ordered Method may look like this:

Sample Code

    {"type":"rpc","tid":1,"action":"Foo","method":"bar","data":[42,"baz"]}

A typical JSON encoded Request object for a Named Method may look like this:

Sample Code

    {"type":"rpc","tid":2,"action":"Foo","method":"qux","data":{"foo":"bar"}}

A typical JSON encoded Request object for an Ordered Method with by-name Call Metadata may look like this:

Sample Code

    {"type":"rpc","tid":3,"action":"Foo","method":"fred","data":[0],
     "metadata":{"borgle":"throbbe"}}

Remoting Requests MAY be batched, in which case the Requests MUST be sent as an Array of Request Objects with unique `tid` members:

Sample Code

    [
        {"type":"rpc","tid":3,"action":"Foo","method":"frob","data":["foo"]},
        {"type":"rpc","tid":4,"action":"Foo","method":"blerg","data":["qux"]}
    ]

The Server MUST support Request batching, and SHOULD attempt to return call invocation Results or Exceptions in the same order.

### Remoting responses

A response to a Remoting call MUST contain either a Result, or an Exception for each Request. Responses are encoded in JSON and returned to the Client as raw HTTP response payload, with Content-Type header of "application/json" and character encoding of UTF-8.

If Requests were sent as a batch the Server MUST return the corresponding Responses only after all Requests were processed by the Router, and the Responses SHOULD follow the same order as the original Requests. For each Response, the corresponding `tid` member of the original Request MUST be passed back unchanged by the Server.

#### Remoting call Result

A Result is an Object with the following members:

- `type` — MUST be a string "rpc".
- `tid` — The transaction id for this Response. MUST be the same as in the original Request.
- `action` — The Action to which the invoked Method belongs to. MUST be the same as in the original Request.
- `method` — The name of the invoked Remoting Method. MUST be the same as in the original Request.
- `result` — The data returned by the Method. MUST be present in the Response object, but MAY be `null` for Methods that do not return any data.

A typical JSON encoded Array of Response objects may look like this:

Sample Code

    [
        {"type":"rpc","tid":1,"action":"Foo","method":"bar","result":0},
        {"type":"rpc","tid":2,"action":"Foo","method":"baz","result":null}
    ]

#### Remoting call Exception

An Exception is an Object with the following members:

- `type` — MUST be a string "exception".
- `tid` — The transaction id for this Response. MUST be the same as in the original Request.
- `action` — The Action to which the invoked Method belongs to. MUST be the same as in the original Request.
- `method` — The name of the invoked Remoting Method. MUST be the same as in the original Request.
- `message` — The error message. MUST be present.
- `where` — OPTIONAL description of where exactly the exception was raised. MAY contain stack trace, or additional information.

A typical JSON encoded Exception may look like this:

Sample Code

    {
        "type": "exception",
        "tid": 3,
        "action": "Foo",
        "method": "frob",
        "message": "Division by zero",
        "where": "... stack trace here ..."
    }

### Remoting form submission

A remoting form invocation is represented by submitting an HTML form with HTTP POST request. The form content MUST conform to (HTML 4.01 specification)[5]. The Server MUST support both "application/x-www-form-urlencoded" and "multipart/form-data" content types for backwards compatibility. The Client MAY choose to implement only "multipart/form-data" encoding.

There MUST be only one Method invocation per submitted form. The Client MUST use form submission for each Method with Form Handler calling convention declared in Remoting API.

#### Remoting form requests

The form SHALL contain the following fields:

- `extType` - MUST be a string "rpc".
- `extTID` - The transaction id for this Request. MUST be an integer number unique among the Requests in one batch.
- `extAction` - The Action that the invoked Method belongs to. MUST be specified.
- `extMethod` - The Remoting Method that is to be invoked. MUST be specified.
- `extUpload` - Stringified Boolean value (`"true"` or `"false"`) indicating that file uploads are attached to this form submission.

The form MAY contain the `metadata` field if there is Call Metadata associated with the given form submission.

The form MAY contain other fields in addition to the mandatory ones listed above. These additional fields MUST be passed to the invoked Method as Named arguments.

When the form is used to upload files, encoding type MUST be "multipart/form-data".

#### Remoting form responses

The Server MUST respond to the form submission with a JSON document containing a valid Response or Exception object as described in sections 4.2.1 and 4.2.2. The document MUST have content type of "application/json" and UTF-8 character encoding.

#### Remoting file upload responses

When the form request contained one or more file uploads, the Server MUST return a valid HTML document with correct content type for the browser to interpret this document as HTML. The document MUST have UTF-8 character encoding.

The HTML document MUST contain a valid JSON encoded Response or Exception as described in sections 4.2.1 and 4.2.2, enclosed in HTML `<textarea>` tags.

An example of a file upload response may look like this:

Sample Code

    <!DOCTYPE html>
    <html>
        <head>
            <title>File upload response</title>
        </head>
        <body>
            <textarea>{JSON RESPONSE HERE}</textarea>
        </body>
    </html>

## Event polling

The Server MAY implement OPTIONAL event polling mechanism. Event polling is performed by periodically making HTTP GET requests to the Server. There MAY be more than one Event Provider per Server; in that case each Event Provider MUST have a separate Service URI.

### Event poll request

An event poll request in its basic form is an HTTP GET request to the Service URI of the polled Event Provider. The Server MUST maintain a list of active Poll Handler methods for every Event Provider, and invoke each Poll Handler method every time a poll request is made. The Server MAY support passing arguments to Poll Handler methods via HTTP GET request URI but it is not required.

#### Event poll response

An event poll response MUST be a valid JSON document with a correct content type for the browser to interpret this document as JSON. The document MUST use UTF-8 character encoding.

The event poll response should contain an array of Event objects. This array MAY be empty if no Events are pending for the given request. The Server MUST NOT include Exception objects in the response array.

#### Event object

An event object MUST contain the following properties:

- `type` - MUST be a string "event".
- `name` - Event name, MUST be a string.
- `data` - Event data, SHOULD be any valid JSON data.

An example of a typical Event object:

Sample Code

    {
        "type": "event",
        "name": "progressupdate",
        "data": {
            "processId": 42,
            "progress": 100
        }
    }

## Terminology

Ext Direct makes use of the following terms:

- Server — A computing system that provides functions to be executed remotely by a Client.
- Client — A computing system that remotely calls Server functions and receives Results and/or Exceptions.
- Server API — Description of Server functions exposed to the Client.
- API Declaration — JavaScript chunk that encodes Server API. API declaration is usually generated dynamically by the Server and retrieved by the Client once upon startup; API declaration can also be embedded in the Client application code.
- Remoting API — The main part of the API Declaration, it enumerates Server Actions and Methods available to the Client, as well as their calling conventions, and other parameters.
- Polling API — Optional part of the API Declaration, may be used to declare the existence of Server Event Providers and their credentials.
- API Discovery URI — A preconfigured URI on the Server that the Client should dispatch HTTP GET requests to in order to retrieve the API declaration. This URI is OPTIONAL and MAY be omitted if dynamic API discovery is not used in a particular application.
- Service URI — A preconfigured URI on the Server that the Client will use to dispatch remoting requests to a Router, or polling requests to an Event Provider. Each Router or Event Provider MUST publish a Service URI that is unique to that Router or Event Provider.
- Namespace — The global object in which the nested Action objects with corresponding Remoting Method stubs will be created. OPTIONAL; if not defined in the API declaration then the default `window` object will be used.
- Action — Namespace unit; a collection of Methods. Actions MAY be nested, and MAY be placed in a global Namespace. An Action can be thought of as a class exposing Methods.
- Remoting Method — A Server function that can be called remotely by the Client. A Method always belongs to an Action, and is fully qualified by combining Namespace, Action, and Method names: `[Namespace.]Action.Method`.
- Remoting Method proxy — A stub JavaScript function created by the Ext Direct Client side stack in lieu of the actual Method that only exists on the Server. A separate proxy function will be created for each Method, with the parameter signature conforming to Method's API declaration.
- Ordered Method — A Remoting Method that accepts zero or more parameters in ordered fashion, or by position (as in a list).
- Named Method — A Remoting Method that accepts parameters by name, as in associative array (hash, Object, map).
- Form Handler Method — A Remoting Method that accepts form submits. This is a legacy mechanism that can be used to upload files in browsers not conformant with XMLHttpRequest Level 2 specification.
  Implementing support for Form Handlers is OPTIONAL for a Server; if such support is not provided, the Server SHALL NOT advertise Methods as using Form Handler calling convention.
- Poll Handler — A Server function that is called by an Event Provider to return the list of Events to be passed on to the Client as the result of a periodic event poll.
- Call Metadata - An OPTIONAL extra set of arguments that could be passed to the Method. Metadata is related to the main arguments but is not the same and is handled separately. A common use case is passing database information such as table name for CRUD operations.
- Router — Server component that receives remoting function call requests at its Service URI, runs the actual functions, and collects Results or Exceptions to be returned to the Client.
- Event Provider — Server component that receives periodic polling requests at its Service URI, runs Poll Handler functions registered with this Event Provider, collects Events returned by the Poll Handlers, and returns the list of Events to the Client.
- Request — A Remoting Method invocation requested by the Client, passing the arguments conformant to the Method's calling convention.
- Response — Information about the Request completion. MUST be either a Result, or an Exception.
- Result — Any data returned by a Remoting Method upon successful or unsuccessful call completion. A Result is OPTIONAL and may be omitted if the Method is not supposed to return any data.
- Exception — A fatal error, application logic error, or other unrecoverable event in the application code.
- Event — A notification that can be generated by a Poll Handler and passed to the Client. Events are useful for application status updates, progress indicators, and other predictable conditions and events.
- Batching - Combining several Requests into one packet sent to the Server, instead of sending each Request separately.

## References

- RFC 2119
- RFC 4627
- RFC 1867
- RFC 2388

## Ext JS 6.2.0 - Modern Toolkit

## Ext JS

### 6.x

6.2.0 EA (classic) (modern)
6.0.2 (classic) (modern)
6.0.1 (classic) (modern)
6.0.0 (classic) (modern)

### 5.x

5.1.3 5.1.2 5.1.1 5.1.0 5.0.1 5.0.0

### 4.x

4.2.5 4.1.3 4.0.7

### 3.x

3.4.0

## Sencha Test

Sencha Test

## Cmd

Cmd

## GXT

4.x 3.x

## IDE Plugins

IDE Plugins

## Sencha Inspector

Sencha Inspector

## Architect

Architect 3 Architect 4 EA

## Touch

### 2.x

Touch 2.4 Touch 2.3 Touch 2.2 Touch 2.0

## Web Application Manager

Web Application Manager
Current Product / Version
All
Show product details in the history bar