Sencha Ext JS 7.6.0 Classic

https://docs.sencha.com/extjs/7.6.0/classic/
Admin
Sencha Ext JS is a comprehensive JavaScript framework for building rich, interactive web...
Tokens:15,007,785
Snippets:188,551
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic Playback Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.ux.event.Player.html

A simple example of instantiating Ext.ux.event.Player and starting playback.

```APIDOC
```javascript
 var player = Ext.create('Ext.ux.event.Player', {
     eventQueue: [ ... ],
     speed: 2,  // play at 2x speed
     listeners: {
         stop: function() {
             player = null; // all done
         }
     }
 });

 player.start();
```
```

--------------------------------

### Example: Get Initial Config - Ext.Base

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.view.MultiSelector.html

Demonstrates how to retrieve initial configuration options for an Ext.button.Button instance.

```javascript
Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});

btn.getInitialConfig()
// returns an object including xtype, renderTo, text

btn.getInitialConfig('text')
// returns 'Test Button'
```

--------------------------------

### Get Initial Configuration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.chart.series.sprite.Polar.html

Demonstrates how to retrieve initial configuration options passed to a class instance. This is useful for understanding the original settings before any modifications.

```javascript
Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});

// Returns the full config object
btn.getInitialConfig();

// Returns the 'text' config option
btn.getInitialConfig('text');
```

--------------------------------

### Data Configuration and Management

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.grid.column.Date.html

Demonstrates how to set initial data for a component using the 'data' configuration, which can be used with templates. Includes examples of setting and getting the data.

```javascript
data : Object

// Defaults to:
// null

Available since: **3.4.0**
```

```javascript
getData  : Object

// Returns the value of data
```

```javascript
setData  (data)

### Parameters
data :  Object

Sets the value of data
```

--------------------------------

### setup

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.calendar.dd.WeeksSource.html

Allow for any setup as soon as the info object is created.

```APIDOC
## setup

**Description**

Allow for any setup as soon as the info object is created.

**Default Value**

```javascript
Ext.privateFn
```
```

--------------------------------

### Boolean Field Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Boolean.js-1.html

An example demonstrating how to define a boolean field in an Ext.data.Model and use it to get and display the field's value.

```APIDOC
## Example Usage

```javascript
Ext.define('Task', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'completed', type: 'boolean' }
    ]
});

var record = Ext.create('Task', { completed: true });
var value = record.get('completed');

Ext.toast("completed is " + value);
```
```

--------------------------------

### Get Range of Items in Ext.util.Collection

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.util.FilterCollection.html

Retrieves a portion of items from the collection as an array. Specify start and end indices to get a specific slice.

```javascript
getRange(begin, end)
```

```javascript
getRange()
```

--------------------------------

### Get Start Menu Configuration

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/App.js.html

Returns the configuration object for the Start Button. Derived classes can override this to modify the configuration, including the menu items.

```javascript
getStartConfig: function() {
        var me = this,
            cfg = {
                app: me,
                menu: []
            },
            launcher;

        Ext.apply(cfg, me.startConfig);

        Ext.each(me.modules, function(module) {
            launcher = module.launcher;

            if (launcher) {
                launcher.handler = launcher.handler || Ext.bind(me.createWindow, me, [module]);
                cfg.menu.push(module.launcher);
            }
        });

        return cfg;
    }
```

--------------------------------

### getElement

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.calendar.dd.DaysProxy.html

Gets the proxy element for the drag source, which is called as the drag starts.

```APIDOC
## getElement ( info ) :  Ext.dom.Element

### Description
Get the proxy element for the drag source. This is called as the drag starts. This element may be cached on the instance and reused.

### Parameters
info :  Ext.drag.Info
Drag info

### Returns
:Ext.dom.Element
The element.
```

--------------------------------

### Instantiate and Log Ext.Version

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.Version.html

