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.

String 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

# String

### Hierarchy

String

## Summary

String is a global object that may be used to construct String instances.

String objects may be created by calling the constructor `new String()`. The String object wraps JavaScript's string primitive data type with the methods described below. The global function `String()` can also be called without new in front to create a primitive string. String literals in JavaScript are primitive strings.

Because JavaScript automatically converts between string primitives and String objects, you can call any of the methods of the String object on a string primitive. JavaScript automatically converts the string primitive to a temporary String object, calls the method, then discards the temporary String object. For example, you can use the `String.length` property on a string primitive created from a string literal:

Sample Code

    s_obj = new String(s_prim = s_also_prim = "foo");

    s_obj.length;       // 3
    s_prim.length;      // 3
    s_also_prim.length; // 3
    'foo'.length;       // 3
    "foo".length;       // 3

(A string literal is denoted with single or double quotation marks.)

String objects can be converted to primitive strings with the valueOf method.

String primitives and String objects give different results when evaluated as JavaScript. Primitives are treated as source code; String objects are treated as a character sequence object. For example:

Sample Code

    s1 = "2 + 2";               // creates a string primitive
    s2 = new String("2 + 2");   // creates a String object
    eval(s1);                   // returns the number 4
    eval(s2);                   // returns the string "2 + 2"
    eval(s2.valueOf());         // returns the number 4

# Character access

There are two ways to access an individual character in a string. The first is the charAt method:

Sample Code

    return 'cat'.charAt(1); // returns "a"

The other way is to treat the string as an array, where each index corresponds to an individual character:

Sample Code

    return 'cat'[1]; // returns "a"

The second way (treating the string as an array) is not part of ECMAScript 3. It is a JavaScript and ECMAScript 5 feature.

In both cases, attempting to set an individual character won't work. Trying to set a character through charAt results in an error, while trying to set a character via indexing does not throw an error, but the string itself is unchanged.

# Comparing strings

C developers have the `strcmp()` function for comparing strings. In JavaScript, you just use the less- than and greater-than operators:

Sample Code

    var a = "a";
    var b = "b";
    if (a < b) // true
        print(a + " is less than " + b);
    else if (a > b)
        print(a + " is greater than " + b);
    else
        print(a + " and " + b + " are equal.");

A similar result can be achieved using the localeCompare method inherited by String instances.

Documentation for this class comes from MDN and is available under Creative Commons: Attribution-Sharealike license.
No members found using the current filters

## properties

String
view source

## length : Number

Reflects the length of the string.

This property returns the number of code units in the string. UTF-16, the string format used by JavaScript, uses a single 16-bit code unit to represent the most common characters, but needs to use two code units for less commonly-used characters, so it's possible for the value returned by length to not match the actual number of characters in the string.

For an empty string, length is 0.

Sample Code

    var x = "Netscape";
    var empty = "";

    console.log("Netspace is " + x.length + " code units long");
    console.log("The empty string is has a length of " + empty.length); // should be 0

## methods

String
view source

## charAt ( index ) : String

Returns the character at the specified index.

Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character in a string called `stringName` is `stringName.length - 1`. If the index you supply is out of range, JavaScript returns an empty string.

The following example displays characters at different locations in the string "Brave new world":

Sample Code

    var anyString="Brave new world";

    document.writeln("The character at index 0 is '" + anyString.charAt(0) + "'");
    document.writeln("The character at index 1 is '" + anyString.charAt(1) + "'");
    document.writeln("The character at index 2 is '" + anyString.charAt(2) + "'");
    document.writeln("The character at index 3 is '" + anyString.charAt(3) + "'");
    document.writeln("The character at index 4 is '" + anyString.charAt(4) + "'");
    document.writeln("The character at index 999 is '" + anyString.charAt(999) + "'");

These lines display the following:

Sample Code

    The character at index 0 is 'B'
    The character at index 1 is 'r'
    The character at index 2 is 'a'
    The character at index 3 is 'v'
    The character at index 4 is 'e'
    The character at index 999 is ''

The following provides a means of ensuring that going through a string loop always provides a whole character, even if the string contains characters that are not in the Basic Multi-lingual Plane.

