### Get Initial Config Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.data.validator.CIDRv4.html

Illustrates how to retrieve initial configuration options passed to a class instance. It shows how to get all configurations 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
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
```

```javascript
'Test Button'
```

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

### TaskManager Usage Example

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

Demonstrates the equivalent usage of starting a task using the singleton Ext.TaskManager.

```APIDOC
## TaskManager Usage Example

### Description
This example illustrates how to use the `Ext.TaskManager` singleton to achieve the same result as the `Ext.util.TaskRunner` example. It schedules a task to update a clock element every second.

### Method
`Ext.TaskManager.start(taskConfig)`

### Parameters
#### Task Configuration Object (`taskConfig`)
- **run** (Function) - The function to execute.
- **interval** (Number) - The frequency in milliseconds to run the task.

### Request Example
```javascript
var clock,
    updateClock,
    task;

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

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

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

### Stopping a Task
Similar to `TaskRunner`, tasks started via `TaskManager` can be stopped using the `destroy()` method on the task object.

```javascript
task.destroy();
```
```

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

### Get Initial Configuration Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.chart.grid.VerticalGrid.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 property's 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'
});

// Returns the full config object including xtype, renderTo, and text
btn.getInitialConfig();

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

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

### Get Initial Config Example - Ext.Base

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.exporter.data.Table.html

Demonstrates how to retrieve initial configuration options passed to a class instance. It shows how to get all configs or a specific one, and optionally peek at raw values or only initialized ones.

```javascript
Ext.Base.prototype.getInitialConfig
```

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

### Get Initial Configuration Example

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.chart.series.Radar.html

Demonstrates how to retrieve initial configuration options passed to a component's constructor. This is useful for inspecting or reusing configuration 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'
});

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

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

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

### Initial Sprite Setup

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.draw.Matrix.html

Sets up a basic Ext.draw.Container with a red rectangle sprite. This serves as the starting point for demonstrating transformations.

```javascript
var drawContainer = new Ext.draw.Container({
renderTo: Ext.getBody(),
width: 380,
height: 380,
sprites: [{
type: 'rect',
width: 100,
height: 100,
fillStyle: 'red'
}]
});
```

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

### Ext.form.action.DirectLoad Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.form.action.DirectLoad.html

This example demonstrates how to configure and use Ext.form.action.DirectLoad to load data into a form using Ext Direct. It shows the basic setup for a form and how to associate a DirectLoad action with it.

```javascript
Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',
    xtype: 'myform',

    initComponent: function() {
        this.callParent(arguments);
        this.getForm().load({
            url: '/api/data',
            method: 'POST',
            params: {
                id: 123
            },
            success: function(form, action) {
                console.log('Data loaded successfully');
            },
            failure: function(form, action) {
                console.log('Failed to load data');
            }
        });
    }
});

Ext.create('MyApp.view.MyForm', {
    renderTo: Ext.getBody()
});
```

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

### Get Initial Configuration Example

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.device.filesystem.Chrome.html

Demonstrates how to retrieve initial configuration options passed to a class constructor. Use 'getInitialConfig()' to get all options or 'getInitialConfig("name")' for a specific option.

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

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

### setup

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.calendar.dd.WeeksSource.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
```
```

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

### Get Selection Start

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

Retrieves the starting record for a selection range.

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

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

### Get Initial Configuration Example

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

Demonstrates how to retrieve the initial configuration object passed to a class instance or a specific configuration option 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 the full config object passed to create
btn.getInitialConfig();

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

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

### init Method

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

Initializes the desktop application's components, including QuickTips, modules, and the desktop viewport.

```APIDOC
## init

### Description
Initializes the desktop application's components, including QuickTips, modules, and the desktop viewport. This method is called automatically when the application is ready.
```

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

### Get Initial Config Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.mixin.Bufferable.html

Retrieves the initial configuration object passed to the constructor or a specific config option. This example shows how to get the full initial config and a specific 'text' config.

