Ext JS 6.6.0 Classic

https://docs.sencha.com/extjs/6.6.0/classic/
Admin
Ext JS is a comprehensive JavaScript framework for building rich, interactive web applications with...
Tokens:12,188,544
Snippets:95,758
Trust Score:10
Update:6 months ago
Show doc for...
Tokens:
Raw
### Get Initial Config Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.util.AbstractMixedCollection.html

Demonstrates how to retrieve initial configuration options for a component. Use `getInitialConfig()` to get all options or `getInitialConfig('configName')` for 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'
});



// 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'.
```

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

### Get Initial Configuration - Ext.button.Button Example

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

Demonstrates how to retrieve initial configuration options for a class instance. Use `getInitialConfig()` to get all options or `getInitialConfig('propertyName')` for 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'
});



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'**.
```

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

### Create a D3 Component with Scene Setup

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.d3.svg.Svg.html

This example demonstrates how to create a standalone D3 component and configure its scene setup listener to draw circles. Ensure D3 is loaded before Ext JS.

```javascript
Ext.create({
    renderTo: document.body,
    width: 300,
    height: 300,
    xtype: 'd3',
    listeners: {
        scenesetup: function (component, scene) {
            var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                colors = d3.scaleOrdinal(d3.schemeCategory20c),
                twoPi = 2 * Math.PI,
                gap = twoPi / data.length,
                r = 100;
            scene.append('g')
                .attr('transform', 'translate(150,150)')
                .selectAll('circle')
                .data(data)
                .enter()
                .append('circle')
                .attr('fill', function (d) {
                    return colors(d);
                })
                .attr('stroke', 'black')
                .attr('stroke-width', 3)
                .attr('r', function (d) {
                    return d * 3;
                })
                .attr('cx', function (d, i) {
                    return Math.sin(i * gap) * r;
                })
                .attr('cy', function (d, i) {
                    return Math.cos(i * gap) * r;
                });
        }
    }
});
```

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

### Get Initial Configuration - Ext.button.Button Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.chart.axis.Category3D.html

Demonstrates how to retrieve the initial configuration object passed to a class instance. This is useful for inspecting configuration options at creation time.

```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
btn.getInitialConfig('text')

```

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

### D3 Component Usage Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.d3.svg.Svg.html

An example demonstrating how to create and configure a D3 component with a basic scene setup.

```APIDOC
## D3 Component Example

### Description
This example shows how to instantiate a D3 component and set up a basic SVG scene with circles.

### Method
Ext.create

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

### Request Body
```json
{
  "renderTo": "document.body",
  "width": 300,
  "height": 300,
  "xtype": "d3",
  "listeners": {
    "scenesetup": "function (component, scene) { ... }"
  }
}
```

### Request Example
```javascript
Ext.create({
    renderTo: document.body,
    width: 300,
    height: 300,
    xtype: 'd3',
    listeners: {
        scenesetup: function (component, scene) {
            var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                colors = d3.scaleOrdinal(d3.schemeCategory20c),
                twoPi = 2 * Math.PI,
                gap = twoPi / data.length,
                r = 100;
            scene.append('g')
                .attr('transform', 'translate(150,150)')
                .selectAll('circle')
                .data(data)
                .enter()
                .append('circle')
                .attr('fill', function (d) { return colors(d); })
                .attr('stroke', 'black')
                .attr('stroke-width', 3)
                .attr('r', function (d) { return d * 3; })
                .attr('cx', function (d, i) { /* ... */ });
        }
    }
});
```

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

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

### setup Method

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

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

```APIDOC
## setup

private pri

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

Defaults to:
```Ext.privateFn```
```

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

### GMap Panel UX Setup and Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.ux.GMapPanel.html

Instructions on how to include the Google Maps API and an example of creating a window with a GMap Panel.

```APIDOC
## GMap Panel UX Setup and Example

### Description
This section provides the necessary steps to integrate the GMap Panel UX into your application, including the required Google Maps API script and a practical example demonstrating its implementation.

### Google Maps API Integration
It is crucial to include the Google Maps API script in your application's `index.html` file before `bootstrap.js`. **Note:** Do not include this script in your `app.json` as it can interfere with the loading of Ext JS and Google Maps.