Sample Code

    var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
    for (var i=0, chr; i < str.length; i++) {
        if ((chr = getWholeChar(str, i)) === false) {continue;} // Adapt this line at the top of

each loop, passing in the whole string and the current iteration and returning a variable to represent the individual character alert(chr); }

Sample Code

    function getWholeChar (str, i) {
        var code = str.charCodeAt(i);

        if (isNaN(code)) {
        return ''; // Position not found
        }
        if (code < 0xD800 || code > 0xDFFF) {
            return str.charAt(i);
        }
        if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F

to treat high private surrogates as single characters) if (str.length <= (i+1)) { throw 'High surrogate without following low surrogate'; } var next = str.charCodeAt(i+1); if (0xDC00 > next || next > 0xDFFF) { throw 'High surrogate without following low surrogate'; } return str.charAt(i)+str.charAt(i+1); } // Low surrogate (0xDC00 <= code && code <= 0xDFFF) if (i === 0) { throw 'Low surrogate without preceding high surrogate'; } var prev = str.charCodeAt(i-1); if (0xD800 > prev || prev > 0xDBFF) { // (could change last hex to 0xDB7F to treat high private surrogates as single characters) throw 'Low surrogate without preceding high surrogate'; } return false; // We can pass over low surrogates now as the second component in a pair which we have already processed }

While the second example may be more frequently useful for those wishing to support non-BMP characters (since the above does not require the caller to know where any non-BMP character might appear), in the event that one does wish, in choosing a character by index, to treat the surrogate pairs within a string as the single characters they represent, one can use the following:

Sample Code

    function fixedCharAt (str, idx) {
        var ret = '';
        str += '';
        var end = str.length;

        var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
        while ((surrogatePairs.exec(str)) != null) {
            var li = surrogatePairs.lastIndex;
            if (li - 2 < idx) {
                idx++;
            }
            else {
            break;
        }
    }

    if (idx >= end || idx < 0) {
        return '';
    }

    ret += str.charAt(idx);

    if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx+1))) {
        ret += str.charAt(idx+1); // Go one further, since one of the "characters" is part of a

surrogate pair } return ret; }

### Parameters

index : Number

An integer between 0 and 1 less than the length of the string.

### Returns

:String

Individual character from string.

String
view source

## charCodeAt ( index ) : Number

Returns a number indicating the Unicode value of the character at the given index.

Unicode code points range from 0 to 1,114,111. The first 128 Unicode code points are a direct match of the ASCII character encoding.

Note that charCodeAt will always return a value that is less than 65,536. This is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. Because of this, in order to examine or reproduce the full character for individual characters of value 65,536 and above, for such characters, it is necessary to retrieve not only `charCodeAt(i)`, but also `charCodeAt(i+1)` (as if examining/reproducing a string with two letters). See example 2 and 3 below.

charCodeAt returns `NaN` if the given index is not greater than 0 or is greater than the length of the string.

Backward Compatibility with JavaScript 1.2

The charCodeAt method returns a number indicating the ISO-Latin-1 codeset value of the character at the given index. The ISO-Latin-1 codeset ranges from 0 to 255. The first 0 to 127 are a direct match of the ASCII character set.

Example 1: Using charCodeAt

The following example returns 65, the Unicode value for A.

"ABC".charCodeAt(0) // returns 65

Example 2: Fixing charCodeAt to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is unknown

This version might be used in for loops and the like when it is unknown whether non-BMP characters exist before the specified index position.

Sample Code

    function fixedCharCodeAt (str, idx) {
        // ex. fixedCharCodeAt ('\uD800\uDC00', 0); // 65536
        // ex. fixedCharCodeAt ('\uD800\uDC00', 1); // 65536
        idx = idx || 0;
        var code = str.charCodeAt(idx);
        var hi, low;
        if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F to treat high private surrogates as single characters)
            hi = code;
            low = str.charCodeAt(idx+1);
            if (isNaN(low)) {
                throw 'High surrogate not followed by low surrogate in fixedCharCodeAt()';
            }
            return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
        }
        if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate
        // We return false to allow loops to skip this iteration since should have already handled

high surrogate above in the previous iteration return false; } return code; }

Example 3: Fixing charCodeAt to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is known