```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 initial config object
btn.getInitialConfig();

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

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

### Transformed HTTP GET Request Parameters

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/Default.js-2.html

Example of how the arguments to Ext.device.Communicator.send are transformed into URL parameters for an HTTP GET request.

```text
?quality=75&width=500&height=500&command=Camera%23capture&onSuccess=3&onError=5

```

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

### doInit

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/Application.js.html

Performs the initial setup for the application, including initializing the namespace and calling the parent class's initialization.

```APIDOC
## doInit

### Description
Initializes the application by setting up its namespace and calling the parent class's initialization method.

### Parameters
#### Path Parameters
- **app** (Object) - Required - The application instance to initialize.
```

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

### Getting the Proxy Element (Drag Operation)

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

Gets the proxy element, which represents the Panel's position before a drag operation started.

```javascript
Ext.panel.Proxy.getProxy()
```

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

### Get Start Parameter Name

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.data.proxy.Direct.html

Retrieves the name of the parameter used for the starting record index. This is a shorthand for accessing the 'startParam' configuration.

```javascript
getStartParam()
```

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

### init

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

Initializes the global QuickTips instance and prepares any quick tips. This method should be called before using any quick tip functionality.

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

### Description
Initializes the global QuickTips instance and prepare any quick tips.

### Parameters
*   **autoRender** : Boolean _(optional)_
    True to render the QuickTips container immediately to preload images. Defaults to: true
*   **config** : Object _(optional)_
    config object for the created QuickTip. By default, the Ext.tip.QuickTip class is instantiated, but this can be changed by supplying an xtype property or a className property in this object. All other properties on this object are configuration for the created component.

### Returns
:Boolean
True if initialization was successful.
```

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

### Initialize and Configure QuickTips Manager

Source: https://docs.sencha.com/extjs/8.0.0/classic/src/QuickTipManager.js.html

Initializes the QuickTips singleton and applies global configuration settings like maxWidth, minWidth, and showDelay. This setup affects all subsequent tooltips managed by the singleton.

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

Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
    maxWidth: 200,
    minWidth: 100,
    showDelay: 50 
});
```

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

### Ext.Base self Example

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.sparkline.RangeMap.html

Provides an example of using the 'self' property to get the current class reference, demonstrating dynamic inheritance.

```javascript
Ext.Base
view source
##  self : Ext.Class
protected pro
Get the reference to the current class from which this object was instantiated. Unlike Ext.Base#statics, `this.self` is scope-dependent and it's meant to be used for dynamic inheritance. See Ext.Base#statics for a detailed comparison
```
Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

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

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

Defaults to: 
```
Base
```
```

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

### Ext.tip.QuickTipManager.init

Source: https://docs.sencha.com/extjs/8.0.0/classic/src/QuickTipManager.js.html

Initializes the global QuickTips instance and prepares any quick tips. This method can optionally render the QuickTips container immediately to preload images and accepts a configuration object for the QuickTip instance.

```APIDOC
## Ext.tip.QuickTipManager.init

### Description
Initializes the global QuickTips instance and prepares any quick tips. This method can optionally render the QuickTips container immediately to preload images and accepts a configuration object for the QuickTip instance.

### Method
`Ext.tip.QuickTipManager.init(autoRender, config)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### 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. By default, the {@link Ext.tip.QuickTip QuickTip} class is instantiated, but this can be changed by supplying an xtype property or a className property in this object. All other properties on this object are configuration for the created component.

### Request Example
```javascript
// Initialize QuickTips
Ext.tip.QuickTipManager.init();

// Initialize with custom configuration
Ext.tip.QuickTipManager.init(true, {
    maxWidth: 200,
    showDelay: 100
});
```

### Response
#### Success Response (void)
This method does not return a value directly, but initializes the QuickTipManager.