```html
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
```

### Example Usage
The following code demonstrates how to create an `Ext.Window` containing a `gmappanel`. The `center` configuration uses `geoCodeAddr` to specify the map's initial location.

```javascript
var mapwin = Ext.create('Ext.Window', {
    layout: 'fit',
    title: 'GMap Window',
    width: 450,
    height: 250,
    items: {
        xtype: 'gmappanel',
        gmapType: 'map',
        center: {
            geoCodeAddr: "221B Baker Street",
            marker: {
                title: 'Holmes Home'
            }
        },
        mapOptions : {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    }
}).show();
```
```

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

### Create a Menu Component

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Menu.js.html

Examples showing how to instantiate a menu, including both standard and plain configurations.

```javascript
Ext.create('Ext.menu.Menu', {
    width: 100,
    margin: '0 0 10 0',
    floating: false,  // usually you want this set to True (default)
    renderTo: Ext.getBody(),  // usually rendered by it's containing component
    items: [{
        text: 'regular item 1'
    },{
        text: 'regular item 2'
    },{
        text: 'regular item 3'
    }]
});
```

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

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

### Platform Configuration and Instance Setup

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Configurator.js.html

Handles platform-specific configuration merging and post-initialization hooks.

```javascript
// If the instanceConfig has a platformConfig in it, we need to merge the active
// rules of that object to make the actual instanceConfig.
if (instanceConfig && instanceConfig.platformConfig) {
    instanceConfig = me.resolvePlatformConfig(instance, instanceConfig);
}

if (firstInstance) {
    // Allow the class to do things once the cachedConfig has been processed.
    // We need to call this method always when the first instance is configured
    // whether or not it actually has cached configs
    if (instance.afterCachedConfig && !instance.afterCachedConfig.$nullFn) {
        instance.afterCachedConfig(instanceConfig);
    }
}

// Now that the cachedConfigs have been processed we can apply the instanceConfig
// and hide the "configs" on the prototype. This will serve as the source for any
// configs that need to initialize from their initial getter call.
// IMPORTANT: "this.hasOwnProperty('config')" is how a config applier/updater can
// tell it is processing the cached config value vs an instance config value.
instance.config = values;
```

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

### Example nodeText function for D3 hierarchy nodes

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.d3.hierarchy.TreeMap.html

An example of a function to retrieve text for a D3 hierarchy node. It gets the 'name' field from the associated Ext.data.TreeModel.

```javascript
nodeText: function (component, node) {
    var record = node.data,
        text = record.get('name');

    return text;
}
```

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

### Create a Resizer Instance

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.resizer.Resizer.html

This example demonstrates how to create a typical Resizer instance. Configure target, handles, and size constraints.

```javascript
Ext.create('Ext.resizer.Resizer', {
    target: 'elToResize',
    handles: 'all',
    minWidth: 200,
    minHeight: 100,
    maxWidth: 500,
    maxHeight: 400,
    pinned: true
});
```

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

### State Management Setup

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.flash.Component.html

Example of how to set up a state provider for state management.

```APIDOC
### Setting the State Provider

To set the state provider for the current page:

```javascript
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));
```
```

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

### Viewport Initialization Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Viewport.js-1.html

This example shows how to create a Viewport using Ext.create, which automatically fills the browser viewport and manages resizing.

```javascript
Ext.create('Ext.container.Viewport', {
    layout: 'fit', // full the viewport with the tab panel

    items: [{
        xtype: 'tabpanel',
        items: [{
            ...
        }]
    }]
});
```

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

### Plugin Configuration Examples

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Manager.js-5.html

Demonstrates different ways to define a plugin, including using a config object with a ptype, a simple ptype string, or direct instantiation via Ext.create.

```javascript
{
    ptype: 'gridviewdragdrop',
    dragText: 'Drag and drop to reorganize'
}
```

```javascript
'gridviewdragdrop'
```

```javascript
Ext.create('Ext.grid.plugin.DragDrop', {
    dragText: 'Drag and drop to reorganize'
})
```

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

### Start a Clock Task with Ext.TaskManager

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

This example demonstrates how to start a simple clock task that updates an HTML element every second. Ensure Ext.Date and Ext.util.TaskRunner are available.

```javascript
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);
```

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

### Define Model, Store, and View

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.view.View.html

Example demonstrating how to define a data model, populate a store, create an XTemplate, and initialize a DataView.

```javascript
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
```

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

### Example Relative Path

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.tree.Panel.html

Demonstrates a relative path for expanding a tree, starting from an existing node.

```javascript
'nodeC/nodeD'
```

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

### Component Initialization and Setup

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/MultiSelect.js.html

Initializes the component by setting up the BoundList and binding the store. The setupItems method handles the creation of the BoundList and optional panel wrapping.

```javascript
pageSize: 10,
    
    initComponent: function(){
        var me = this;
 
        me.items = me.setupItems();
 
        me.bindStore(me.store, true);
 
        me.callParent();
        me.initField();
    },
 
    setupItems: function() {
        var me = this;
        
        me.boundList = new Ext.view.BoundList(Ext.apply({
            anchor: 'none 100%',
            border: 1,
            multiSelect: true,
            store: me.store,
            displayField: me.displayField,
            disabled: me.disabled,
            tabIndex: 0,
            navigationModel: {
                type: 'default'
            }
        }, me.listConfig));
        
        me.boundList.getNavigationModel().addKeyBindings({
            pageUp: me.onKeyPageUp,
            pageDown: me.onKeyPageDown,
            scope: me
        });

        me.boundList.getSelectionModel().on('selectionchange', me.onSelectChange, me);

        // Boundlist expects a reference to its pickerField for when an item is selected (see Boundlist#onItemClick).
        me.boundList.pickerField = me;

        // Only need to wrap the BoundList in a Panel if we have a title.
        if (!me.title) {
            return me.boundList;
        }

        // Wrap to add a title
        me.boundList.border = false;
        
        return {
            xtype: 'panel',
            isAriaRegion: false,
            border: true,
            anchor: 'none 100%',
            layout: 'anchor',
            title: me.title,
            tbar: me.tbar,
            items: me.boundList
        };
    }
```

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

### Ext.app.Util - setupPaths

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.app.Util.html

Sets up application paths based on the application name, folder, and provided path mappings.

```APIDOC
## setupPaths ( appName, appFolder, paths )

### Description
Sets up paths based on the `appFolder` and `paths` configs.
Available since: **6.0.0**

### Parameters
- **appName** (String) - The application name (root namespace).
- **appFolder** (String) - The folder for app sources ("app" by default).
- **paths** (Object) - A set of namespace to path mappings.
```

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

### Ext.calendar.form.AbstractForm - startTimeField Configuration and Methods

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.calendar.form.Edit.html

Configuration for the start time field and methods to get and set its value.

```APIDOC
## Ext.calendar.form.AbstractForm

### Configuration

#### startTimeField : Object

bindable bind
The config for the start time field.

Defaults to:
```json
{
    xtype: 'timefield',
    itemId: 'startTime',
    name: 'startTime',
    margin: '0 0 0 5'
}
```

### Methods

#### getStartTimeField  : Object

Returns the value of startTimeField.

### Returns
Object

#### setStartTimeField  (startTimeField)

Sets the value of startTimeField.

### Parameters

startTimeField :  Object - Description not provided.
```

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

### Class Creation and Configuration

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

Demonstrates how to create new class instances and configure them using the `create` method.

```APIDOC
## POST /api/classes/create

### Description
Creates a new instance of a class with the provided configuration object.

### Method
POST

### Endpoint
/api/classes/create

### Parameters
#### Request Body
- **className** (string) - Required - The name of the class to instantiate.
- **config** (Object) - Required - An object containing configuration properties for the new instance.

### Request Example
```json
{
  "className": "My.cool.Class",
  "config": {
    "someConfig": true
  }
}
```

### Response
#### Success Response (200)
- **instance** (Object) - The newly created instance of the class.

#### Response Example
```json
{
  "instance": "{...}" 
}
```
```

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

### setupScene Method

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.d3.hierarchy.Hierarchy.html

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

```APIDOC
## setupScene

### Description
Protected method called once when the scene (main group) is created.

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

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

### Ext.calendar.form.AbstractForm - startDateField Configuration and Methods

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.calendar.form.Edit.html

Configuration for the start date field and methods to get and set its value.