Sample Code

    function knownCharCodeAt (str, idx) {
        str += '';
        var code,
        end = str.length;

        var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
        while ((surrogatePairs.exec(str)) != null) {
            var li = surrogatePairs.lastIndex;
            if (li - 2 < idx) {
                idx++;
            }
            else {
                break;
            }
        }

        if (idx >= end || idx < 0) {
            return NaN;
        }

        code = str.charCodeAt(idx);

        var hi, low;
        if (0xD800 <= code && code <= 0xDBFF) {
            hi = code;
            low = str.charCodeAt(idx+1); // Go one further, since one of the "characters" is part of

a surrogate pair return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000; } return code; }

### Parameters

index : Number

An integer greater than 0 and less than the length of the string; if it is not a number, it defaults to 0.

### Returns

:Number

Value between 0 and 65535.

String
view source

## concat ( strings ) : String

Combines combines the text from one or more strings and returns a new string. Changes to the text in one string do not affect the other string.

The following example combines strings into a new string.

Sample Code

    var hello = "Hello, ";
    console.log(hello.concat("Kevin", " have a nice day.")); // Hello, Kevin have a nice day.

### Parameters

strings : String...

The strings to concatenate.

### Returns

:String

Result of both strings.

String
view source

## constructor ( value )

Creates new String object.

### Parameters

value : Object

The value to wrap into String object.

String
view source

## fromCharCode ( numbers ) : String

Returns a string created by using the specified sequence of Unicode values.

This method returns a string and not a String object.

Because fromCharCode is a static method of String, you always use it as `String.fromCharCode()`, rather than as a method of a String object you created.

Although most common Unicode values can be represented in a fixed width system/with one number (as expected early on during JavaScript standardization) and `fromCharCode()` can be used to return a single character for the most common values (i.e., UCS-2 values which are the subset of UTF-16 with the most common characters), in order to deal with ALL legal Unicode values, `fromCharCode()` alone is inadequate. Since the higher code point characters use two (lower value) "surrogate" numbers to form a single character, `fromCharCode()` can be used to return such a pair and thus adequately represent these higher valued characters.

Be aware, therefore, that the following utility function to grab the accurate character even for higher value code points, may be returning a value which is rendered as a single character, but which has a string count of two (though usually the count will be one).

Sample Code

    // String.fromCharCode() alone cannot get the character at such a high code point
    // The following, on the other hand, can return a 4-byte character as well as the
    //   usual 2-byte ones (i.e., it can return a single character which actually has
    //   a string length of 2 instead of 1!)
    alert(fixedFromCharCode(0x2F804)); // or 194564 in decimal

    function fixedFromCharCode (codePt) {
        if (codePt > 0xFFFF) {
            codePt -= 0x10000;
            return String.fromCharCode(0xD800 + (codePt >> 10), 0xDC00 +
            (codePt & 0x3FF));
        }
        else {
            return String.fromCharCode(codePt);
        }
    }

The following example returns the string "ABC".

Sample Code

    String.fromCharCode(65,66,67)

### Parameters

numbers : Number...

A sequence of numbers that are Unicode values.

### Returns

:String

String containing characters from encoding.

String
view source

## indexOf ( searchValue , fromIndex ) : Number

Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.

Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character of a string called `stringName` is `stringName.length - 1`.

Sample Code

    "Blue Whale".indexOf("Blue")    // returns 0
    "Blue Whale".indexOf("Blute")   // returns -1
    "Blue Whale".indexOf("Whale",0) // returns 5
    "Blue Whale".indexOf("Whale",5) // returns 5
    "Blue Whale".indexOf("",9)      // returns 9
    "Blue Whale".indexOf("",10)     // returns 10
    "Blue Whale".indexOf("",11)     // returns 10

The indexOf method is case sensitive. For example, the following expression returns -1:

Sample Code

    "Blue Whale".indexOf("blue")

Note that '0' doesn't evaluate to true and '-1' doesn't evaluate to false. Therefore, when checking if a specific string exists within another string the correct way to check would be:

Sample Code

    "Blue Whale".indexOf("Blue") != -1 // true
    "Blue Whale".indexOf("Bloe") != -1 // false

The following example uses indexOf and lastIndexOf to locate values in the string "Brave new world".

