Sencha recently announced the Angular 2 and React bridges.
These are great solutions for Angular 2 or React developers, which make use of the robust Sencha components. (For what’s worth; the Angular and React frameworks don’t contain components. These are just single page app frameworks which sets up the architecture pattern.
In comparison with Ext JS;
- Sencha has an architecture pattern,
- a DOM manipulation framework,
- a data package and
- visual UI components (with themes)).
With such a bridge, you can integrate Ext JS components like grids and trees within your Angular 2 or React application. Lately, I have been asked a lot:
“What about the other way around?”
Integrating an Angular or React component within a Sencha Ext JS app? This question contains a lot of confusion. First of all, it’s not possible (it’s an anti pattern) to integrate Angular 2 / React within an Ext JS app. Why would you do so? Again, both frameworks don’t contain any UI components and themes. It’s just the architectural pattern, which Ext JS has as well. Angular 2 / React components basically exist of HTML / DOM snippets with CSS stylesheet code. Maybe you found this great slideshow component online. A custom HTML component with an essential StyleSheet. You need this component in your Sencha app. So, let’s change the question:
“Can I integrate custom HTML in my Sencha App?” or “Can I create custom Sencha components?”.
That answer is: YES, You certainly can do. This is actually what our Sencha developers do, to create UI components…
One use of packages is simply to hold code or themes that are available for multiple applications in a workspace. These packages don’t need to be distributed (beyond source control) to provide value to your development.
You can download packages remotely from the command-line. The set
of available packages are listed in the catalog on the
command-line. You can display the contents of the global catalog
using this command:
sencha package list You can
download these packages with the following command;
package install It will be downloaded to your Cmd extensions
folder: For example: /Users/leeboonstra/bin/Sencha/Cmd/6.x/extensions/
It is also possible to share your custom components via the Sencha Market. This does not require packages. You can also share ux folders. http://market.sencha.com For more information about packages, please check this guide: http://docs.sencha.com/cmd/6.x/cmd_packages/cmd_packages.html
To exactly explain how custom UI components are build, let’s create an example. This tutorial will show you how you can create a custom, ..wait for it.. “Hyperlink Component”.
So what we need to do here, is to “wrap”, your HTML snippets within a Sencha components, so it can make use of the Sencha API and the Sencha layout system! The good thing is. When you are a Sencha developer, you will probably know:
- How the Sencha Class System works
- How event listeners work
- How to theme/style with Sass/CSS Custom UI components, inherit from existing Sencha components.
If you know the Ext JS essentials, you can create custom UI components too! Let’s give it a try!
We will start with generating a package from the command-line,
which will generate the package folder structure. You can
execute the following command from your project folder:
generate package -type code ExtAddonHref This will create
the following folder structure:
Your package.json file, contains the package configuration. It will look similar to this:
Packages published by Sencha will use names with the following prefixes:
All package names beginning with the above prefixes are reserved by Sencha with respect to the Sencha Package Repository. It is recommended that you avoid conflicting with these names even if you disconnect from the Sencha Package Repository. Versions These versions are used when resolving package requirements. Each release of a package should have an updated version number.
The meaning assigned to version numbers by Sencha may help you:
x.y.z.b x : Major release number (large, impacting
changes and features) y : Minor release number (new functionality
but few if any breaking changes) z : Patch release number (bug fix
/ maintenance release - goal of 100% compatible) b : Build number
(assigned by build system)
Create in packages/ExtAddonHref/src, the following file and folder: component/Href.js
The ExtHrefComponent will be pretty basic. We give it the alias name: “extaddonhref”, and we will only inherit from Ext.Component:
As a rule of thumb: You should extend from Sencha components that
are the most similar to your new component. Features not being used
will cost you in additional file size. So, for example, if I want
to create a custom slideshow component, I have to deal with a store
that contains images, and every slide should have it’s own HTML. In
that case I would extend from
Ext.view.View. When I
create a custom togglefield, it pretty similar to a checkbox, so I
would extend from
Ext.form.field.Checkbox, and so on.
The next step, is that you will need to decide what will be configurable. For an hyperlink component, you will need at least an url and a title. Maybe also a link target, an anchorName, preventDefault behaviour and an external icon to show if the hyperlink is external.
Now that we know what needs to be configurable for the end user, let’s create the HTML snippet. Every Ext JS component, makes use of an XTemplate: http://docs.sencha.com/extjs/6.0.0/classic/Ext.Template.html. Inject the data based on the calling routine: https://gist.github.com/savelee/9c41aac37b34468f68a8bbd243807e44 Instead of the tpl you could also use the renderTpl instead. It separates the render part from init. You will need a bufferRender function to apply the renderData to the template. https://gist.github.com/savelee/6d65fb7b2c22dbd46de38f812750c024
The hyperlink component will listen to both click and dblClick events.
You can add custom styles in the packages/ExtAddonHref/sass/ folder. Create the following folders/files: src/component/Href.scss
The Sass namespacing settings are correctly configured by default, and it points to the Ext JS framework structure. However it is possible to edit these mappings in the package.json file:
The namespace Ext, tells Sencha, that the Sass files for the package are mapping the folder structure of the framework. (For example Ext.button.Button → src/button/Button.scss). You could change the namespace, to the namespace of your app or your package. The other settings, are to configure where the var and source folders are located in the package. Before Ext JS 5, you had to make this setting in the hidden packages/ExtHrefComponent/.sencha/package/sencha.cfg file. It had the setting:
package.sass.namespace=Ext //which could be set to: package.sass.namespace=ExtAddonHref
Implementing Styles Write the style code. This code will implement a little “external link” icon after external hyperlinks:
Do not mix app specific styling, like colors, fonts etc. in your package. You want to reuse your package and those styles belongs to the application stylesheet.
You can add custom images, fonts and icons in the packages/ExtAddonHref/resources/ folder. For the ExtAddonHref component, I’ve used an icon font, that I copied to the packages/ExtAddonHref/resources/icons folder.
Open your application app.json and add the new package to your requires array:
Refresh your application to force your application to detect the
sencha app refresh Build your app to
compile the Sass styles and to copy over the resources to the
sencha app build
In Your App The last step is to nest the custom component in your application: For example:
It is also possible to build the package only, and publish it to a
local repository. To build the package:
sencha package build
This produces a build folder inside the package. This is
needed by applications when they are running in “dev mode” (without
being compiled). It also produces mypackage.pkg file in
your workspace’s build folder. The mypackage.pkg file is used to
add the package to your local repository. This pkg file is not
placed in the package’s build folder because:
- It is a ZIP file of your package folder.
- It is not needed by users of the package. In case you want to setup a local repository, see this guide: http://docs.sencha.com/cmd/6.x/cmd_packages/cmd_creating_packages.html