#### Response Example
None
```

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

### Install Specific Add-on Package

Source: https://docs.sencha.com/extjs/8.0.0/guides/using_systems/using_npm/extjs_packages.html

Example of installing the `ext-calendar` package. This command adds the specified package to your project's `package.json`.

```bash
npm install --save @sencha/ext-calendar
```

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

### TrayClock Basic Usage Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.ux.desktop.TrayClock.html

A minimal example demonstrating the creation and rendering of the TrayClock component. This is useful for understanding the basic setup.

```javascript
var trayClock = Ext.create('Ext.ux.desktop.TrayClock', {
    // Configuration options
    renderTo: 'systemTrayContainer' // Assuming 'systemTrayContainer' is an existing DOM element
});
```

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

### Get Event Start Date

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.calendar.model.Event.html

Retrieves the start date and time for an event. This is an abstract method that must be implemented by subclasses. The date should be in UTC.

```javascript
event.getStartDate()
```

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

### Instantiate and Log Ext.Version

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/Version.js.html

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

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

### Instantiate and Log Ext.Version

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

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

### Ext.calendar.model.EventBase: Get Start Date

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.calendar.model.Event.html

Retrieves the start date and time of the event. The date is expected to be in UTC. This method is abstract and must be implemented by subclasses.

```javascript
getStartDate() : Date
```

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

### Override createView Example

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

An example demonstrating how to override the createView method. It's recommended to call `callParent` to get the base view configuration and then modify it.

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

 // edit view

 return view;
}
```

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

### Example Usage

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

Demonstrates how to create a typical Ext.resizer.Resizer instance with various configuration options.

```APIDOC
Here's an example showing the creation of a typical Resizer:
```
Ext.create('Ext.resizer.Resizer', {
    target: 'elToResize',
    handles: 'all',
    minWidth: 200,
    minHeight: 100,
    maxWidth: 500,
    maxHeight: 400,
    pinned: true
});
```
```

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

### Get Milliseconds - JavaScript Date

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/Date.js.html

Returns the milliseconds (0-999) for a given Date object. Example shows getting the milliseconds portion of the current time.

```javascript
var ms;
Today = new Date();
ms = Today.getMilliseconds();
```

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

### Setting Configuration Options

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.data.field.Field.html

Demonstrates how to set one or multiple configuration options on an instance.

```javascript
this.setConfig(name, [value])
```

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

### Initialize and Configure QuickTips Singleton

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

Initializes the QuickTips singleton and applies global configuration settings such as maxWidth, minWidth, and showDelay. This enables tag-based quick tips and customizes the behavior of all tooltips managed by the singleton.

```javascript
Ext.tip.QuickTipManager.init();
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
maxWidth: 200,
minWidth: 100,
showDelay: 50 // Show 50ms after entering target
});
```

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

### lineDashOffset

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.draw.sprite.Sprite.html

Sets or gets the starting offset of the line dash pattern.

```APIDOC
## lineDashOffset : Number

A number specifying how far into the line dash sequence drawing commences.
Defaults to: 
```
0
```
```

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

### Example: Configure Desktop Build Profile

Source: https://docs.sencha.com/extjs/8.0.0/guides/using_systems/using_npm/npm_migrate.html

An example configuration for the `dev` script, specifically setting the build profile to 'desktop'. This ensures the development server uses the correct build configuration for desktop applications.

```json
"dev": "webpack-dev-server --env.profile=desktop --env.browser=yes --env.verbose=no
```

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

### Get Day of Week - getDay()

Source: https://docs.sencha.com/extjs/8.0.0/classic/Date.html

Returns the day of the week (0-6, Sunday-Saturday) for a specified date. The example shows how to get the day of the week and assigns it to a variable.

```javascript
Xmas95 = new Date("December 25, 1995 23:15:00");
weekday = Xmas95.getDay();
```

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

### Ext.Base setConfig Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.drag.proxy.Placeholder.html

Demonstrates how to set one or multiple configuration options on an instance.

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

