https://github.com/coon-js/extjs-comp-navport
Enhanced viewport template for rapid, modular, package agnostic Sencha ExtJS application building.
https://github.com/coon-js/extjs-comp-navport
application building controller deeplinking extjs navigation packages rapid routing sandbox sencha template tree viewport
Last synced: 4 months ago
JSON representation
Enhanced viewport template for rapid, modular, package agnostic Sencha ExtJS application building.
- Host: GitHub
- URL: https://github.com/coon-js/extjs-comp-navport
- Owner: coon-js
- License: mit
- Created: 2019-02-18T15:49:21.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-04-25T03:23:08.000Z (about 2 years ago)
- Last Synced: 2024-08-08T20:14:10.797Z (11 months ago)
- Topics: application, building, controller, deeplinking, extjs, navigation, packages, rapid, routing, sandbox, sencha, template, tree, viewport
- Language: JavaScript
- Homepage:
- Size: 2.84 MB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# @coon-js/extjs-comp-navport  [](https://badge.fury.io/js/@coon-js%2Fextjs-comp-navport)
This **Sencha ExtJS** package provides an enhanced viewport template for rapid,
modular, package agnostic Sencha ExtJS application building.
The default Viewport implementation can be found in `coon.navport.view.NavigationViewport`
and serves as a viewport-template for Sencha Ext JS applications. Along with its configurations and
associated classes, it allows for support for routing, navigation and managing views.
An [extjs-lib-comp](https://github.com/coon-js/extjs-lib-comp) application (`coon.comp.app.Application`) is mandatory.
A reference implementation can be found in the [conjoon](https://github.com/conjoon) project.
## Installation
```bash
$ npm install --save-dev @coon-js/extjs-comp-navport
```
If you want to develop with `extjs-comp-navport`, run the `build:dev`-script afterwards:
```bash
$ npm run build:dev
```
Testing environment will then be available via
```bash
$ npm test
```
For using the package as an external dependency in an application, use
```bash
$ npm install --save-prod @coon-js/extjs-comp-navport
```
In your `app.json`, add this package as a requirement, and make sure your Ext JS `workspace.json`
is properly configured to look up local repositories in the `node_modules`-directory.
Example (`workspace.json`) :
```json
{
"packages": {
"dir": "${workspace.dir}/node_modules/@l8js,${workspace.dir}/node_modules/@conjoon,${workspace.dir}/node_modules/@coon-js,${workspace.dir}/packages/local,${workspace.dir}/packages,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name},${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-treegrid,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-base,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-ios,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-material,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-aria,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-neutral,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-classic,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-gray,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-crisp,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-crisp-touch,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-neptune,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-neptune-touch,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-triton,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-graphite,${workspace.dir}/node_modules/@sencha/ext-${toolkit.name}-theme-material,${workspace.dir}/node_modules/@sencha/ext-calendar,${workspace.dir}/node_modules/@sencha/ext-charts,${workspace.dir}/node_modules/@sencha/ext-d3,${workspace.dir}/node_modules/@sencha/ext-exporter,${workspace.dir}/node_modules/@sencha/ext-pivot,${workspace.dir}/node_modules/@sencha/ext-pivot-d3,${workspace.dir}/node_modules/@sencha/ext-ux,${workspace.dir}/node_modules/@sencha/ext-font-ios",
"extract": "${workspace.dir}/packages/remote"
}
}
```
## Post-Install
[@coon-js/extjs-link](https://npmjs.org/coon-js/extjs-link) will start once the package was installed and guide you
through the process of creating symlinks to an existing Ext JS sdk installation.
This is only required if you want to run the tests (`./tests`), as [Siesta](https//npmjs.org/siesta-lite) relies on
an existing Ext JS installation.
The following tutorial works with either the modern or the classic toolkit.
## Usage
Refer to the [documentation](./docs) for information on how to use the package with your application.
##Dev
### Naming
The following naming conventions apply:
#### Namespace
`coon.navport.*`
#### Package name
`extjs-comp-navport`
#### Shorthand to be used with providing aliases
`cn_navport`
**Example:**
Class `coon.navport.view.ContentContainer` has the alias `widget.cn_navport-conctr`
## Tests
Tests are written with [Siesta](https://bryntum.com/siesta). Documentation can be found [here](./tests/README.md).