Demonstrates how to create a new Ext.Version instance from a string and log its string representation. Also shows how to access individual version components.

```javascript
var version = new Ext.Version('1.0.2beta'); // or maybe "1.0" or "1.2.3.4RC"
console.log("Version is " + version); // Version is 1.0.2beta

console.log(version.getMajor()); // 1
console.log(version.getMinor()); // 0
console.log(version.getPatch()); // 2
console.log(version.getBuild()); // 0
console.log(version.getRelease()); // beta
```

--------------------------------

### Get View Class

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Controller.js.html

Retrieves a View class by its name. This method is used to get the class definition, which can then be used to create an instance, for example, `this.getView('Viewport').create();`.

```javascript
getView: function(view) {
        var name = Ext.app.Controller.getFullName(view, 'view', this.$namespace);

        return name && Ext.ClassManager.get(name.absoluteName);
    }
```

--------------------------------

### setup

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.calendar.dd.DaysAllDaySource.html

A private method allowing for setup operations immediately after the info object is created.

```APIDOC
## setup

### Description
Allow for any setup as soon as the info object is created.

### Default Value
```javascript
Ext.privateFn
```
```

--------------------------------

### Sandbox Build Namespace Registration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.html

Illustrates how to register top-level namespaces within a sandbox build context. This example shows the typical setup for a sandboxed application.

```javascript
(function(Ext) {

 Ext.sandboxName = 'Ext6';
 Ext.isSandboxed = true;
 Ext.buildSettings = { baseCSSPrefix: "x6-", scopeResetCSS: true };

 var MyApp = MyApp || {};
 Ext.addRootNamespaces({ MyApp: MyApp );

 ... normal app.js goes here ...

})(this.Ext6 || (this.Ext6 = {}));
```

--------------------------------

### Creating and Displaying a Window

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.window.Window.html

This example demonstrates how to create a basic Ext.window.Window with a title, dimensions, layout, and an item, then display it.

```APIDOC
## Create and Show Window

### Description
Creates and displays a new Ext.window.Window instance.

### Method
Ext.create('Ext.window.Window', { ... })

### Parameters
- **title** (string) - The title text for the window.
- **height** (number) - The height of the window in pixels.
- **width** (number) - The width of the window in pixels.
- **layout** (string) - The layout type for child items (e.g., 'fit').
- **items** (object) - Configuration object for the window's child items.

### Request Example
```javascript
Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {
        xtype: 'grid',
        border: false,
        columns: [{ header: 'World' }],
        store: Ext.create('Ext.data.ArrayStore', {})
    }
}).show();
```

### Response
This method does not return a value, but it displays the window on the screen.
```

--------------------------------

### Start a simple clock task with Ext.TaskManager

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/TaskManager.js.html

This example demonstrates how to start a task that updates an HTML element every second with the current time. Ensure the Ext.Date and Ext.TaskManager are available.

```javascript
// @tag core
/**
 * A static {@link Ext.util.TaskRunner} instance that can be used to start and stop
 * arbitrary tasks. See {@link Ext.util.TaskRunner} for supported methods and task
 * config properties.
 *
 * @example
 * var task, clock;
 *
 * clock = Ext.getBody().appendChild({
 * id: 'clock'
 * });
 *
 * // Start a simple clock task that updates a div once per second 
 * task = {
 * run: function() {
 * clock.setHtml(Ext.Date.format(new Date(), 'g:i:s A'));
 * },
 * interval: 1000
 *};
 *
 * Ext.TaskManager.start(task);
 *
 * See the {@link #start} method for details about how to configure a task object.
 */
Ext.define('Ext.util.TaskManager', {
    extend: 'Ext.util.TaskRunner',

    alternateClassName: [
        'Ext.TaskManager'
    ],

    singleton: true
});
```

--------------------------------

### Example Usage of getInitialConfig

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.exporter.file.ooxml.excel.PivotField.html