```APIDOC
## Ext.calendar.form.AbstractForm

### Configuration

#### startDateField : Object

bindable bind
The config for the start date field.

Defaults to:
```json
{
    xtype: 'datefield',
    itemId: 'startDate',
    name: 'startDate',
    allowBlank: false
}
```

### Methods

#### getStartDateField  : Object

Returns the value of startDateField.

### Returns
Object

#### setStartDateField  (startDateField)

Sets the value of startDateField.

### Parameters

startDateField :  Object - Description not provided.
```

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

### Example Absolute Path

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.tree.Panel.html

Demonstrates an absolute path for expanding a tree, starting from the root node ID.

```javascript
'/rootId/nodeA/nodeB/nodeC'
```

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

### Class Creation and Configuration

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.selection.TreeModel.html

Demonstrates how to define a new class and create an instance of it, passing configuration options to the constructor.

```APIDOC
## create Object
static sta
Create a new instance of this Class.
```
Ext.define('My.cool.Class', {
    ... 
});

My.cool.Class.create({
    someConfig: true
});
```

All parameters are passed to the constructor of the class.
### Returns
:Object
the created instance.
```

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

### Ext.util.TaskManager Usage

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.util.TaskManager.html

Example demonstrating how to start a recurring task using Ext.TaskManager to update a clock display.

```APIDOC
## Ext.util.TaskManager

### Description
A static Ext.util.TaskRunner instance that can be used to start and stop arbitrary tasks. It inherits functionality from Ext.util.TaskRunner.

### Usage
Tasks are defined as objects containing a `run` function and an `interval` property. These are passed to `Ext.TaskManager.start()` to begin execution.

### Request Example
```javascript
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);
```
```

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

### Instantiate components using xtype

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.column.Boolean.html

Examples demonstrating the use of xtype for component configuration and instantiation.

```javascript
 items: [
     Ext.create('Ext.form.field.Text', {
         fieldLabel: 'Foo'
     }),
     Ext.create('Ext.form.field.Text', {
         fieldLabel: 'Bar'
     }),
     Ext.create('Ext.form.field.Number', {
         fieldLabel: 'Num'
     })
 ]
```

```javascript
 items: [
     {
         xtype: 'textfield',
         fieldLabel: 'Foo'
     },
     {
         xtype: 'textfield',
         fieldLabel: 'Bar'
     },
     {
         xtype: 'numberfield',
         fieldLabel: 'Num'
     }
 ]
```

```javascript
 defaultType: 'textfield',
 items: [
     { fieldLabel: 'Foo' },
     { fieldLabel: 'Bar' },
     { fieldLabel: 'Num', xtype: 'numberfield' }
 ]
```

```javascript
 var text1 = Ext.create('Ext.form.field.Text', {
     fieldLabel: 'Foo'
 });

 // or alternatively:

 var text1 = Ext.widget({
     xtype: 'textfield',
     fieldLabel: 'Foo'
 });
```

```javascript
Ext.define('MyApp.PressMeButton', {
    extend: 'Ext.button.Button',
    xtype: 'pressmebutton',
    text: 'Press Me'
});
```

```javascript
Ext.define('Foo.form.CoolButton', {
    extend: 'Ext.button.Button',
    xtype: 'ux-coolbutton',
    text: 'Cool!'
});
```

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

### Instantiating a class via Ext.Factory

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

Demonstrates how to create an instance using a type string or a configuration object.

```javascript
Ext.Factory.layout('hbox');
```

```javascript
Ext.Factory.layout({
    type: 'hbox'
});
```

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

### CSS Value Selector Examples

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Query.js.html

Examples of CSS value selectors used to filter elements based on specific CSS property values, including equality, starting with, ending with, containing, divisibility, and inequality checks.

```javascript
E{display=none}
```

```javascript
E{display^=none}
```

```javascript
E{display$=none}
```

```javascript
E{display*=none}
```

```javascript
E{display%=2}
```

```javascript
E{display!=none}
```

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

### Instantiate Classes with Ext.create

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/ClassManager.js.html

Demonstrates various ways to instantiate a class using full names, aliases, xtypes, or configuration objects.