// Example of using setConfig to change a property
awesome.setConfig('name', 'Even More Awesome');
alert(awesome.getName()); // 'Even More Awesome'
```

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

### Component Initialization and Setup

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/QRCodeReader.js.html

This snippet shows the initial setup for the QR code scanner, including creating the scanner view and setting its dimensions before starting the scan.

```javascript
// Create scanner dialog if not already created
if (!me.scannerView) {
    me.scannerWindow.parentScope = me;
    me.scannerView = Ext.create(me.scannerWindow);
}

me.scannerView.setWidth(me.getScanViewWidth());
me.scannerView.setHeight(me.getScanViewHeight());
me.scannerView.show();
```

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

### QuickTips Singleton Initialization and Configuration

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

This snippet shows how to initialize the QuickTips singleton and apply global configuration settings to it. It also demonstrates how to manually register a quick tip for a specific element with custom properties.

```APIDOC
## Initialize and Configure QuickTips Singleton

### Description
Initializes the QuickTips singleton and applies global configuration properties. It also shows how to manually register a quick tip for a specific element.

### Method
`Ext.tip.QuickTipManager.init()`
`Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), config)`
`Ext.tip.QuickTipManager.register(config)`

### Parameters
**For `Ext.apply`:**
- `config` (object) - An object containing configuration properties for the singleton's QuickTip instance.

**For `Ext.tip.QuickTipManager.register`:**
- `config` (object) - Configuration object for the quick tip. Must include `target` (required) and `text` (required). Other properties like `title`, `width`, `dismissDelay` can also be provided.

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

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

### getProxy

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

Gets the proxy element, which represents where the Panel was before a drag operation started.

```APIDOC
## getProxy Ext.dom.Element

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

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

### getStartDate

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.calendar.model.EventBase.html

Get the start date for this event (including time). The date should be UTC.

```APIDOC
## getStartDate

Get the start date for this event (including time). The date should be UTC.

### Returns
:Date
The start date.
```

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

### Widget Creation Function Example

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/Factoryable.js.html

Shows a `create` method that prepares configuration for a widget, including setting default properties like `xtype` and `ownerCmp`.

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

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

### Example Number Filter Usage

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.grid.filters.menu.Number.html

Demonstrates how to set up a grid with a number filter for the 'seniority' column. This example includes store configuration and grid panel setup with filters.

```javascript
var store = Ext.create('Ext.data.Store', {
    fields: ['firstname', 'lastname', 'seniority', 'department', 'hired', 'active'],
    data: [
        {
            firstname: "Michael",
            lastname: "Scott",
            seniority: 7,
            department: "Management",
            hired: "01/10/2004",
            active: true
        },
        {
            firstname: "Dwight",
            lastname: "Schrute",
            seniority: 2,
            department: "Sales",
            hired: "04/01/2004",
            active: true
        },
        {
            firstname: "Jim",
            lastname: "Halpert",
            seniority: 3,
            department: "Sales",
            hired: "02/22/2006",
            active: false
        },
        {
            firstname: "Kevin",
            lastname: "Malone",
            seniority: 4,
            department: "Accounting",
            hired: "06/09/2007",
            active: true
        }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Employee Grid',
    store: store,
    columns: [
        { text: 'First Name', dataIndex: 'firstname' },
        { text: 'Last Name', dataIndex: 'lastname' },
        {
            text: 'Seniority',
            dataIndex: 'seniority',
            filter: {
                // xtype: 'numberfield', // defaults to this
                // field: {
                //     xtype: 'numberfield'
                // }
            }
        },
        { text: 'Department', dataIndex: 'department' },
        { text: 'Hired', dataIndex: 'hired' },
        { text: 'Active', dataIndex: 'active', xtype: 'booleancolumn', trueText: 'Yes', falseText: 'No', width: 50, align: 'center' }
    ],
    height: 300,
    width: 500,
    renderTo: Ext.getBody(),
    plugins: 'gridfilters'
});
```

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

### Sample Day View Instance

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.calendar.view.Base.html

Demonstrates how to create and configure a basic day view instance. This example shows the essential xtype, renderTo, height, width, and store configurations.

```javascript
Ext.create({
    xtype: 'calendar-dayview',
    renderTo: Ext.getBody(),
    height: 400,
    width: 400,
    store: {
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'calendars.php'
        },
        eventStoreDefaults: {
            proxy: {
                type: 'ajax',
                url: 'events.php'
            }
        }
    }
});
```

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

### Ext.ux.desktop.App: Get Start Button Configuration

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.ux.desktop.App.html

Override this method to customize the Start Button's configuration. Call the base version and modify the returned object as needed.

```javascript
getStartConfig: function() {
    return {

    };
}
```

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

### Basic Window Creation

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

This example demonstrates how to create and display a basic Ext.window.Window with a title, dimensions, and a fit layout containing a grid.

```APIDOC
## Ext.window.Window

