Sencha Ext JS 7.9.0 Classic

https://docs.sencha.com/extjs/7.9.0/classic/
Admin
Sencha Ext JS is a comprehensive JavaScript framework for building rich, interactive web...
Tokens:14,345,325
Snippets:164,845
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Get Initial Configuration Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.chart.series.sprite.Bar.html

Demonstrates how to retrieve initial configuration options passed to a class instance. It shows how to get the entire configuration object or a specific configuration value 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'
});

// 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 Config Example

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

Demonstrates how to retrieve initial configuration options passed to a class instance. It shows how to get the entire config object or a specific property value.

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

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

### Example: Get All Initial Configuration Options

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

Demonstrates retrieving all initial configuration options passed to the create method for an Ext.button.Button instance.

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

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

### Get Initial Configuration Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.d3.axis.Axis.html

Demonstrates how to retrieve initial configuration options passed to a class instance. This is useful for inspecting 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'
});

// Get all initial configs
console.log(btn.getInitialConfig());

// Get a specific initial config
console.log(btn.getInitialConfig('text'));
```

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

### Setup Scene and Get Scale Labels

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/TreeMap.js.html

Calls the parent setupScene method and then retrieves the scaleLabels configuration. This is primarily to trigger any side effects associated with getting that configuration.

```javascript
setupScene: function(scene) {
            this.callParent([scene]);
            this.getScaleLabels(); // interested in side effects
        }
```

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

### Example: Get Initial Config for a Specific Property

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

Demonstrates retrieving the initial configuration value for a specific property ('text') from an Ext.button.Button instance.

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

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

### Get Start Param

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.data.proxy.Direct.html

Returns the configured name for the start parameter.

```javascript
getStartParam()
```

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

### getQuickStart

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.ux.desktop.TaskBar.html

Returns the configuration object for the Quick Start toolbar. Derived classes can override this method to modify the configuration.

```APIDOC
## getQuickStart

### Description
This method returns the configuration object for the Quick Start toolbar. A derived class can override this method, call the base version to build the config and then modify the returned object before returning it.

### Method
(Implicitly public, typically called by framework or derived classes)

### Returns
:Object - The configuration object for the Quick Start toolbar.
```

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

### GET /users with start and limit

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Ajax.js-1.html

Demonstrates configuring the AjaxProxy to use 'start' and 'limit' parameters for read requests.

```APIDOC
## GET /users with start and limit

### Description
This example shows how to configure the AjaxProxy to send 'start' and 'limit' parameters for read operations, which is an alternative to using page parameters.

### Method
GET

### Endpoint
/users

### Query Parameters
- **start** (Number) - Required - The starting index of the records to retrieve.
- **limit** (Number) - Required - The maximum number of records to retrieve.

### Request Example
```javascript
var proxy = new Ext.data.proxy.Ajax({
    url: '/users'
});

var operation = proxy.createOperation('read', {
    start: 50,
    limit: 25
});

proxy.read(operation); // GET /users?start=50&limit=25
```

### Response
#### Success Response (200)
- **data** (Array) - The array of records returned.
- **total** (Number) - The total number of records available.

#### Response Example
```json
{
    "data": [
        {"id": 51, "name": "User 51"},
        {"id": 52, "name": "User 52"}
    ],
    "total": 100
}
```
```

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

### GET /users with custom start and limit parameters

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Ajax.js-1.html

Demonstrates configuring the AjaxProxy with custom parameter names for start and limit.

```APIDOC
## GET /users with custom start and limit parameters

### Description
This example shows how to customize the parameter names for start and limit when using the AjaxProxy.

### Method
GET

### Endpoint
/users

### Query Parameters
- **startIndex** (Number) - Required - The starting index of the records to retrieve.
- **limitIndex** (Number) - Required - The maximum number of records to retrieve.

### Request Example
```javascript
var proxy = new Ext.data.proxy.Ajax({
    url: '/users',
    startParam: 'startIndex',
    limitParam: 'limitIndex'
});

var operation = proxy.createOperation('read', {
    start: 50,
    limit: 25
});

proxy.read(operation); // GET /users?startIndex=50&limitIndex=25
```

### Response
#### Success Response (200)
- **data** (Array) - The array of records returned.
- **total** (Number) - The total number of records available.

#### Response Example
```json
{
    "data": [
        {"id": 51, "name": "User 51"},
        {"id": 52, "name": "User 52"}
    ],
    "total": 100
}
```
```

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

### init

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.tip.QuickTipManager.html

Initializes the global QuickTips instance and prepares any quick tips. It can optionally render the QuickTips container immediately and accept a configuration object for the created QuickTip.

```APIDOC
## init ( [autoRender], [config] )