Sample Code

    var anyString="Brave new world"

    document.write("<P>The index of the first w from the beginning is " + anyString.indexOf("w"))          // Displays 8
    document.write("<P>The index of the first w from the end is " + anyString.lastIndexOf("w"))      // Displays 10
    document.write("<P>The index of 'new' from the beginning is " + anyString.indexOf("new"))        // Displays 6
    document.write("<P>The index of 'new' from the end is " + anyString.lastIndexOf("new"))    // Displays 6

The following example defines two string variables. The variables contain the same string except that the second string contains uppercase letters. The first `writeln` method displays 19. But because the indexOf method is case sensitive, the string "cheddar" is not found in `myCapString`, so the second `writeln` method displays -1.

Sample Code

    myString="brie, pepper jack, cheddar"
    myCapString="Brie, Pepper Jack, Cheddar"
    document.writeln('myString.indexOf("cheddar") is ' + myString.indexOf("cheddar"))
    document.writeln('<P>myCapString.indexOf("cheddar") is ' + myCapString.indexOf("cheddar"))

The following example sets count to the number of occurrences of the letter x in the string str:

Sample Code

    count = 0;
    pos = str.indexOf("x");
    while ( pos != -1 ) {
        count++;
        pos = str.indexOf("x",pos+1);
    }

### Parameters

searchValue : String

A string representing the value to search for.

fromIndex : Number

The location within the calling string to start the search from. It can be any integer between 0 and the length of the string. The default value is 0.

### Returns

:Number

Position of specified value or -1 if not found.

String
view source

## lastIndexOf ( searchValue , fromIndex ) : Number

Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found. The calling string is searched backward, starting at fromIndex.

Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character is `stringName.length - 1`.

Sample Code

    "canal".lastIndexOf("a")   // returns 3
    "canal".lastIndexOf("a",2) // returns 1
    "canal".lastIndexOf("a",0) // returns -1
    "canal".lastIndexOf("x")   // returns -1

The lastIndexOf method is case sensitive. For example, the following expression returns -1:

Sample Code

    "Blue Whale, Killer Whale".lastIndexOf("blue")

The following example uses indexOf and lastIndexOf to locate values in the string "`Brave new world`".

Sample Code

    var anyString="Brave new world"

    // Displays 8
    document.write("<P>The index of the first w from the beginning is " +
    anyString.indexOf("w"))
    // Displays 10
    document.write("<P>The index of the first w from the end is " +
    anyString.lastIndexOf("w"))
    // Displays 6
    document.write("<P>The index of 'new' from the beginning is " +
    anyString.indexOf("new"))
    // Displays 6
    document.write("<P>The index of 'new' from the end is " +
    anyString.lastIndexOf("new"))

### Parameters

searchValue : String

A string representing the value to search for.

fromIndex : Number

The location within the calling string to start the search from, indexed from left to right. It can be any integer between 0 and the length of the string. The default value is the length of the string.

### Returns

:Number
String
view source

## localeCompare ( compareString ) : Number

Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order. Returns -1 if the string occurs earlier in a sort than `compareString`, returns 1 if the string occurs afterwards in such a sort, and returns 0 if they occur at the same level.

The following example demonstrates the different potential results for a string occurring before, after, or at the same level as another:

Sample Code

    alert('a'.localeCompare('b')); // -1
    alert('b'.localeCompare('a')); // 1
    alert('b'.localeCompare('b')); // 0

### Parameters

compareString : String

The string against which the referring string is comparing.

### Returns

:Number

Returns -1 if the string occurs earlier in a sort than compareString, returns 1 if the string occurs afterwards in such a sort, and returns 0 if they occur at the same level.

String
view source

## match ( regexp ) : Array

Used to match a regular expression against a string.

If the regular expression does not include the `g` flag, returns the same result as `regexp.exec(string)`.

If the regular expression includes the `g` flag, the method returns an Array containing all matches. If there were no matches, the method returns `null`.

The returned Array has an extra `input` property, which contains the regexp that generated it as a result. In addition, it has an `index` property, which represents the zero-based index of the match in the string.

In the following example, match is used to find "Chapter" followed by 1 or more numeric characters followed by a decimal point and numeric character 0 or more times. The regular expression includes the `i` flag so that case will be ignored.