### Description
A specialized panel intended for use as an application window. Windows are floated, resizable, and cfg-draggable by default. Windows can be maximized to fill the viewport, restored to their prior size, and can be method-minimized.

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

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

### Get Full Year - getFullYear()

Source: https://docs.sencha.com/extjs/8.0.0/classic/Date.html

Returns the four-digit year for a specified date. This method is recommended over getYear() for ensuring year compliance after 2000. The example gets the current year.

```javascript
var today = new Date();
var yr = today.getFullYear();
```

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

### Ext.grid.plugin.filterbar.filters.String - Example Usage

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.grid.plugin.filterbar.filters.String.html

Demonstrates how to define and use a String filter within a grid's filter bar configuration. This example shows a basic setup for a string-based filter.

```javascript
Ext.define('MyApp.view.product.Product', {
    extend: 'Ext.grid.Panel',
    xtype: 'product',

    requires: [
        'Ext.grid.plugin.filterbar.FilterBar'
    ],

    plugins: {
        gridfilterbar: true
    },

    // ... other grid configurations

    columns: [
        // ... other column definitions
        {
            text: 'Name',
            dataIndex: 'name',
            filter: {
                type: 'string'
            }
        }
        // ... other column definitions
    ]
});

Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create({
            xtype: 'product',
            renderTo: Ext.getBody()
        });
    }
});
```

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

### getInitialConfig Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.data.validator.Validator.html

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

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

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

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

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

### Basic Usage Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.ux.colorpick.Selector.html

Demonstrates how to create and render an Ext.ux.colorpick.Selector, set an initial color, and listen for color changes.

```APIDOC
## Ext.create('Ext.ux.colorpick.Selector', { ... })

### Description
Creates an instance of the color selector component.

### Parameters
- **value** (string) - Optional - The initial selected color in hexadecimal format (e.g., '993300').
- **renderTo** (string|HTMLElement|Ext.Element) - Required - The DOM element or Ext.Element to render the component into. `Ext.getBody()` is used here to render it to the document body.
- **listeners** (Object) - Optional - An object containing event handlers.
  - **change** (Function) - Callback function executed when the selected color changes.
    - **colorselector** (Ext.ux.colorpick.Selector) - The color selector instance.
    - **color** (string) - The newly selected color in hexadecimal format.

### Example
```javascript
Ext.create('Ext.ux.colorpick.Selector', {
    value: '993300', // initial selected color
    renderTo: Ext.getBody(),
    listeners: {
        change: function (colorselector, color) {
            console.log('New color: ' + color);
        }
    }
});
```
```

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

### Set Configuration Options

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.panel.Buttons.html

Demonstrates how to set single or multiple configuration options on an instance.

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

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

### AjaxProxy with Custom Start and Limit Parameter Names

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

Customizes the parameter names used for start and limit in an AjaxProxy. The read operation will use 'startIndex' and 'limitIndex' in the GET request.

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

