Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
September 30, 2013

Sencha Cmd Packages

Front End Development

What Are Packages

Sencha Cmd 3.1 introduced packages, which are a new way to share code between projects. Perhaps you made an awesome sass theme or a cool Ext JS / Touch extension (such as Deft). You can use a package to share that with the rest of the world. Each package contains all of the Controllers, Views, Models, Stores, Sass, etc. required to make your application or theme work. There are Local Packages, which are just for your own use, and there are Remote Packages for public use.

Creating a Package

Every Workspace generated by Sencha command has a “packages” folder. So, to create a package:

cd to/your/workspace

and then:

sencha generate package -type code my-package

It’s worth noting that there are few different kinds of packages you can create. You can specify the type of package by using the “-type” option.

  • code – which is your “go-to” standard package
  • theme – which is used for creating custom Ext JS / Touch themes
  • locale – which is obviously used for any localization specific code

This will ultimately make a package called my-package (or whatever you called yours) in the packages/my-package folder. There are number of subfolders and files underneath this. The important ones to note are:

  • sass – contains all of the sass for your package. When you compile your application, all of the sass for any packages will be automatically pulled in and compiled along with your application sass. This folder is further broken down into subfolders:
    • var – for variable declarions
    • src – for component specific styles. The folder structure and naming conventions in here should match the folder and naming structure of your component views. ie. the sass for src/view/MyView.js would be in sass/view/MyView.js
    • etc – global styles or styling that’s not specific to any particuar component
  • src – all of your JavaScript. This folder should be broken down into:
    • controller
    • model
    • store
    • view
    • (etc)
  • .sencha/package/sencha.cfg – If your sass folder is going to contain styling for package specific views then be sure that the package.name has the correct namespace for your package. Don’t leave it as the default value Ext.
# The name of the package - should match the "name" property in ./package.json
package.name=my-package

# The namespace to which this package's SASS corresponds. The default value of
# "Ext" means that the files in ./sass/src (and ./sass/var) match classes in
# the Ext" root namespace. In other words, "Ext.panel.Panel" maps to
# ./sass/src/panel/Panel.scss.
# 
# To style classes from any namespace, set this to blank. If this is blank,
# then to style "Ext.panel.Panel" you would put SASS in
# ./sass/src/Ext/panel/Panel.scss.
package.sass.namespace=My.package
  • package.json – be sure the name is correct and make sure the requires array contains the name of any other package dependencies that my-package might have. Be careful about using cyclical references here, i.e. package A requires package B which requires package A. Sencha Cmd will be very unhappy if you do.
{
    "name": "my-package",
    "type": "code",
    "creator": "anonymous",
    "summary": "Short summary",
    "detailedDescription": "Long description of package",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "format": "1",
    "local": true,
    "requires": [
        "my-otherpackage"
    ]
}

Implementing a Package

  • Add your package to the “requires” array in app.json
{
    "name": "my-application",
    "requires": [
        "my-package",
        "my-otherpackage",
        "deft"
    ]
}
  • Set up the Ext.Loader paths in myapp/app/application.js
Ext.Loader.setConfig({
    paths: {
        'My.package': '../packages/my-package/src',
        'Deft': '../packages/deft/src/js'
    }
});
  • Reference your new package in your app by using its namespace
  • Compile your app using Sencha Cmd (obviously)

Gotchas

  • Sass namespaces in .sencha/package/sencha.cfg
  • Requires array in .sencha/package/build.properties package.json
  • Watch out for cyclical references in your package.json files, i.e. package A requires package B which requires package A.

Opinions

Packages are powerful new feature from Sencha. However, I recommend that you do not simply use packages for arbitrary code organization. If you find that your packages have heavy dependencies on each other then you should probably merge those packages together. Packages are best if you have something completely independent (i.e. a theme or extension/widget) that you want to reuse across different applications. They are even better if you have something you want to share with world.

Posted in Front End Development
Share this

Timothy Eagan

Timothy Eagan was a Senior Engineer at Modus Create, and is an accomplished software developer with over 20 years of experience in creating customized business solutions. He can be found in Providence, RI. Tim is also an OIF veteran, former paperboy and part-time comedian.
Follow

Related Posts

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

  • Sencha Space Review
    Sencha Space Review

    BYOD The Bring Your Own Device (BYOD) movement has clearly produced a lot of hype…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top