Sample Code

    str = "For more information, see Chapter 3.4.5.1";
    re = /(chapter \d+(\.\d)*)/i;
    found = str.match(re);
    document.write(found);

This returns the array containing Chapter 3.4.5.1,Chapter 3.4.5.1,.1

"`Chapter 3.4.5.1`" is the first match and the first value remembered from `(Chapter \d+(\.\d)*)`.

"`.1`" is the second value remembered from `(\.\d)`.

The following example demonstrates the use of the global and ignore case flags with match. All letters A through E and a through e are returned, each its own element in the array

Sample Code

    var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    var regexp = /[A-E]/gi;
    var matches_array = str.match(regexp);
    document.write(matches_array);

`matches_array` now equals `['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']`.

### Parameters

regexp : RegExp

A RegExp object. If a non-RegExp object `obj` is passed, it is implicitly converted to a RegExp by using `new RegExp(obj)`.

### Returns

:Array

Contains results of the match (if any).

String
view source

## replace ( pattern , replacement ) : String

Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.

This method does not change the String object it is called on. It simply returns a new string.

To perform a global search and replace, either include the `g` flag in the regular expression or if the first parameter is a string, include `g` in the flags parameter.

The replacement string can include the following special replacement patterns:

Pattern | Inserts
--- | ---
`$$` | Inserts a `$`.
`$&` | Inserts the matched substring.
`$`` | Inserts the portion of the string that precedes the matched substring.
`$'` | Inserts the portion of the string that follows the matched substring.
`$n` or `$nn` | Where `n` or `nn` are decimal digits, inserts the _n_th parenthesized submatch string, provided the first
| argument was a RegExp object.

You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. (Note: the above-mentioned special replacement patterns do not apply in this case.) Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.

The arguments to the function are as follows:

Possible Name | Supplied Value
--- | ---
`str` | The matched substring. (Corresponds to `$&` above.)
`p1, p2, ...` | The _n_th parenthesized submatch string, provided the first argument to replace was a RegExp object.
| (Correspond to $1, $2, etc. above.)
`offset` | The offset of the matched substring within the total string being examined. (For example, if the total string
| was "`abcd`", and the matched substring was "`bc`", then this argument will be 1.)
`s` | The total string being examined.

(The exact number of arguments will depend on whether the first argument was a RegExp object and, if so, how many parenthesized submatches it specifies.)

The following example will set `newString` to "`XXzzzz - XX , zzzz`":

Sample Code

    function replacer(str, p1, p2, offset, s)
    {
        return str + " - " + p1 + " , " + p2;
    }
    var newString = "XXzzzz".replace(/(X*)(z*)/, replacer);

In the following example, the regular expression includes the global and ignore case flags which permits replace to replace each occurrence of 'apples' in the string with 'oranges'.

Sample Code

    var re = /apples/gi;
    var str = "Apples are round, and apples are juicy.";
    var newstr = str.replace(re, "oranges");
    print(newstr);

In this version, a string is used as the first parameter and the global and ignore case flags are specified in the flags parameter.

Sample Code

    var str = "Apples are round, and apples are juicy.";
    var newstr = str.replace("apples", "oranges", "gi");
    print(newstr);

Both of these examples print "oranges are round, and oranges are juicy."

In the following example, the regular expression is defined in replace and includes the ignore case flag.

Sample Code

    var str = "Twas the night before Xmas...";
    var newstr = str.replace(/xmas/i, "Christmas");
    print(newstr);

This prints "Twas the night before Christmas..."

The following script switches the words in the string. For the replacement text, the script uses the $1 and $2 replacement patterns.

Sample Code

    var re = /(\w+)\s(\w+)/;
    var str = "John Smith";
    var newstr = str.replace(re, "$2, $1");
    print(newstr);

This prints "Smith, John".

In this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. The important thing here is that additional operations are needed on the matched item before it is given back as a replacement.

The replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.

Sample Code

    function styleHyphenFormat(propertyName)
    {
        function upperToHyphenLower(match)
        {
            return '-' + match.toLowerCase();
        }
        return propertyName.replace(/[A-Z]/, upperToHyphenLower);
    }

Given `styleHyphenFormat('borderTop')`, this returns 'border-top'.