// Assuming 'operation' is already defined with start: 50, limit: 25
// proxy.read(operation); // GET /users?startIndex=50&limitIndex=25
```

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

### Stopping a Task

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.util.TaskManager.html

This example shows how to stop a previously started task using `Ext.TaskManager.stop()`.

```APIDOC
## Stop a Task

### Description
Stops a task.

### Method
`Ext.TaskManager.stop(task)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **task** (Object) - The task configuration object to stop.

### Request Example
```javascript
// Assuming 'task' is the object previously passed to Ext.TaskManager.start()
Ext.TaskManager.stop(task);
```

### Response
#### Success Response (200)
This method does not return a value.

#### Response Example
None
```

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

### Basic Ext Web Components List Setup

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/List.js-2.html

JavaScript setup for an Ext Web Components list, including store creation and event handling for setting the item template.

```javascript
import '@sencha/ext-web-components/dist/ext-list.component';

export default class BasicListComponent {
    constructor() {
        this.store = new Ext.data.Store({
            data:
                {
                    title: 'Item 1'
                },
                {
                    title: 'Item 2'
                },
                {
                    title: 'Item 3'
                },
                {
                    title: 'Item 4'
                }
        });
    }
    readylistView(event) {
        this.listView = event.detail.cmp;
        this.listView.setStore(this.store);
        this.listView.setItemTpl(`{title}`);
    }
}

window.basiclist = new BasicListComponent();
```

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

### Initializing a Plugin with Configuration

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.grid.plugin.BottomScrollbar.html

Demonstrates the basic initialization of a plugin by passing a configuration object to its constructor.

```javascript
 // Example usage:
 // var myPlugin = new Ext.grid.plugin.BottomScrollbar({ renderTo: Ext.getBody() });
```

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

### Class Hierarchy Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.fx.target.Component.html

Illustrates the inheritance hierarchy starting from Ext.Base, through Ext.fx.target.Target, to Ext.fx.target.Component.

```javascript
Ext.Base
Ext.fx.target.Target
Ext.fx.target.Component
```

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

### Ext.data.operation.Operation.setStarted Example

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.data.operation.Operation.html

Marks the Operation as started. This is typically called when an asynchronous operation begins.

```javascript
operation.setStarted();
```

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

### Controller Configuration Examples

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.calendar.header.Days.html

Demonstrates various ways to configure a controller for a component, including using aliases, configuration objects, and instances.

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

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

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

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

### Get Full Year - JavaScript Date

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/Date.js.html

Returns the four-digit year for a given Date object. Recommended over getYear for compliance with years after 2000. Example shows getting the current year.

```javascript
var today = new Date();
var yr = today.getFullYear();
```

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

### Ext.Video Example Usage

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.Video.html

A basic example demonstrating how to create and configure an Ext.Video component within an Ext.Panel.

```APIDOC
## Example
```javascript
var panel = Ext.create('Ext.Panel', {
    fullscreen: true,
    layout: 'fit',
    items: [
        {
            xtype    : 'video',
            url      : 'porsche911.mov',
            posterUrl: 'porsche.png'
        }
    ]
});
```
```

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

### Basic Usage Example

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.navigation.View.html

Demonstrates how to create and use an Ext.NavigationView, including pushing new views.

```APIDOC
## Example Usage

This example shows how to initialize a NavigationView and push a new view onto it.

```javascript
var view = Ext.create('Ext.NavigationView', {
    fullscreen: true,
    items: [{
        title: 'First',
        items: [{
            xtype: 'button',
            text: 'Push a new view!',
            handler: function() {
                // use the push() method to push another view. It works much like
                // add() or setActiveItem(). it accepts a view instance, or you can give it
                // a view config.
                view.push({
                    title: 'Second',
                    html: 'Second view!'
                });
            }
        }]
    }]
});
```
```

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

### KeyNav Usage Example

Source: https://docs.sencha.com/extjs/8.0.0/modern/src/KeyNav.js.html

Demonstrates how to instantiate and configure Ext.util.KeyNav with different key binding strategies, including direct function assignment, object configuration with scope and event action, and key code mapping.