### Description
Initializes the global QuickTips instance and prepare any quick tips. Optionally renders the QuickTips container immediately and accepts a configuration object for the created QuickTip.

### Parameters
* **autoRender** (Boolean) - Optional - True to render the QuickTips container immediately to preload images. Defaults to: true
* **config** (Object) - Optional - Configuration object for the created QuickTip. Can specify an `xtype` or `className` property, or other configuration properties for the component.

### Returns
* Boolean - Indicates if initialization was successful.
```

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

### Get Selection Range - Ext JS Spreadsheet Model

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Rows.js.html

Returns the current selection range as an array of [start, end] row indices. Handles cases where start is null or start > end.

```javascript
getRange: function() {
    var start = this.rangeStart,
        end = this.rangeEnd;

    if (start == null) {
        return [0, -1];
    }
    else if (start <= end) {
        return [start, end];
    }

    return [end, start];
}
```

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

### Get Quick Start Toolbar Configuration

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.ux.desktop.TaskBar.html

Retrieves the configuration object for the Quick Start toolbar. Derived classes can override this to modify the configuration.

```javascript
getQuickStart: function() {
    return this.quickStart;
}
```

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

### Ext.application Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Player.js.html

Example of bootstrapping an Ext JS application. This sets up the application's namespace and launches it.

```javascript
Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('MyApp.view.MyPanel', {
            renderTo: Ext.getBody()
        });
    }
});
```

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

### base

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.sparkline.Bullet.html

Sets or gets the base start number for the sparkline. When set to a number, it changes the starting point of the sparkline's scale. Defaults to null.

```APIDOC
## base : Number

### Description
Set this to a number to change the base start number.

### Defaults
```
null
```
```

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

### Get Curve Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.chart.series.Line.html

Retrieves the current curve configuration for the line series.

```javascript
getCurve()
```

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

### Instantiate and Log Ext.Version

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

Demonstrates how to create a new Ext.Version instance with a version 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
```

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

### Initialize and Configure QuickTips Singleton

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.tip.QuickTipManager.html

Initializes the QuickTips singleton and applies global configuration settings such as maxWidth, minWidth, and showDelay. This ensures all subsequent tooltips adhere to these global settings.

```javascript
// Init the singleton. Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();
// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
maxWidth: 200,
minWidth: 100,
showDelay: 50 // Show 50ms after entering target
});
```

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

### setup Method

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

Placeholder for setup logic executed when the info object is created. Defaults to a private function.

```javascript
Ext.privateFn
```

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

### Cache Initialization Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Cache.js.html

Demonstrates how to initialize an Ext.util.Cache instance with custom miss and evict functions.

```APIDOC
## Cache Initialization

### Description
Initialize a cache with specific logic for handling cache misses and item eviction.

### Example Usage
```javascript
this.itemCache = new Ext.util.Cache({
    maxSize: 100,
    miss: function (key) {
        // Logic to create a new cache item
        return new CacheItem(key);
    },
    evict: function (key, cacheItem) {
        // Logic to clean up when an item is evicted
        cacheItem.destroy();
    }
});

// Retrieving an item from the cache
var item = this.itemCache.get(someKey);
```

### Parameters for Constructor
- **config** (Object) - Configuration object for the cache.
  - **miss** (Function) - Function to call when a cache miss occurs. Accepts the key and any additional arguments passed to `get`.
  - **evict** (Function) - Function to call when an item is evicted from the cache. Accepts the key and the cache item's value.
```

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

### getProxy

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.panel.Proxy.html

Gets the proxy element. This is the element that represents where the Panel was before the drag operation started.

```APIDOC
## getProxy

### Description
Gets the proxy element. This is the element that represents where the Panel was before we started the drag operation.

### Returns
:Ext.dom.Element - The proxy's element.
```

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

### Get Calendar Move Base Value

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

Retrieves the starting date of the month in local time, used as a base for navigation. This is essential for determining the starting point when moving between calendar months.

```javascript
return this.utcToLocal(this.dateInfo.month.start);
```

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

### Start a Simple Clock Task with Ext.util.TaskRunner

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

This example demonstrates how to start a simple clock task using Ext.util.TaskRunner that updates a div element every second. It requires an instance of TaskRunner.

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

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

### Controller Configuration Examples

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

Demonstrates how to configure a controller for a component using a string alias, a configuration object, or an instance.