Because we want to further transform the result of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the `toLowerCase()` method. If we had tried to do this using the match without a function, the `toLowerCase()` would have no effect.

Sample Code

    var newString = propertyName.replace(/[A-Z]/, '-' + '$&'.toLowerCase());  // won't work

This is because `'$&'.toLowerCase()` would be evaluated first as a string literal (resulting in the same `'$&'`) before using the characters as a pattern.

The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with F. The function returns the Celsius number ending with C. For example, if the input number is 212F, the function returns 100C. If the number is 0F, the function returns -17.77777777777778C.

The regular expression `test` checks for any number that ends with F. The number of Fahrenheit degree is accessible to the function through its second parameter, `p1`. The function sets the Celsius number based on the Fahrenheit degree passed in a string to the `f2c` function. `f2c` then returns the Celsius number. This function approximates Perl's `s///e` flag.

Sample Code

    function f2c(x)
    {
        function convert(str, p1, offset, s)
        {
            return ((p1-32) * 5/9) + "C";
        }
        var s = String(x);
        var test = /(\d+(?:\.\d*)?)F\b/g;
        return s.replace(test, convert);
    }

### Parameters

pattern : String / RegExp

Either a string or regular expression pattern to search for.

replacement : String / Function

Either string or function:

- The String to replace the `pattern` with. Number of special replacement patterns are supported; see the "Specifying a string as a parameter" section above.
- A function to be invoked to create the replacement. The arguments supplied to this function are described in the "Specifying a function as a parameter" section above.

### Returns

:String

String of matched replaced items.

String
view source

## search ( regexp ) : Number

Executes the search for a match between a regular expression and a specified string.

If successful, search returns the index of the regular expression inside the string. Otherwise, it returns -1.

When you want to know whether a pattern is found in a string use search (similar to the regular expression `test` method); for more information (but slower execution) use match (similar to the regular expression `exec` method).

The following example prints a message which depends on the success of the test.

Sample Code

    function testinput(re, str){
        if (str.search(re) != -1)
            midstring = " contains ";
        else
            midstring = " does not contain ";
        document.write (str + midstring + re);
    }

### Parameters

regexp : RegExp

A regular expression object. If a non-RegExp object obj is passed, it is implicitly converted to a RegExp by using `new RegExp(obj)`.

### Returns

:Number

If successful, search returns the index of the regular expression inside the string. Otherwise, it returns -1.

String
view source

## slice ( beginSlice , endSlice ) : String

Extracts a section of a string and returns a new string.

slice extracts the text from one string and returns a new string. Changes to the text in one string do not affect the other string.

slice extracts up to but not including `endSlice`. `string.slice(1,4)` extracts the second character through the fourth character (characters indexed 1, 2, and 3).

As a negative index, `endSlice` indicates an offset from the end of the string. `string.slice(2,-1)` extracts the third character through the second to last character in the string.

The following example uses slice to create a new string.

Sample Code

    // assumes a print function is defined
    var str1 = "The morning is upon us.";
    var str2 = str1.slice(4, -2);
    print(str2);

This writes:

Sample Code

    morning is upon u

### Parameters

beginSlice : Number

The zero-based index at which to begin extraction.

endSlice : Number

The zero-based index at which to end extraction. If omitted, slice extracts to the end of the string.

### Returns

:String

All characters from specified start up to (but excluding) end.

String
view source

## split ( seperator , limit ) : Array

Splits a String object into an array of strings by separating the string into substrings.

The split method returns the new array.

When found, `separator` is removed from the string and the substrings are returned in an array. If `separator` is omitted, the array contains one element consisting of the entire string.

If `separator` is a regular expression that contains capturing parentheses, then each time separator is matched the results (including any undefined results) of the capturing parentheses are spliced into the output array. However, not all browsers support this capability.

Note: When the string is empty, split returns an array containing one empty string, rather than an empty array.

The following example defines a function that splits a string into an array of strings using the specified separator. After splitting the string, the function displays messages indicating the original string (before the split), the separator used, the number of elements in the array, and the individual array elements.