Demonstrates how to retrieve initial configuration options for an instance. Shows retrieving all configs or a specific one.

```javascript
Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});

// Returns an object including xtype, renderTo, text
btn.getInitialConfig();

// Returns 'Test Button'
btn.getInitialConfig('text');
```

--------------------------------

### Initialize Configuration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.EventManager.html

Shows how to initialize a class instance with configuration options. The `initConfig` method processes the provided config object and applies it to the instance.

```javascript
Ext.define('My.awesome.Class', {
    // The default config
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName());
```

--------------------------------

### Example Usage of SubTable Plugin

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.ux.grid.SubTable.html

Demonstrates how to configure and use the SubTable plugin within a grid. This example shows the basic setup for enabling row expansion with a nested grid.

```javascript
Ext.create({
    xtype: 'grid',
    plugins: {
        foobar: {
            id: 'foo',
            ...
        }
    }
});
```

--------------------------------

### Get Substring from String

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.util.Format.html

Extracts a portion of a string based on a starting index and a specified length.

```javascript
Ext.util.Format.substr(value, start, length)
```

--------------------------------

### Ext.plugin.Abstract init Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.plugin.AbstractClipboard.html

Initializes the plugin and associates it with its host component. Subclasses should override this method to perform specific setup and establish links between the plugin and the host.

```javascript
Ext.plugin.Abstract.prototype.init = function(host) {
    // ... implementation details ...
};
```

--------------------------------

### Example Boolean Filter Usage in Ext JS Grid

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Boolean.js-3.html

Demonstrates how to set up a grid with a boolean filter for the 'Visibility' column. This example includes data store setup and grid configuration with the filter plugin.

```javascript
var shows = Ext.create('Ext.data.Store', {
    fields: ['id','show', 'visible'],
    data: [
        {id: 0, show: 'Battlestar Galactica', visible: true},
        {id: 1, show: 'Doctor Who', visible: true},
        {id: 2, show: 'Farscape', visible: false},
        {id: 3, show: 'Firefly', visible: true},
        {id: 4, show: 'Star Trek', visible: true},
        {id: 5, show: 'Star Wars: Christmas Special', visible: false}
    ]
});

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    title: 'Sci-Fi Television',
    height: 250,
    width: 375,
    store: shows,
    plugins: {
        gridfilters: true
    },
    columns: [{
        dataIndex: 'id',
        text: 'ID',
        width: 50
    },{
        dataIndex: 'show',
        text: 'Show',
        flex: 1               
    },{
        dataIndex: 'visible',
        text: 'Visibility',
        width: 125,
        filter: {
            type: 'boolean',
            value: true,
            yesText: 'True',
            noText: 'False'
        }
    }]
});  
```

--------------------------------

### Ext.button.Button Initial Configuration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.util.Positionable.html

Demonstrates how to define a custom button with specific configurations and retrieve initial configuration values.

```javascript
Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});
```

```javascript
var initialConfig = btn.getInitialConfig();
// initialConfig will include: xtype: 'mybutton', renderTo: // The document body itself, text: 'Test Button'

var buttonText = btn.getInitialConfig('text'); // 'Test Button'
```

--------------------------------

### Ext.define with getInitialConfig Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.layout.container.Editor.html

Demonstrates how to define a custom component and retrieve its initial configuration, including options passed during creation.

```javascript
Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});
```

```javascript
btn.getInitialConfig()
```

```javascript
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
```

```javascript
btn.getInitialConfig('text')
```

--------------------------------

### Get Text Selection Range

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Text.js.html

Returns the current text selection range as [start, end, direction].

```javascript
getTextSelection: function() {
        return this.inputEl.getTextSelection();
    }
```

--------------------------------

### Get Selection Start Record

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Model.js.html

Retrieves the record that was initially selected, used for range selection logic.

```javascript
getSelectionStart: function() {
        return this.selectionStart;
    }
```

--------------------------------

### Instantiate and Log Ext.Version

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Version.js.html