```javascript
Ext.define('MyApp.UserController', {
    alias: 'controller.user'
});

Ext.define('UserContainer', {
    extend: 'Ext.container.container',
    controller: 'user'
});
```

```javascript
// Or
Ext.define('UserContainer', {
    extend: 'Ext.container.container',
    controller: {
        type: 'user',
        someConfig: true
    }
});
```

```javascript
// Can also instance at runtime
var ctrl = new MyApp.UserController();
var view = new UserContainer({
    controller: ctrl
});
```

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

### Initializing and Configuring QuickTips

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.tip.QuickTipManager.html

This snippet shows how to initialize the QuickTipManager, apply global configuration settings to its instance, and register a quick tip programmatically for a specific element.

```APIDOC
## Initialize and Configure QuickTips

### Description
Initializes the QuickTipManager singleton and applies global configuration settings. It also demonstrates how to manually register a quick tip with specific properties for a target element.

### Methods
- `Ext.tip.QuickTipManager.init()`: Initializes the singleton.
- `Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), config)`: Applies configuration properties to the singleton's QuickTip instance.
- `Ext.tip.QuickTipManager.register(config)`: Registers a quick tip for a specific element.

### Configuration Properties (Singleton)
- `maxWidth` (number): Maximum width of the tooltip.
- `minWidth` (number): Minimum width of the tooltip.
- `showDelay` (number): Delay in milliseconds before showing the tooltip.

### Configuration Properties (Target Element)
- `target` (string/HTMLElement): The element to associate the tooltip with.
- `title` (string): The title of the tooltip.
- `text` (string): The main text content of the tooltip.
- `width` (number): The width of the tooltip.
- `dismissDelay` (number): Delay in milliseconds before the tooltip is hidden after hovering.

### Request Example
```javascript
// Init the singleton. Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
    maxWidth: 200,
    minWidth: 100,
    showDelay: 50 // Show 50ms after entering target
});

// Create a small panel to add a quick tip to
Ext.create('Ext.container.Container', {
    id: 'quickTipContainer',
    width: 200,
    height: 150,
    style: {
        backgroundColor:'#000000'
    },
    renderTo: Ext.getBody()
});

// Manually register a quick tip for a specific element
Ext.tip.QuickTipManager.register({
    target: 'quickTipContainer',
    title: 'My Tooltip',
    text: 'This tooltip was added in code',
    width: 100,
    dismissDelay: 10000 // Hide after 10 seconds hover
});
```
```

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

### Create and Show a Basic Window

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Window.js.html

This example demonstrates how to create and display a simple Ext.window.Window with a title, dimensions, and a 'fit' layout containing a grid. It's useful for creating modal dialogs or application windows.

```javascript
Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {   // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        // One header just for show. There's no data
        columns: [{ header: 'World' }],
        store: Ext.create('Ext.data.ArrayStore', {})   // A dummy empty data store
    }
}).show();
```

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

### Pivot Grid Matrix Configuration Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Grid.js-1.html

Example of configuring the pivot matrix for a pivot grid, defining data sources, axes, and aggregations. This setup is used to define how data is pivoted and displayed.

```javascript
{
    xtype: 'pivotgrid',
    matrix: {
        type: 'local',
        store: 'yourStoreId'  // or a store instance
        rowGrandTotalsPosition: 'first',
        leftAxis: [{
            dataIndex: 'country',
            direction: 'DESC',
            header: 'Countries'
            width: 150
        }],
        topAxis: [{
            dataIndex: 'year',
            direction: 'ASC'
        }],
        aggregate: [{
            dataIndex: 'value',
            header: 'Total',
            aggregator: 'sum',
            width: 120
        }]
    }
}
```

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

### Get Selection Start Record

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

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

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

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

### Object Configuration Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.calendar.view.Day.html

Shows how to configure object-based options. This is useful for setting multiple related configurations at once.

```javascript
compactOptions : Object
Defaults to:
null
```

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

### Basic Summary Grid Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.grid.feature.Summary.html

Demonstrates how to create a grid with a summary feature. This example sets up a data model, a grid panel with the 'summary' feature enabled, and populates it with sample data.

```javascript
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', {
name: 'mark',
type: 'int'
}]
});
Ext.create('Ext.grid.Panel', {
width: 400,
height: 200,
title: 'Summary Test',
style: 'padding: 20px',
renderTo: document.body,
features: [{
ftype: 'summary'
}],
store: {
model: 'TestResult',
data: [{
student: 'Student 1',
mark: 84
},{
student: 'Student 2',
mark: 72
},{
student: 'Student 3',
mark: 96
},{
student: 'Student 4',
mark: 68
}]
}
});
```

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