Sample Code

    function splitString(stringToSplit,separator)
    {
        var arrayOfStrings = stringToSplit.split(separator);
        print('The original string is: "' + stringToSplit + '"');
        print('The separator is: "' + separator + '"');
        print("The array has " + arrayOfStrings.length + " elements: ");

        for (var i=0; i < arrayOfStrings.length; i++)
            print(arrayOfStrings[i] + " / ");
    }

    var tempestString = "Oh brave new world that has such people in it.";
    var monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";

    var space = " ";
    var comma = ",";

    splitString(tempestString, space);
    splitString(tempestString);
    splitString(monthString, comma);

This example produces the following output:

Sample Code

    The original string is: "Oh brave new world that has such people in it."
    The separator is: " "
    The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it. /

    The original string is: "Oh brave new world that has such people in it."
    The separator is: "undefined"
    The array has 1 elements: Oh brave new world that has such people in it. /

The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" The separator is: "," The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /

In the following example, split looks for 0 or more spaces followed by a semicolon followed by 0 or more spaces and, when found, removes the spaces from the string. nameList is the array returned as a result of split.

Sample Code

    var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
    print(names);
    var re = /\s*;\s*\/;
    var nameList = names.split(re);
    print(nameList);

This prints two lines; the first line prints the original string, and the second line prints the resulting array.

Sample Code

    Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
    Harry Trump,Fred Barney,Helen Rigby,Bill Abel,Chris Hand

In the following example, split looks for 0 or more spaces in a string and returns the first 3 splits that it finds.

Sample Code

    var myString = "Hello World. How are you doing?";
    var splits = myString.split(" ", 3);
    print(splits);

This script displays the following:

Sample Code

    Hello,World.,How

If `separator` contains capturing parentheses, matched results are returned in the array.

Sample Code

    var myString = "Hello 1 word. Sentence number 2.";
    var splits = myString.split(/(\d)/);
    print(splits);

This script displays the following:

Sample Code

    Hello ,1, word. Sentence number ,2, .

### Parameters

seperator : String

Specifies the character to use for separating the string. The separator is treated as a string or a regular expression. If separator is omitted, the array returned contains one element consisting of the entire string.

limit : Number

Integer specifying a limit on the number of splits to be found. The split method still splits on every match of separator, but it truncates the returned array to at most limit elements.

### Returns

:Array

Substrings are returned in an array.

String
view source

## substr ( start , length ) : String

Returns the characters in a string beginning at the specified location through the specified number of characters.

`start` is a character index. The index of the first character is 0, and the index of the last character is 1 less than the length of the string. substr begins extracting characters at start and collects length characters (unless it reaches the end of the string first, in which case it will return fewer).

If `start` is positive and is greater than or equal to the length of the string, substr returns an empty string.

If `start` is negative, substr uses it as a character index from the end of the string. If start is negative and abs(start) is larger than the length of the string, substr uses 0 as the start index. Note: the described handling of negative values of the start argument is not supported by Microsoft JScript.

If length is 0 or negative, substr returns an empty string. If length is omitted, substr extracts characters to the end of the string.

Consider the following script:

Sample Code

    // assumes a print function is defined
    var str = "abcdefghij";
    print("(1,2): "    + str.substr(1,2));
    print("(-3,2): "   + str.substr(-3,2));
    print("(-3): "     + str.substr(-3));
    print("(1): "      + str.substr(1));
    print("(-20, 2): " + str.substr(-20,2));
    print("(20, 2): "  + str.substr(20,2));

This script displays:

Sample Code

    (1,2): bc
    (-3,2): hi
    (-3): hij
    (1): bcdefghij
    (-20, 2): ab
    (20, 2):

### Parameters

start : Number

Location at which to begin extracting characters.

length : Number

The number of characters to extract.

### Returns

:String

Modified string.

String
view source

## substring ( indexA , [indexB] ) : String

Returns the characters in a string between two indexes into the string.

substring extracts characters from indexA up to but not including indexB. In particular:

- If `indexA` equals `indexB`, substring returns an empty string.
- If `indexB` is omitted, substring extracts characters to the end of the string.
- If either argument is less than 0 or is `NaN`, it is treated as if it were 0.
- If either argument is greater than `stringName.length`, it is treated as if it were `stringName.length`.

If `indexA` is larger than `indexB`, then the effect of substring is as if the two arguments were swapped; for example, `str.substring(1, 0) == str.substring(0, 1)`.