Demonstrates how to create a new Ext.Version instance from a string and log its string representation.

```javascript
var version = new Ext.Version('1.0.2beta'); // or maybe "1.0" or "1.2.3.4RC"
console.log("Version is " + version); // Version is 1.0.2beta
```

--------------------------------

### Set Configuration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.exporter.file.ooxml.excel.Fill.html

Shows how to set one or multiple configuration properties on an instance. This method allows for dynamic updates to the instance's configuration.

```javascript
Ext.exporter.data.Base.prototype.setConfig = function(name, value) {
    // Implementation details...
    return this;
};
```

--------------------------------

### Get Current Operation

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Batch.js.html

Returns the operation currently being processed. Returns null if the batch has not started or is completed.

```javascript
getCurrent: function() {
  var out = null,
    current = this.current;

  if (!(current === -1 || this.complete)) {
    out = this.operations[current];
  }

  return out;
}
```

--------------------------------

### Radial Gradient Methods

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.draw.gradient.Radial.html

Methods for getting and setting the start, end, and stops properties of a radial gradient.

```APIDOC
## methods

### getStart : Object

Returns the value of start
### Returns
Object

### setStart (start)

Sets the value of start
### Parameters
start :  Object

### getEnd : Object

Returns the value of end
### Returns
Object

### setEnd (end)

Sets the value of end
### Parameters
end :  Object

### getStops : Object[]

Returns the value of stops
### Returns
Object[]

### setStops (stops)

Sets the value of stops
### Parameters
stops :  Object[]
```

--------------------------------

### RemotingProvider Configuration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/RemotingProvider.js.html

Demonstrates basic configuration for the RemotingProvider, including enabling buffering and setting a buffer limit.

```javascript
enableBuffer: 10,
bufferLimit: Number.MAX_VALUE,
```

--------------------------------

### Get Range of Nodes

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.dom.CompositeElement.html

Retrieves a range of nodes from a composite element based on start and end indices.

```javascript
compositeElement.slice(1, 5);
```

--------------------------------

### Component Creation Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Factoryable.js.html

This example demonstrates how to define a configuration for a component and its associated `apply` and `create` methods. The `apply` method coordinates the update or creation of a child component, while the `create` method defines how a new instance is constructed.

```javascript
config: {
            header: {
                xtype: 'itemheader'
            }
        },

        applyHeader: function (header, oldHeader) {
            return Ext.Factory.widget.update(oldHeader, header,
                this, 'createHeader');
        },

        createHeader: function (header) {
            return Ext.apply({
                xtype: 'itemheader',
                ownerCmp: this
            }, header);
        }
```

--------------------------------

### Getting Initial Configuration Options

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.exporter.file.ooxml.excel.Sheet.html

Illustrates how to retrieve initial configuration values for an instance. It can return all configurations or a specific one by name.

```javascript
Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});

// Returns an object including configs passed to create
btn.getInitialConfig();

// Returns 'Test Button'
btn.getInitialConfig('text')
```

--------------------------------

### getCurrent

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.data.Batch.html

Gets the currently running operation within the batch. Returns null if the batch has not started or has completed.

```APIDOC
## getCurrent Ext.data.operation.Operation

Gets the currently running operation. Will return null if the batch has not started or is completed.

### Returns
:Ext.data.operation.Operation
The operation
```

--------------------------------

### Ext.Base.initConfig Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.chart.interactions.Crosshair.html

Shows how to initialize the configuration of a class instance. This method is typically called within the constructor to apply initial settings. The example demonstrates defining a class with a config object and then creating an instance with custom values.