```javascript
// xtype
var window = Ext.create({
    xtype: 'window',
    width: 600,
    height: 800,
    ...
});

// alias
var window = Ext.create('widget.window', {
    width: 600,
    height: 800,
    ...
});

// alternate name
var window = Ext.create('Ext.Window', {
    width: 600,
    height: 800,
    ...
});

// full class name
var window = Ext.create('Ext.window.Window', {
    width: 600,
    height: 800,
    ...
});

// single object with xclass property:
var window = Ext.create({
    xclass: 'Ext.window.Window', // any valid value for 'name' (above)
    width: 600,
    height: 800,
    ...
});
```

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

### Setup Request Parameters in Ext JS

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

Formats and prepares parameters for a request, including 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;
}
```

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

### Ext.plugin.Abstract#constructor

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.plugin.HeaderReorderer.html

Initializes the plugin, setting up its configuration and state.

```APIDOC
## Ext.plugin.Abstract#constructor ( [config] )

### Parameters
- **config** (Object) - _(optional)_ Configuration object.
```

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

### Define animation start state

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.fx.Anim.html

Example configuration for the 'from' property defining the initial state of animated properties.

```javascript
from: {
    opacity: 0,       // Transparent
    color: '#ffffff', // White
    left: 0
}
```

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

### Segmented Button: Multiple Toggle Value Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.button.Segmented.html

Illustrates setting and getting values for a segmented button when `allowMultiple` is true. Values can be indices or child button `value` properties. This example also shows how to clear all selections.

```javascript
var button = Ext.create('Ext.button.Segmented', {
renderTo: Ext.getBody(),
allowMultiple: true,
value: [1, 2], // begin with "Option Two" and "Option Three" selected
items: [{
text: 'Option One'
}, {
text: 'Option Two'
}, {
text: 'Option Three'
}]
});
// Sets value to [0, 2], and sets pressed state of "Option One" and "Option Three"
button.setValue([0, 2]);
console.log(button.getValue()); // [0, 2]
// Remove all pressed buttons, and set value to null
button.setValue(null);
```

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

### Instantiating SizeModel Configurations

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/SizeModel.js.html

Examples of creating SizeModel instances with different properties for layout sizing.

```javascript
new SizeModel({ // jshint ignore:line
    name: 'natural'
});
```

```javascript
new SizeModel({ // jshint ignore:line
    name: 'shrinkWrap'
});
```

```javascript
new SizeModel({ // jshint ignore:line
    name: 'calculatedFromConfigured',
    configured: true,
    calculatedFrom: true,
    names: { width: 'width', height: 'height' }
});
```

```javascript
new SizeModel({ // jshint ignore:line
    name: 'calculatedFromNatural',
    natural: true,
    calculatedFrom: true
});
```

```javascript
new SizeModel({ // jshint ignore:line
    name: 'calculatedFromShrinkWrap',
    shrinkWrap: true,
    calculatedFrom: true
});
```

```javascript
new SizeModel({ // jshint ignore:line
    name: 'constrainedMax',
    configured: true,
    constrained: true,
    names: { width: 'maxWidth', height: 'maxHeight' }
});
```

```javascript
new SizeModel({ // jshint ignore:line
    name: 'constrainedMin',
    configured: true,
    constrained: true,
    names: { width: 'minWidth', height: 'minHeight' }
});
```

```javascript
new SizeModel({ // jshint ignore:line
    name: 'constrainedDock',
    configured: true,
    constrained: true,
    constrainedByMin: true,
    names: { width: 'dockConstrainedWidth', height: 'dockConstrainedHeight' }
});
```

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

### Start a simple clock task using Ext.util.TaskRunner

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/TaskRunner.js.html

This example demonstrates how to create a new TaskRunner instance and start a task that updates a div with the current time every second. The task is configured with a 'run' function and an 'interval'.

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

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

// Start a simple clock task that updates a div once per second
updateClock = function() {
    clock.setHtml(Ext.Date.format(new Date(), 'g:i:s A'));
};

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

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

### Ext.button.Button Configuration Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.chart.series.Bar3D.html

Demonstrates how to define and create an Ext.button.Button with specific configurations like scale, enableToggle, and renderTo. It also shows how to retrieve initial configuration options.

```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
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
```

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

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

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

### Get Range of Nodes

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

Retrieves a range of nodes from a composite element. Specify start and end indices to define the range.

```javascript
composite.slice(2, 5);
```

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

### Ext.button.Button Configuration Example

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

Demonstrates how to define and create an Ext.button.Button with specific configurations like scale, enableToggle, and text. Shows how getInitialConfig retrieves these initial settings.

```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
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
```

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

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

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

### Initialize Drag Operation

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/DragZone.js.html

Handles the initial setup of a drag operation by updating the proxy and triggering the start drag event.

```javascript
onInitDrag : function(x, y){
    this.proxy.update(this.dragData.ddel.cloneNode(true));
    this.onStartDrag(x, y);
    return true;
},
```

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

### Get Cached Editor

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/CellEditing.js-1.html

Retrieves or creates a cached editor for a given column and record. Handles editor configuration and setup.

```javascript
getCachedEditor: function (editorId, record, column) {
        var me = this,
            editors = me.editors,
            editor = editors.getByKey(editorId);
        
        if (!editor) {
            editor = column.getEditor(record);
            if (!editor) {
                return false;
            }
            
            // Allow them to specify a CellEditor in the Column
            if (!(editor instanceof Ext.grid.CellEditor)) {
                // Apply the field's editorCfg to the CellEditor config.
                // See Editor#createColumnField.  A Column's editor config may
                // be used to specify the CellEditor config if it contains a field property.
                editor = Ext.widget(Ext.apply({
                    xtype: 'celleditor',
                    floating: true,
                    editorId: editorId,
                    field: editor
                }, editor.editorCfg));
            }
            
            // Add the Editor as a floating child of the grid
            // Prevent this field from being included in an Ext.form.Basic
            // collection, if the grid happens to be used inside a form
            editor.field.excludeForm = true;
            
            // If the editor is new to this grid, then add it to the grid, and ensure it tells us about its life cycle.
            if (editor.column !== column) {
                editor.column = column;
                column.on('removed', me.onColumnRemoved, me);
            }
            editors.add(editor);
        }
        
        // Inject an upward link to its owning grid even though it is not an added child.
        editor.ownerCmp = me.grid.ownerGrid;
        
        if (column.isTreeColumn) {
            editor.isForTree = column.isTreeColumn;
            editor.addCls(Ext.baseCSSPrefix + 'tree-cell-editor');
        }
        
        // Set the owning grid.
        // This needs to be kept up to date because in a Lockable assembly, an editor
        // needs to swap sides if the column is moved across.
        editor.setGrid(me.grid);
        
        // Keep upward pointer correct for each use - editors are shared between locking sides
        editor.editingPlugin = me;
        editor.collectContainerElement = true;
        
        return editor;
    }