```javascript
var nav = new Ext.util.KeyNav({
    target: "my-element",
    
    left: function(e) {
        this.moveLeft(e.ctrlKey);
    },
    right: function(e) {
        this.moveRight(e.ctrlKey);
    },
    enter: function(e) {
        this.save();
    },
    
    // Binding may be a function specifiying fn, scope and defaultEventAction
    esc: {
        fn: this.onEsc,
        defaultEventAction: false
    },
    
    // Binding may be keyed by a single character
    A: {
        ctrl: true,
        fn: selectAll
    },
    
    // Binding may be keyed by a key code (45 = INSERT)
    45: {
        fn: doInsert
    },
    
    scope: myObject
});
```

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

### Number Filter Example in Ext.grid.Panel

Source: https://docs.sencha.com/extjs/8.0.0/classic/src/Number.js-5.html

Demonstrates how to configure a number filter for a grid column. This example shows the setup of a grid with a store and columns, where one column is configured with a 'number' filter.

```javascript
/**
 * Filter type for {@link Ext.grid.column.Number number columns}.
 *
 *     @example
 *     var shows = Ext.create('Ext.data.Store', {
           fields: ['id','show'],
           data: [
               {id: 0, show: 'Battlestar Galactica'},
               {id: 1, show: 'Doctor Who'},
               {id: 2, show: 'Farscape'},
               {id: 3, show: 'Firefly'},
               {id: 4, show: 'Star Trek'},
               {id: 5, show: 'Star Wars: Christmas Special'}
           ]
        });
       
        Ext.create('Ext.grid.Panel', {
           renderTo: Ext.getBody(),
           title: 'Sci-Fi Television',
           height: 250,
           width: 250,
           store: shows,
           plugins: {
               gridfilters: true
           },
           columns: [{
               dataIndex: 'id',
               text: 'ID',
               width: 50,
               filter: 'number' // May also be 'numeric'
           },{
               dataIndex: 'show',
               text: 'Show',
               flex: 1                  
           }]
       });
       
     */
Ext.define('Ext.grid.filters.filter.Number', {
    extend: 'Ext.grid.filters.filter.TriFilter',
    alias: ['grid.filter.number', 'grid.filter.numeric'],

    uses: ['Ext.form.field.Number'],

    type: 'number',

    config: {
        /**
         * @cfg {Object} [fields] 
         * Configures field items individually. These properties override those defined
         * by `{@link #itemDefaults}`.
         *
         * Example usage:
         *
         *      fields: {
         *          // Override itemDefaults for one field:
         *          gt: {
         *              width: 200
         *          }
         *
         *          // "lt" and "eq" fields retain all itemDefaults
         *      },
         */
        fields: {
            gt: {
               iconCls: Ext.baseCSSPrefix + 'grid-filters-gt',
               margin: '0 0 3px 0'
           },
           lt: {
               iconCls: Ext.baseCSSPrefix + 'grid-filters-lt',
               margin: '0 0 3px 0'
           },
           eq: {
               iconCls: Ext.baseCSSPrefix + 'grid-filters-eq',
               margin: 0
           }
       }
    },

    /**
     * @cfg {String} emptyText
     * The empty text to show for each field.
     * @locale
     */
    emptyText: 'Enter Number...',

    itemDefaults: {
        xtype: 'numberfield',
        enableKeyEvents: true,
        hideEmptyLabel: false,
        labelSeparator: '',
        labelWidth: 29,
        selectOnFocus: false
    },

    menuDefaults: {
        // A menu with only form fields needs some body padding. Normally this padding
        // is managed by the items, but we have no normal menu items.
        bodyPadding: 3,
        showSeparator: false
    },

    createMenu: function() {
        var me = this,
            listeners = {
                scope: me,
                keyup: me.onValueChange,
                spin: {
                    fn: me.onInputSpin,
                    buffer: 200
                },
                el: {
                    click: me.stopFn
                }
           },
           itemDefaults = me.getItemDefaults(),
           menuItems = me.menuItems,
           fields = me.getFields(),
           field, i, len, key, item, cfg;

        me.callParent();

        me.fields = {};

        for (i = 0, len = menuItems.length; i < len; i++) {
            key = menuItems[i];

            if (key !== '-') {
                field = fields[key];

                cfg = {
                    labelClsExtra: Ext.baseCSSPrefix + 'grid-filters-icon' + field.iconCls
                };

                if (itemDefaults) {
                    Ext.merge(cfg, itemDefaults);
                }

                Ext.merge(cfg, field);
                cfg.emptyText = cfg.emptyText || me.emptyText;
                delete cfg.iconCls;

                me.fields[key] = item = me.menu.add(cfg);

                item.filter = me.filter[key];
                item.filterKey = key;
                item.on(listeners);
           }
           else {
                me.menu.add(key);
           }
        }
    },

    getValue: function(field) {
        var value = {};

        value[field.filterKey] = field.getValue();

        return value;
    },

    /**
     * @private
     * Handler method called when there is a spin event on a NumberField
     * item of this menu.
     */
    onInputSpin: function(field, direction) {
        var value = {};

        value[field.filterKey] = field.getValue();

        this.setValue(value);
    },

    stopFn: function(e) {
        e.stopPropagation();
    }
});
```

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

### getXType

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

Gets the xtype for this component as registered with Ext.ComponentManager. Provides an example of usage with a Text field.

```APIDOC
## getXType String