```javascript
Ext.Base
view source
##  initConfig ( instanceConfig ) :  Ext.Base
chainable ch protected pro
Initialize configuration for this class. a typical example:
```
Ext.define('My.awesome.Class', {
    // The default config
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome'
```

### Parameters
instanceConfig :  Object
### Returns
:Ext.Base
this
```

--------------------------------

### Basic Responsive Configuration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Responsive.js-1.html

This example demonstrates a basic responsive configuration using 'landscape' and 'portrait' rules to set the 'region' config.

```javascript
responsiveConfig: {
        landscape: {
              region: 'west'
        },
        portrait: {
              region: 'north'
        }
    }
```

--------------------------------

### Get Path Animation Values

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/PropertyHandler.js.html

Generates an array of path segments for animation, interpolating between start and end paths.

```javascript
get: function(start, end, damper, initialFrom) {
    var endPath = this.forcePath(end),
        out = [],
        startLn = start.length,
        startPathLn, pointsLn, i, deltaPath, initial, j, k, path, startPath;

    for (i = 0; i < startLn; i++) {
        startPath = this.forcePath(start[i][1]);

        deltaPath = Ext.fx.DrawPath.interpolatePaths(startPath, endPath);
        startPath = deltaPath[0];
        endPath = deltaPath[1];

        startPathLn = startPath.length;
        path = [];

        for (j = 0; j < startPathLn; j++) {
            deltaPath = [startPath[j][0]];
            pointsLn = startPath[j].length;

            for (k = 1; k < pointsLn; k++) {
                initial = initialFrom && initialFrom[0][1][j][k].from;
                deltaPath.push(
                    this.computeDelta(startPath[j][k], endPath[j][k], damper, initial)
                );
            }

            path.push(deltaPath);
        }

        out.push([start[i][0], path]);
    }

    return out;
}
```

--------------------------------

### setupScene

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.d3.HeatMap.html

Called once when the scene (main group) is created.

```APIDOC
## setupScene
protected pro
Called once when the scene (main group) is created.

### Parameters
- scene (d3.selection): The scene as a D3 selection.
```

--------------------------------

### Get Edit Position Right

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/InputMask.js.html

Finds the rightmost editable character position in the mask, starting from a given position.

```javascript
var mask = this._mask,
	len = mask.length,
	i;

for (i = pos; i < len; ++i) {
	if (!this.isFixedChar(i)) {
		return i;
	}
}

return null;
```

--------------------------------

### setup

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/AdvancedGrouping.js.html

Initializes the grouping component with view and store configurations.

```APIDOC
## setup

### Description
Initializes the grouping component with view and store configurations.

### Method
`setup(values)`

### Parameters
#### Path Parameters
- **values** (Object) - Required - An object containing view and store information.
```

--------------------------------

### Get Edit Position Left

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/InputMask.js.html

Finds the leftmost editable character position in the mask, starting from a given position.

```javascript
var i;

for (i = pos; i >= 0; --i) {
	if (!this.isFixedChar(i)) {
		return i;
	}
}

return null;
```

--------------------------------

### Create an Ext.menu.Menu with Items

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Item.js-3.html

This example demonstrates how to create a basic Ext.menu.Menu with different types of menu items, including those with icons, plain text, and custom configurations. It shows the typical usage for initializing a menu.

```javascript
Ext.create('Ext.menu.Menu', {
    width: 100,
    height: 100,
    floating: false, // usually you want this set to True (default)
    renderTo: Ext.getBody(), // usually rendered by it's containing component
    items: [{
        text: 'icon item',
        iconCls: 'add16'
    }, {
        text: 'text item'
    }, {
        text: 'plain item',
        plain: true
    }]
});
```

--------------------------------

### Get Nodes in Range - JavaScript

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/AbstractView.js.html

Retrieves a range of nodes from the view. Accepts optional start and end indices.

```javascript
getNodes: function(start, end) {
    var all = this.all;

    if (end !== undefined) {
        end++;
    }

    return all.slice(start, end);
}
```

--------------------------------

### Example Usage

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Component.js-3.html

An example demonstrating how to use the Ext.flash.Component within a window.

```APIDOC
## Example usage:

```javascript
var win = Ext.widget('window', {
    title: "It's a tiger!",
    layout: 'fit',
    width: 300,
    height: 300,
    x: 20,
    y: 20,
    resizable: true,
    items: {
        xtype: 'flash',
        url: 'tiger.swf'
    }
});
win.show();
```
```

--------------------------------

### getNodes

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.picker.Time.html

Retrieves a range of nodes from the component. You can specify a start and end index to get a specific subset of nodes.

```APIDOC
## getNodes ( [start], [end] ) :  HTMLElement[]

Gets a range nodes.
Available since: **2.3.0**

### Parameters
start :  Number _(optional)_
The index of the first node in the range
end :  Number _(optional)_
The index of the last node in the range

### Returns
:HTMLElement[]
An array of nodes
```

--------------------------------

### Ext.Version Constructor and Basic Usage

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.Version.html

Demonstrates how to create an Ext.Version instance and access its basic properties.

```APIDOC
## Ext.Version Constructor

### Description
Creates a new Version instance.

### Example
```javascript
var version = new Ext.Version('1.0.2beta'); // or maybe "1.0" or "1.2.3.4RC"
console.log("Version is " + version); // Version is 1.0.2beta

console.log(version.getMajor()); // 1
console.log(version.getMinor()); // 0
console.log(version.getPatch()); // 2
console.log(version.getBuild()); // 0
console.log(version.getRelease()); // beta
```
```

--------------------------------

### TaskRunner Usage Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.util.TaskRunner.html

Demonstrates how to create a TaskRunner instance and start a task that updates a clock every second.

```APIDOC
## TaskRunner Usage Example

### Description
This example shows how to instantiate `Ext.util.TaskRunner` and use it to schedule a recurring task.

### Method
`new Ext.util.TaskRunner()`

### Endpoint
N/A (JavaScript Class)

### Parameters
N/A

### Request Example
```javascript
var runner = new Ext.util.TaskRunner(),
    clock,
    updateClock,
    task;

clock = Ext.getBody().appendChild({
    id: 'clock'
});

updateClock = function() {
    clock.setHtml(Ext.Date.format(new Date(), 'g:i:s A'));
};

task = runner.start({
    run: updateClock,
    interval: 1000
});
```

### Response
N/A (This is client-side JavaScript execution)
```

--------------------------------

### Partial Comparison Example with Build Number

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Version.js.html

Provides an example of using the '~' prefix for prefix matching with a version that includes a build number.

```javascript
var version421ish = new Version('~4.2.1');

n = version421ish.compareTo('4.2.1.883'); // == 0
n = version421ish.compareTo('4.2.1.2'); // == 0
n = version421ish.compareTo('4.2.1'); // == 0

n = version421ish.compareTo('4.2'); // == 1
```

--------------------------------

### Setup Request Parameters in Ext JS

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Events.js.html

Generates a parameter object for data requests, including the calendar ID, start date, and end date. Ensure the calendar, start, and end parameters are correctly configured before calling.

```javascript
setupParams: function(start, end) {
            var me = this,
                D = Ext.Date,
                format = me.getDateFormat(),
                params = {};

            params[me.getCalendarParam()] = me.getCalendar().id;
            params[me.getStartParam()] = D.format(start, format);
            params[me.getEndParam()] = D.format(end, format);

            return params;
        }
```

--------------------------------

### Create View Method Override Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Part.js.html

Example of overriding the `createView` method. It's recommended to call `callParent` to get the base view configuration and then modify it. This method converts a configuration object into a view configuration suitable for `Ext.widget`.

```javascript
createView: function(config) {
            var view = this.callParent([config]);

            // edit view

            return view;
        }
```

--------------------------------

### Example: Using store and view

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.grid.column.Column.html

Illustrates how to leverage the `store` and `view` parameters within a renderer to access grid data and component information for advanced cell customization.

```APIDOC
## Renderer with Store and View

### Description

These examples show how to utilize the `store` and `view` parameters in a renderer function to access grid data and component context for sophisticated cell rendering.

### Example 1: Styling based on store average
```javascript
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
    var average = store.average('grades');
    metaData.tdCls = (value < average) ? 'needsImprovement' : 'satisfactory'; // Apply class based on comparison to average
    return value;
}
```

### Example 2: Styling based on column dataIndex using view
```javascript
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    var headerCt = this.getHeaderContainer(),
        column = headerCt.getHeaderAtIndex(colIndex);

    metaData.tdCls = 'app-' + column.dataIndex; // Apply class based on column's dataIndex
    return value;
}
```
```

