How to install sencha kitchen sink

## Installing Sencha Kitchen Sink

### Prerequisites

Prior to installing Sencha Kitchen Sink, ensure that the following prerequisites are met:

– A recent version of **Node.js** installed (recommended: Node v12 or later)
– A recent version of **Yarn** installed (recommended: Yarn v1.15 or later)
– A supported web browser

### Installation Steps

#### 1. Creating a New Project

Using a terminal or command prompt, navigate to the desired directory for your project and create a new directory for the Kitchen Sink project:

“`
$ mkdir my-kitchen-sink
$ cd my-kitchen-sink
“`

#### 2. Initializing the Project

Initialize a new Sencha project using the `sencha` CLI tool:

“`
$ sencha create kitchen-sink
“`

This will create a new project directory called `kitchen-sink` with a standard project structure.

#### 3. Installing Sencha Kitchen Sink

Within the `kitchen-sink` project directory, install the Sencha Kitchen Sink package using Yarn:

“`
$ yarn add @sencha/ext-kitchen-sink
“`

#### 4. Importing Styles

Import the necessary stylesheets into your project’s `app.js` file:

“`javascript
// app.js

Ext.require([
‘Ext.container.Viewport’,
‘Ext.layout.container.Border’,
‘Ext.panel.Panel’,
‘Ext.tree.Panel’,
‘Ext.menu.Menu’,
‘Ext.form.field.Text’,
‘@sencha/ext-kitchen-sink/resources/css/*.css’
]);
“`

#### 5. Configuring Application

In `app.js`, configure the application’s viewport layout and add a tree panel:

“`javascript
// app.js

Ext.application({
name: ‘KitchenSink’,

launch: function () {
Ext.create({
xtype: ‘viewport’,
layout: ‘border’,
items: [
{
region: ‘west’,
xtype: ‘treepanel’,
title: ‘Kitchen Sink’,
width: 200,
store: {
root: {
expanded: true,
children: [
{
leaf: true,
text: ‘Overview’
},
// … add more children for the tree panel here
]
}
}
}
]
});
}
});
“`

#### 6. Running the Application

To run the Sencha Kitchen Sink application, use the Sencha CLI tool:

“`
$ sencha app build
“`

This will build the application and start a local development server.

#### 7. Opening the Application

Open your web browser and navigate to the following URL:

“`
http://localhost:1841
“`

You should now see the Sencha Kitchen Sink application running in your browser.

## Features of Sencha Kitchen Sink

Sencha Kitchen Sink provides a comprehensive showcase of all Ext JS components and features, including:

– Ext JS Components (e.g., grids, charts, forms, trees)
– Ext JS Themes and Styles
– Ext JS Data Binding
– Ext JS AJAX Interactions
– Ext JS Event Management
– Ext JS Extensibility

## Ext JS Component Explorer

The Sencha Kitchen Sink application includes a powerful Ext JS Component Explorer that allows you to:

– Browse all Ext JS components
– View live examples of each component
– View and copy the source code for each component
– Download sample applications showcasing component usage

## Customization

You can customize the Sencha Kitchen Sink application to suit your needs by modifying the following files:

– `app.js`: Configure the application’s layout and components
– `theme.json`: Customize the application’s theme
– `package.json`: Manage project dependencies and scripts

## Conclusion

Sencha Kitchen Sink is a valuable tool for exploring and learning Ext JS. By installing and using Sencha Kitchen Sink, you can:

– Quickly explore and understand the capabilities of Ext JS
– Access live examples of Ext JS components in action
– Build custom Ext JS applications with confidence

If you have any questions or need assistance with installing or using Sencha Kitchen Sink, please refer to the Sencha documentation or contact Sencha support.