Gets the xtype for this component as registered with Ext.ComponentManager. For a list of all available xtypes, see the Ext.Component header. Example usage:
```
var t = new Ext.form.field.Text();
alert(t.getXType());  // alerts 'textfield'
```

### Returns
* String
  The xtype
```

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

### setupScene

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

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

### Ext.Img with Configuration Options

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.Img.html

Shows how to initialize an Ext.Img component with various configuration options such as width, height, and style.

```javascript
Ext.create('Ext.Img', {
    src: 'images/my_image.jpg',
    width: 100,
    height: 50,
    style: {
        float: 'left',
        margin: '10px'
    },
    renderTo: Ext.getBody()
});
```

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

### Basic ItemEdit Configuration

Source: https://docs.sencha.com/extjs/8.0.0/classic/Ext.chart.interactions.ItemEdit.html

Configure the ItemEdit interaction for a chart. This example shows basic setup.

```javascript
Ext.create('Ext.chart.interactions.ItemEdit', {
    series: 'line'
});
```

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

### Using Ext.define with Responsive Configuration

Source: https://docs.sencha.com/extjs/8.0.0/modern/Ext.plugin.Responsive.html

Demonstrates how to define a class with a responsive configuration, specifying different properties based on screen size. This is useful for adapting UI elements dynamically.

```javascript
Ext.define('MyApp.view.main.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'mainpanel',

    requires: [
        'Ext.plugin.Responsive'
    ],

    plugins: 'responsive',

    responsiveConfig: {
        // Default config
        header: {
            title: 'Default Title'
        },
        // Config for small screens (less than 600px wide)
        'width < 600': {
            header: {
                title: 'Small Screen Title'
            }
        },
        // Config for medium screens (600px to 1000px wide)
        'width >= 600 && width < 1000': {
            header: {
                title: 'Medium Screen Title'
            }
        },
        // Config for large screens (1000px or wider)
        'width >= 1000': {
            header: {
                title: 'Large Screen Title'
            }
        }
    },

    initComponent: function() {
        this.callParent();
    }
});

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

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

### enable

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

Globally enables quick tips, allowing them to be displayed.

```APIDOC
## enable

Enables quick tips globally.
```

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

### Start a Simple Clock Task with Ext.TaskManager

Source: https://docs.sencha.com/extjs/8.0.0/modern/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.util.TaskRunner is available and the target element exists.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.