--------------------------------

### Complex Responsive Configuration Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Responsive.js-1.html

This example shows how to use combined conditions, including platform checks and width comparisons, for responsive configurations.

```javascript
responsiveConfig: {
        'desktop || width > 800': {
              region: 'west'
        },

        '!(desktop || width > 800)': {
              region: 'north'
        }
    }
```

--------------------------------

### Get Range of Elements

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/CompositeElementLite.js.html

Returns a portion of the elements in the composite as a new array. Accepts optional start and end indices.

```javascript
slice: function(start, end) {
        return Ext.Array.slice(this.elements, start, end);
    }
```

--------------------------------

### Get Active Tab

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Panel.js-5.html

This example demonstrates how to retrieve the currently active tab using the `getActiveTab` method and display its title.

```javascript
var tabs = Ext.create('Ext.tab.Panel', {
    items: [
        {
            title: 'Tab 1',
            html : 'A simple tab'
        },
        {
            title: 'Tab 2',
            html : 'Another one'
        }
    ],
    renderTo : Ext.getBody()
});

Ext.create('Ext.button.Button', {
    text : 'Get active tab',
    scope : this,
    handler : function() {
        var tab = tabs.getActiveTab();
        alert('Current tab: ' + tab.title);
    },
    renderTo : Ext.getBody()
});
```