```

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

### setupScene

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.d3.hierarchy.Pack.html

Lifecycle method called once when the main scene group is created.

```APIDOC
## setupScene

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

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

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

### Initialize and Inspect Version

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

Create a version instance and access its numeric components and release suffix.

```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 Initial Configuration Object

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

Retrieves the initial configuration object passed to the constructor. Useful for inspecting component setup.

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

btn.getInitialConfig()
```

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

### Get Initial Configuration Object

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

Retrieves the initial configuration object passed to the constructor. Useful for inspecting component setup.

```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()
```

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

### Get Rightmost Editable Position

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

Finds the rightmost position in the mask that is not a fixed character, starting from a given position and moving right.

```javascript
getEditPosRight: function (pos) {
            var mask = this._mask,
                len = mask.length,
                i;

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

            return null;
        }
```

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

### Base Configuration and Setup

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.plugin.CellEditing.html

Methods for setting configuration options and listeners.

```APIDOC
## setConfig ( name, [value] ) : Ext.Base

### Description
Sets a single/multiple configuration options.

### Method
setConfig

### Parameters
#### Path Parameters
- **name** (String/Object) - The name of the property to set, or a set of key value pairs to set.
- **value** (Object) - Optional - The value to set for the name parameter.

### Returns
:Ext.Base - this
```

```APIDOC
## setListeners

### Description
See listeners.

### Method
setListeners

### Returns
:void
```

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

### Get Leftmost Editable Position

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

Finds the leftmost position in the mask that is not a fixed character, starting from a given position and moving left.