The following example uses substring to display characters from the string "Sencha":

Sample Code

    // assumes a print function is defined
    var anyString = "Sencha";

    // Displays "Sen"
    print(anyString.substring(0,3));
    print(anyString.substring(3,0));

    // Displays "cha"
    print(anyString.substring(3,6));
    print(anyString.substring(6,3));

    // Displays "Sencha"
    print(anyString.substring(0,6));
    print(anyString.substring(0,10));

The following example replaces a substring within a string. It will replace both individual characters and `substrings`. The function call at the end of the example changes the string "Brave New World" into "Brave New Web".

Sample Code

    function replaceString(oldS, newS, fullS) {
        // Replaces oldS with newS in the string fullS
        for (var i = 0; i < fullS.length; i++) {
            if (fullS.substring(i, i + oldS.length) == oldS) {
                fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length,

fullS.length); } } return fullS; }

Sample Code

    replaceString("World", "Web", "Brave New World");

### Parameters

indexA : Number

An integer between 0 and one less than the length of the string.

indexB : Number (optional)

An integer between 0 and the length of the string.

### Returns

:String

Returns the characters in a string between two indexes into the string.

String
view source

## toLocaleLowerCase : String

The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as toLowerCase.

The toLocaleLowerCase method returns the value of the string converted to lower case according to any locale-specific case mappings. toLocaleLowerCase does not affect the value of the string itself. In most cases, this will produce the same result as `toLowerCase()`, but for some locales, such as Turkish, whose case mappings do not follow the default case mappings in Unicode, there may be a different result.

The following example displays the string "sencha":

Sample Code

    var upperText="SENCHA";
    document.write(upperText.toLocaleLowerCase());

### Returns

:String

Returns value of the string in lowercase.

String
view source

## toLocaleUpperCase : String

The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as toUpperCase.

The toLocaleUpperCase method returns the value of the string converted to upper case according to any locale-specific case mappings. toLocaleUpperCase does not affect the value of the string itself. In most cases, this will produce the same result as `toUpperCase()`, but for some locales, such as Turkish, whose case mappings do not follow the default case mappings in Unicode, there may be a different result.

The following example displays the string "SENCHA":

Sample Code

    var lowerText="sencha";
    document.write(lowerText.toLocaleUpperCase());

### Returns

:String

Returns value of the string in uppercase.

String
view source

## toLowerCase : String

Returns the calling string value converted to lower case.

The toLowerCase method returns the value of the string converted to lowercase. toLowerCase does not affect the value of the string itself.

The following example displays the lowercase string "sencha":

Sample Code

    var upperText="SENCHA";
    document.write(upperText.toLowerCase());

### Returns

:String

Returns value of the string in lowercase.

String
view source

## toString : String

Returns a string representing the specified object. Overrides the `Object.toString` method.

The String object overrides the toString method of the Object object; it does not inherit `Object.toString`. For String objects, the toString method returns a string representation of the object.

The following example displays the string value of a String object:

Sample Code

    x = new String("Hello world");
    alert(x.toString())      // Displays "Hello world"

### Returns

:String

A string representation of the object.

String
view source

## toUpperCase : String

Returns the calling string value converted to uppercase.

The toUpperCase method returns the value of the string converted to uppercase. toUpperCase does not affect the value of the string itself.

The following example displays the string "SENCHA": var lowerText="sencha"; document.write(lowerText.toUpperCase());

### Returns

:String

Returns value of the string in uppercase.

String
view source

## trim : String

Removes whitespace from both ends of the string.

Does not affect the value of the string itself.

The following example displays the lowercase string `"foo"`:

Sample Code

    var orig = "   foo  ";
    alert(orig.trim());

NOTE: This method is part of the ECMAScript 5 standard.

### Returns

:String

A string stripped of whitespace on both ends.

String
view source

## valueOf : String

Returns the primitive value of the specified object. Overrides the `Object.valueOf` method.

The valueOf method of String returns the primitive value of a String object as a string data type. This value is equivalent to `String.toString`.

This method is usually called internally by JavaScript and not explicitly in code.

Sample Code

    x = new String("Hello world");
    alert(x.valueOf())          // Displays "Hello world"

### Returns

:String

Returns value of string.

## 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