--------------------------------

### Example of getInitialConfig

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.chart.grid.VerticalGrid.html

Demonstrates how `getInitialConfig` works with a custom defined class and instance creation.

```javascript
Ext.define('MyApp.view.Button', {
    extend: 'Ext.button.Button',
    xtype: 'mybutton',

    scale: 'large',
    enableToggle: true
});

var btn = Ext.create({
    xtype: 'mybutton',
    renderTo: Ext.getBody(),
    text: 'Test Button'
});
```

```javascript
Calling `btn.getInitialConfig()` would return an object including the config options passed to the `create` method:
```
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
```

Calling `btn.getInitialConfig('text')`returns **'Test Button'**.
```

--------------------------------

### Ext.Array.pluck Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.Array.html

Extracts the value of a specified property from each element in an array or NodeList. Useful for getting a list of attribute values.

```javascript
// [el1.className, el2.className, ..., elN.className]
Ext.Array.pluck(Ext.query("p"), "className");
```

--------------------------------

### Create and Configure a Grid with Data Store (JavaScript)

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Element.js.html

Demonstrates creating an Ext JS Grid Panel with a memory proxy store, defining columns, and populating it with sample data.

```javascript
Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone'],
            data:{'items':[
                { 'name': 'Lisa',  "email":"lisa@simpsons.com", "phone":"555-111-1224" },
                { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244" },
                { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" },
                { 'name': 'Milhouse', "email":"milhouse@simpsons.com",
                 "phone":"555-222-1244" },
                { 'name': 'Willy', "email":"willy@simpsons.com", "phone":"555-222-1254" },
                { 'name': 'Skinner', "email":"skinner@simpsons.com",
                 "phone":"555-222-1244" },
                { 'name': 'Hank (last row)', "email":"hank@simpsons.com",
                 "phone":"555-222-1254" }
            ]},
            proxy: {
                 type: 'memory',
                 reader: {
                     type: 'json',
                     rootProperty: 'items'
                 }
            }
        });

        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
                { text: 'Name',  dataIndex: 'name', width: 125 },
                { text: 'Email', dataIndex: 'email', flex: 1 },
                { text: 'Phone', dataIndex: 'phone' }
            ],
        });
```