```javascript
getEditPosLeft: function (pos) {
            for (var i = pos; i >= 0; --i) {
                if (!this.isFixedChar(i)) {
                    return i;
                }
            }

            return null;
        }
```

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

### Ext.button.Button Initial Config Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.draw.modifier.Modifier.html

Illustrates how getInitialConfig() retrieves configuration options passed during instance creation.

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


```

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

### Get Contiguous Selection

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.selection.Columns.html

Returns the start and end columns of a visually contiguous selection. This is used to enable features like SelectionReplicator.

```javascript
Ext.grid.selection.Columns.getContiguousSelection();
```

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

### Instantiate and Log Ext.Version

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

Demonstrates how to create a new Ext.Version instance with a version string and log its string representation. This is useful for initializing version tracking.

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

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

### Ext.ux.event.Driver#start

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.ux.event.Driver.html

Starts this object. If this object is already started, nothing happens.

```APIDOC
## start

### Description
Starts this object. If this object is already started, nothing happens.
```

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

### Get Text Selection Range

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.dom.ButtonElement.html

Returns the selection range of an input element as an array containing start, end, and direction values.

```javascript
 [ start, end, direction ]
```

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

### Instantiating Components with Ext.widget

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.button.Button.html

Illustrates how to manually instantiate a component using Ext#widget with a configuration object, providing an alternative to Ext.create.

```javascript
var text1 = Ext.create('Ext.form.field.Text', {
    fieldLabel: 'Foo'
});

// or alternatively:

var text1 = Ext.widget({
    xtype: 'textfield',
    fieldLabel: 'Foo'
});
```

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

### getElement Method

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

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.

```APIDOC
## getElement ( info )

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

### Method
(Implicitly called, typically part of object lifecycle)