### Get Event Y Coordinate

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.event.Event.html

Retrieves the y-coordinate of the event. No specific setup is required beyond having an event object.

```javascript
event.getY()
```

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

### Month Panel Configuration Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.calendar.panel.Month.html

Example of configuring the initial date and first day of the week for the Month panel. The `value` config sets the target month, and `firstDayOfWeek` determines the starting day of the week display.

```javascript
{
    value: new Date(2010, 0, 1) // Fri
    firstDayOfWeek: 0 // Sunday
}
```

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

### Example: Dynamic Button Text Initialization

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Component.js.html

Demonstrates how to set dynamic configuration values, like button text, during the `initComponent` phase. This example also shows setting `renderTo` and calling `callParent`.

```javascript
Ext.define('DynamicButtonText', {
        extend: 'Ext.button.Button',

        initComponent: function() {
             this.text = new Date();
             this.renderTo = Ext.getBody();
             this.callParent();
        }
    });

    Ext.onReady(function() {
            Ext.create('DynamicButtonText');
    });
```

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

### enable

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.tip.QuickTipManager.html

Enables quick tips globally.

```APIDOC
## enable

### Description
Enables quick tips globally.

### Method
(Implicitly called, likely part of an object's lifecycle)

### Endpoint
N/A (Method of an object instance)

### Parameters
None.
```

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

### Get Current Operation

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

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

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

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

  return out;
}
```

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

### Get Range of Nodes

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

Retrieves a range of nodes from the 'all' collection. Accepts optional start and end indices.

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

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

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

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

### Initializing QuickTips

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.data.NodeInterface.html

This code initializes the Ext.tip.QuickTipManager, which is necessary for displaying tooltips on tree nodes that have `qtitle` and `qtip` configurations. It should be called unless Ext.application() is used, which initializes it automatically.

```javascript
Ext.tip.QuickTipManager.init();
```

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

### Initial Config Object Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.data.schema.OneToOne.html

Shows the expected output of getInitialConfig() when called on the example button instance.

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

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

### Get Record Range

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.data.AbstractStore.html

Gathers a range of records between specified start and end indices. This method is affected by filtering.

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

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

### Basic Window Configuration

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

Demonstrates the fundamental configuration options for creating a basic Ext.window.Window instance. This includes setting title, width, height, and layout.

```javascript
Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: [{
        border: false,
        html: '<div>Hello World!</div>'
    }]
});
```

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

### visibleDays

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.calendar.view.Days.html

Gets or sets the number of days to display in the calendar view, starting from the current value. This is a bindable property.

```APIDOC
## visibleDays : Number

### Description
Gets or sets the number of days to show starting from the value. This is a bindable property.

### Default Value
```
4
```

### Usage
```javascript
// Get value
var days = daysView.getVisibleDays();

// Set value
daysView.setVisibleDays(7);
```
```

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

### Get Default Listener Scope Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.chart.series.Line.html

Returns the boolean value indicating if the component is the default listener scope.

```javascript
getDefaultListenerScope()
```

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

### pinchstart

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

Fired once when a pinch has started.

```APIDOC
## pinchstart

### Description
Fired once when a pinch has started.

### Parameters

*   **event** (Ext.event.Event) - The Ext.event.Event event encapsulating the DOM event.
*   **node** (HTMLElement) - The target of the event.
*   **options** (Object) - The options object passed to Ext.mixin.Observable.addListener.
*   **eOpts** (Object) - The options object passed to Ext.util.Observable.addListener.
```

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

### Load and Start Ext.app.Application

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

Loads the Ext.app.Application class and initiates its startup process with the provided configuration. This method should be called after the page is ready.

```javascript
Ext.application(config)
```

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

### Get Event X Coordinate

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.event.Event.html

Retrieves the x-coordinate of the event. No specific setup is required beyond having an event object.

```javascript
event.getX()
```

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

### Class Initialization with Config

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.form.trigger.Spinner.html

Shows how to initialize a class instance with a configuration object, overriding default settings. This is a common pattern for setting up components.

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

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

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

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

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

### Get Field Type

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.data.field.Date.html

Retrieves a string representation of the field's data type. No specific setup is required.

```javascript
var type = myField.getType();
```

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

### Radar Chart Configuration Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.chart.series.Radar.html

This example demonstrates how to configure a Radar series within a polar chart. It includes basic setup for the chart, store, and series type, along with essential fields like angleField and radiusField.

```APIDOC
## Radar Chart Configuration Example