--------------------------------

### Get Move Base Value for Navigation

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Month.js-1.html

Returns the starting date of the month in local time, used as a base for navigation actions.

```javascript
getMoveBaseValue: function() {
    return this.utcToLocal(this.dateInfo.month.start);
},

```

--------------------------------

### Setting Configuration Options

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.util.KeyMap.html

Provides an example of how to set one or more configuration properties on an instance using the `setConfig` method.

```javascript
var cmp = new Ext.Component();

// Set a single config option
cmp.setConfig('width', 200);

// Set multiple config options
cmp.setConfig({
    height: 100,
    title: 'My Component'
});
```

--------------------------------

### Get Substring Length

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/InputMask.js.html

Determines the length of a substring that fits within the mask starting from a given position. Used for range insertion.

```javascript
var me = this,
	mask = me.getPattern(),
	k = 0,
	maskLen = mask.length,
	substrLen = substr.length,
	i;

for (i = pos; i < maskLen && k < substrLen;) {
	if (!me.isFixedChar(i) || mask[i] === substr[k]) {
		if (me.isAllowedChar(substr[k++], i, true)) {
			++i;
		}
	}
	else {
		++i;
	}
}

return i - pos;
```

--------------------------------

### Get Event Date Range in JavaScript

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/EventBase.js-1.html

Creates and returns an `Ext.calendar.date.Range` object representing the event's start and end dates.

```javascript
getRange: function() {
    return new Ext.calendar.date.Range(this.getStartDate(), this.getEndDate());
},
```

--------------------------------

### Create and Use a User Model Instance

Source: https://docs.sencha.com/extjs/7.6.0/classic/src/Model.js-1.html

Demonstrates creating an instance of the 'User' model using 'Ext.create' and initializing it with data. It also shows how to call a custom model method 'changeName' and retrieve a field's value.

```javascript
var user = Ext.create('User', {
    id : 'ABCD12345',
    name : 'Conan',
    age  : 24,
    phone: '555-555-5555'
});

user.changeName();
user.get('name'); //returns "Conan The Barbarian"
```

--------------------------------

### Ext.slider.Multi Initialization Example

Source: https://docs.sencha.com/extjs/7.6.0/classic/Ext.slider.Multi.html

Demonstrates how to create and render an Ext.slider.Multi instance with multiple thumbs and custom configurations.

```APIDOC
## Ext.slider.Multi Initialization Example

### Description
This example shows how to instantiate `Ext.slider.Multi` with a specific width, initial values for its thumbs, an increment step, minimum and maximum values, and a flag to control thumb collision.

### Method
`Ext.create()`

### Endpoint
N/A (Client-side JavaScript)

### Parameters
- `xtype`: 'multislider' (implied by `Ext.slider.Multi`)
- `width`: Number - The width of the slider.
- `values`: Array - An array of numbers representing the initial positions of the thumbs.
- `increment`: Number - The step value for thumb movement.
- `minValue`: Number - The minimum value the slider can represent.
- `maxValue`: Number - The maximum value the slider can represent.
- `constrainThumbs`: Boolean - If false, allows thumbs to pass each other. Defaults to true.
- `renderTo`: HTMLElement/String - The DOM element or its ID to render the slider into.

### Request Example
```javascript
Ext.create('Ext.slider.Multi', {
    width: 200,
    values: [25, 50, 75],
    increment: 5,
    minValue: 0,
    maxValue: 100,
    constrainThumbs: false,
    renderTo: Ext.getBody()
});
```

### Response
N/A (Client-side rendering)
```
Tokens:
Raw