### Endpoint
N/A (Instance method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **info** (Ext.drag.Info) - Required - Drag info

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

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

### Ext JS Button Initial Config Example

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.calendar.dd.DaysBodySource.html

Demonstrates how getInitialConfig() returns initial configuration options, including those 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
// 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'.
```

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

### Configure visible days in calendar view

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.calendar.panel.Weeks.html

Example configuration for showing a specific number of days starting from a specific day of the week.

```javascript
 {
     visibleDays: 5,
     firstDayOfWeek: 1 // Monday
 }
```

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

### Get First Day of Month

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Date.js-1.html

Calculates the day of the week for the first day of the month. Useful for determining the starting day for calendar views.

```javascript
getFirstDayOfMonth : function(date) {
        var day = (date.getDay() - (date.getDate() - 1)) % 7;
        return (day < 0) ? (day + 7) : day;
    }
```

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

### Add Plugins

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

Examples of adding plugins using strings or configuration objects.

```javascript
 list.addPlugin('pullrefresh');
```

```javascript
 list.addPlugin({
     type: 'pullrefresh',
     pullRefreshText: 'Pull to refresh...'
 });
```

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

### Get Range of Items

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Bag.js.html

Extracts a slice of items from the collection based on start and end indices. Handles out-of-bounds indices gracefully by clipping them.

```javascript
getRange: function (begin, end) {
        var items = this.items,
            length = items.length,
            range;

        if (!length) {
            range = [];
        } else {
            range = Ext.Number.clipIndices(length, [begin, end]);
            range = items.slice(range[0], range[1]);
        }

        return range;
    }
```

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

### Component Initialization and Configuration

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

Handles component setup, including legacy configuration mapping, layout adjustments, and state event registration.

```javascript
initComponent: function () {
    var me = this,
        emptyCls = me.emptyCls;

    if (me.allowOnlyWhitespace === false) {
        me.allowBlank = false;
    }

    if (me.grow) {
        me.liquidLayout = false;
    }

    //<debug>
    if (me.size) {
        Ext.log.warn('Ext.form.field.Text "size" config was deprecated in Ext 5.0. Please specify a "width" or use a layout instead.');
    }
    //</debug>
    // In Ext JS 4.x the layout system used the following magic formula for converting
    // the "size" config into a pixel value.
    if (me.size) {
        me.defaultBodyWidth = me.size * 6.5 + 20;
    }

    if (!me.onTrigger1Click) {
        // for compat with 4.x TriggerField
        me.onTrigger1Click = me.onTriggerClick;
    }

    me.callParent();

    if (me.readOnly) {
        me.setReadOnly(me.readOnly);
    }
    me.fieldFocusCls = me.baseCls + '-focus';
    me.emptyUICls = emptyCls + ' ' + emptyCls + '-' + me.ui;
    me.addStateEvents('change');
}
```

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

### Instantiating Ext.Component

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

Demonstrates how to create and render a basic Ext.Component with HTML content.

```APIDOC
## Instantiating Ext.Component

### Description
This example shows how to create a basic Ext.Component and render it to the document body with specified HTML content and dimensions.

### Method
`Ext.create()`

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

### Request Body
```json
{
  "xtype": "component",
  "html": "Hello world!",
  "width": 300,
  "height": 200,
  "padding": 20,
  "style": {
    "color": "#FFFFFF",
    "backgroundColor": "#000000"
  },
  "renderTo": "Ext.getBody()"
}
```

### Request Example
```javascript
Ext.create('Ext.Component', {
    html: 'Hello world!',
    width: 300,
    height: 200,
    padding: 20,
    style: {
        color: '#FFFFFF',
        backgroundColor:'#000000'
    },
    renderTo: Ext.getBody()
});
```

### Response
#### Success Response (200)
N/A (Client-side rendering)

#### Response Example
N/A
```

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

### Get Record Range

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.data.Store.html

Gathers a range of Records from the store between the specified start and end indices. This method is affected by any active filters on the store.

```javascript
store.getRange(start, end)
```

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

### Component Creation Examples

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/ComponentQuery.js.html

Examples of creating components with specific CSS classes for matching.

```javascript
Ext.create('Ext.panel.Panel', {
    cls: 'foo-cls my-cls bar-cls'
});

Ext.create('Ext.window.Window', {
    cls: 'my-cls'
});
```

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

### Handle Scene Resize Event

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Svg.js.html

Example of using the sceneresize event to perform setup logic on the first resize or handle subsequent updates.

```javascript
listeners: {
    sceneresize: function (component, scene, rect) {
        if (!component.size) {
             // set things up
        } else {
             // handle resize
        }
    }
}
```

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

### Ext JS Button Initial Config Example

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

Demonstrates how getInitialConfig works with a custom Ext.button.Button definition and instance. Shows how to retrieve all initial 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'
});


```

```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'.

```

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

### Get Calendar Visible Range

Source: https://docs.sencha.com/extjs/6.6.0/classic/src/Days.js-2.html

Returns the currently visible date range, cloning the start and end dates. Recalculates if the view is in a configuring state.

```javascript
getVisibleRange: function() {
    var D = Ext.Date,
        range;

    if (this.isConfiguring) {
        this.recalculate();
    }
    range = this.dateInfo.active;

    return new Ext.calendar.date.Range(D.clone(range.start), D.clone(range.end));
}
```

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

### Get Records in a Range

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.data.TreeStore.html

Retrieves a range of records from the store based on specified start and end indices. This operation is affected by any active filtering on the store.

```javascript
store.getRange(start, end);
```

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

### Viewport Implementation Examples

Source: https://docs.sencha.com/extjs/6.6.0/classic/Ext.plugin.Viewport.html

Examples showing the traditional approach using Ext.container.Viewport versus the plugin-based approach for flexible component usage.

```javascript
 Ext.create('Ext.container.Viewport', {
     layout: 'fit', // full the viewport with the tab panel

     items: [{
         xtype: 'tabpanel',
         items: [{
             ...
         }]
     }]
 });
```

```javascript
 Ext.create('Ext.tab.Panel', {
     plugins: {
         viewport: true
     },

     items: [{
         ...
     }]
 });
```

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

### Instantiating Components with Configuration Objects

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

Shows how to manually instantiate a component using either Ext.create with a class name or Ext.widget with an 'xtype' and configuration object.

```javascript
var text1 = Ext.create('Ext.form.field.Text', {
     fieldLabel: 'Foo'
 });
```

```javascript
var text1 = Ext.widget({
     xtype: 'textfield',
     fieldLabel: 'Foo'
 });
```
Tokens:
Raw