### Description
This code snippet shows a basic configuration for a Radar chart using Ext.create. It sets up a polar chart with interactions, a data store, and defines the radar series with its associated fields and styles.

### Method
Ext.create

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

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
Ext.create({
    xtype: 'polar',
    renderTo: document.body,
    width: 500,
    height: 400,
    interactions: 'rotate',
    store: {
        fields: ['name', 'data1'],
        data: [
            { 'name': 'metric one', 'data1': 8 },
            { 'name': 'metric two', 'data1': 10 },
            { 'name': 'metric three', 'data1': 12 },
            { 'name': 'metric four', 'data1': 1 },
            { 'name': 'metric five', 'data1': 13 }
        ]
    },
    series: {
        type: 'radar',
        angleField: 'name',
        radiusField: 'data1',
        style: {
            fillStyle: '#388FAD'
        }
    }
});
```

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

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

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

### Instantiating and Using Classes with Statics

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

Provides examples of creating instances of the defined classes and interacting with their static and instance members. Demonstrates how static properties are shared across all instances.

```javascript
var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'

var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
alert(clone.groupName);                 // alerts 'Cat'

alert(My.Cat.totalCreated);             // alerts 3
```

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

### getRange

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.data.ErrorCollection.html

Retrieves a range of items (errors) from the collection. It allows specifying a start and end index to get a subset of the collection.

```APIDOC
## getRange ( [start], [end] )

### Description
Returns a range of items in this collection.

### Parameters
#### Path Parameters
* **start** (Number) - Optional - The starting index. Defaults to 0.
* **end** (Number) - Optional - The ending index. Defaults to the last item.

### Returns
* **Array** - An array of items
```

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

### Basic HtmlEditor Example

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.form.field.HtmlEditor.html

Renders an HtmlEditor with default options. Ensure Ext.tip.QuickTipManager is initialized for tooltips.

```javascript
Ext.tip.QuickTipManager.init(); // enable tooltips
Ext.create('Ext.form.HtmlEditor', {
    width: 580,
    height: 250,
    renderTo: Ext.getBody()
});
```

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

### getElement

Source: https://docs.sencha.com/extjs/7.9.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 ) : 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.
```

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

### Instantiating Components with Ext.widget

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.grid.column.RowNumberer.html

Shows how to manually instantiate a component using a configuration object with Ext#widget, 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'
 });
```

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

### Ext.application

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

Loads and starts an Ext.app.Application with the given configuration.

```APIDOC
## application ( config )

### Description
Loads Ext.app.Application class and starts it up with given configuration after the page is ready.
See `Ext.app.Application` for details.
```

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

### Setup Request Parameters

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

Constructs a parameter object for requests, including the calendar ID, start date, and end date, formatted according to the configured date format. Ensure the calendar, start, and end parameters are properly set 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 Panel with Tools

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Tool.js.html

Example of creating an Ext.panel.Panel and configuring its 'tools' array with various tool types, glyphs, and callbacks.

```javascript
Ext.create('Ext.panel.Panel', {
    width: 200,
    height: 200,
    renderTo: document.body,
    title: 'A Panel',
    tools: [{
        type: 'help',
        callback: function() {
            // show help here
        }
    }, {
        itemId: 'reply',
        glyph: 'xf112@FontAwesome', // Reply icon
        hidden: true,
        callback: function() {
            // do reply
        }
    }, {
        type: 'search',
        callback: function (panel) {
            // do search
            panel.down('#refresh').show();
        }
    }]
});
```

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

### Get Move Base Value

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

Retrieves the base value for navigation, typically the start of the current month, converted to local time.

```APIDOC
## getMoveBaseValue

### Description
Returns the base value used for navigation, which is the start date of the month, converted from UTC to local time.

### Method
`getMoveBaseValue()`

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

### Parameters
None

### Request Body
N/A

### Response
- **Date** (Date) - The start date of the month in local time.

### Response Example
```json
"2023-10-01T00:00:00.000"
```
```

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

### Get Range of Items

Source: https://docs.sencha.com/extjs/7.9.0/classic/src/Collection.js.html

Retrieves a range of items from the collection based on start and end indices. The item at the end index is not included.

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

        //<debug>
        if (begin > end) {

```

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

### Create and Use Model Instances

Source: https://docs.sencha.com/extjs/7.9.0/classic/Ext.data.Model.html

Demonstrates creating an instance of the User model and calling its custom methods. Shows how to retrieve field values after modification.

```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"
```
Tokens:
Raw