Creating Native Applications with Sencha Desktop Packager

Sencha Desktop Packager is a new product, included with the Sencha Complete: Team bundle, which enables you to take your existing Ext JS web application and package it as a native desktop application. From here, you may deliver your application to your customers who are running Windows and Mac OS X.

HTML5 technologies allow you to develop advanced, interactive and high-performance applications. Yet, those benefits may only be harnessed if an application’s users are running a modern web browser. In a corporate IT environment with locked-down desktops, deploying advanced rich Internet applications can be a challenge. Often, the user is restricted to a particular version of a browser with no foreseeable chance of an upgrade — they may be running the latest and greatest hardware, but stuck on an old IT-standardized browser. For this scenario, integrating the application with a web run-time and delivering them together is the only viable choice.

Watch a demo!

Sencha Desktop Packager is designed to overcome this deployment limitation. The Packager leverages Chromium, an open-source project from Google that also powers the Google Chrome browser. Not only does the Packager make it easy to transform web apps to native, it also makes it easy to integrate with native APIs. We provide APIs that the application can use to integrate with the desktop, including but not limited to window and menu management, file system access and native dialogs.

Using Sencha Desktop Packager is easy. It’s distributed as a simple ZIP archive, requiring no installation; simply unpack the archive to a working directory. The archive also includes the documentation and a collection of ready-made examples.

After the package has been unzipped, the only tool you need to use is the ionpackage command-line executable (ionpackage.exe on Windows). This tool is used together with a JSON configuration file — often referred to as the manifest — as follows:

ionpackage myappconfig.json

Let’s create a simple configuration file:

        "applicationName": "HelloWorld",
        "versionString": "1.0",
        "outputPath": "HelloApp",
        "webAppPath": "hello/",
        "settings": {
                "mainWindow": {
                        "autoShow": true

The JSON file contains configuration settings which specify the name, version and location of the application. For convenience, we also enable autoShow for the main window.

For this configuration to work, we have to supply the application. As an example, we use a very simple ‘Hello, world!’ message in hello/index.html as follows:

                <p>Hello, world!</p>

By running the ionpackage tool with this configuration file, a native Windows or Mac OS X application is produced and saved to the specified output directory; ‘HelloApp’ in this case. Use Explorer or Finder to locate the application, and launch it:

The freshly built application is self-contained. It’s designed to work on a vanilla installation of Windows (from Windows XP to Windows 8) and Mac OS X (10.6+). From here, the executable and its related dependency files can be integrated with any third party application installer.

Of course, Sencha Desktop Packager provides much more than just a run-time shell. It also comes ready with an additional API (see the complete reference) that provides various extra desktop functionality. Let’s see how we can add some menus to our application. For example, in the application code, you can add the following function:

function addMenu() {
        var fileMenu = Ion.ui.mainWindow.menuBar.addMenu('File');
        var colorMenu = fileMenu.addMenu('Change Color');
        colorMenu.addMenuItem('Red', changeColorRed);
        colorMenu.addMenuItem('Green', changeColorGreen);
        colorMenu.addMenuItem('Blue', changeColorBlue);

When the above function is invoked, a native menu bar will be created. It will contain one top-level menu called File which in turn will have more sub-menu items. The following screenshot shows the result:

Another benefit of using the Sencha Desktop Packager is to have access to the file system. This means an application can read and write persistent data to a storage device on the user’s system. Sencha Desktop Packager provides simple functions for these operations. In the following code fragment, the user is prompted with a modal dialog to open a file and read its contents:

var result ={
        type: 'open',
        filters: [{
                name: 'JSON Files',
                pattern: '*.json'
if (result.success) {
        var read =;
        if (read.success) {
                var obj = JSON.parse(;
                // Do something with obj...

The dialogs produced by the application are also native. They’re indistinguishable from the standard file dialogs of Windows or Mac OS X. You’ll also note that the APIs are synchronous (blocking) so you don’t need to provide a callback.

The Sencha Desktop Packager also gives applications the ability to control their main application window, e.g. adjusting the position, changing the dimensions, going full-screen, etc. This is possible via a set of window management APIs. Here’s an example of positioning and resizing the main window:

Ion.ui.mainWindow.setPosition(40, 30);
Ion.ui.mainWindow.setDimensions(800, 400);

Changing the state of the window is also possible:

// Move the window to the center of the current screen;
// Minimize the window
// Set window to fullscreen

In addition, the native full-screen feature of Mac OS X 10.7+ is also supported.

The additional native functionality enabled by the Sencha Desktop Packager helps you build applications that act and feel like other desktop applications. The archive distribution of Sencha Desktop Packager also includes several examples from Ext JS which have been modified to take advantage of these desktop integration features. Take a look and try them out.

You can get the Sencha Desktop Packager through Sencha Complete: Team. For more information, please read the online documentation.


  1. Alex says

    Desktop packager sounds great, but, only being available w/ Sencha Complete: Team, which is $2,195 per seat with 10 seat minimum puts it at $21,950 to use it… Seems awfully steep

    You should consider having a stand alone license model for this product, or have variations of the regular Sencha Complete product that include it so that licenses can be obtained in single quantities

  2. David says

    The only missing piece of the puzzle is Linux support. 32 and 64 bits should be supported at least with a binary file creation (.bin). Distro-specific packages (deb, rpm) would be just an extra.

    Chromium and all the bells and whistles are available to Linux as well, so I don’t really understand the reason of exclusion. What a pitty.

  3. Paolo says

    I completely agree with Alex. Where does this commercial policy come from?
    Don’t you like having lots of stand alone licenses around the world?
    Well, if you do, let them have the best at reasonable costs, please.

  4. Pseudolus says

    It would appear that Sencha’s target market has left the individual developer and small company behind. The price is way too steep especially for a new and unproven product.

  5. slemmon says

    Our organization would potentially be interested in a desktop packager as well. We had a 5-seat support license, but realistically it was just 3-4 of us building the apps on the client side. A more flexible pricing model other than just the Team bundle might net a sale from us. But, I won’t be able to persuade procurement to purchase Team for 10 of us (for 4 of us).

  6. Joly Mathew says

    This is great product and we are all excited to use it. I must say the pricing is very aggressive and it people will not buy it with that kind of steep price model.

    I wish sencha will reduce the price and will provide an open source license model as well and it may help in adopting the product and use more…

  7. stewardsencha says

    “Build awesome apps for any device” was what got my attention late in 2008. It turned out to be all sizzle and no steak. Beta after bleeding beta. And ultimately separate solutions per device. A bare-faced lie.

    $21,9500 ?! That certainly is an “unprecedented web application development solution”

    Go jump in a lake.

  8. Dan Campbell says

    Yeah, that sucks. We’ve been begging for this feature for a couple years now, but there is no way that we can afford this license. Small business gets screwed again I guess. Ugg.

  9. Awesome Bob says

    Sencha, if you know anything about a Lean Startup, you’ll recognize when you need to build what your customers want instead if what you assume you can sell.

    How about individual licenses now?

  10. houyu says

    sencha,you dispointed expensive, what do you want to do? got mad?
    and I tell you guys ,there is another solution, ‘node-webkit’,the same structure and better performance,
    here is the link,
    as you see,they are the same dame thing,guess what? it is free,sencha,you hear me ?

  11. Russell Rogers says

    This is a terrible price. I develop desktop apps using realbasic which allows me to create apes for mac, windows and Linux for a fraction of the price.

  12. Davide C says

    ExtJs/Sencha are good solutions/products with some “too” bugs :-) …but thanks to staff and community the problem/bug are always solve o bypass.

    I work with these products by 2/3 years and I think that the force of ExtJs/Sencha is the Staff and the Support of “Big Community on Internet” ….

    A big/terrible price will kill this community with changes for future
    I hope ExtJs staff think back

  13. Garry@TriSys says

    Wow – I didn’t realise the price of this @ $21,000 – You can buy into the Microsoft development stack for less than £1,000 and tap into millions more developers, and public domain code samples, for significantly less money. As a prospective customer, this has put me off. We need individual licenses, especially as our model is having highly specialised (one-man-band) contract developers – this is the way the industry is today and tomorrow. With this high price, contract developers will be harder/impossible to find, and this will result in us using other frameworks.

  14. Rob Walker says

    Wow – way to go Sencha. You really got my interest until I saw the price.
    Not much use coming up with a really nice solution if you price it out of the hands of the everday developers that will do your best word of mouth marketing for you.
    Seriously – whoever is doing your sales and marketing course needs to go back to school

  15. slemmon says

    Has anyone had any luck working with Sencha sales to get a Team purchase with less than 10 seats? I contacted sales and the rep confirmed that Complete does not include the desktop packager and that the minimum seat requirement for Team is 10. However, I’ve seen some folks indicate that they worked with sales and were able to get a Team purchase with less than 10 seats.

    I’m the Sencha evangelist in my company and have raised interest with other developer groups, but don’t yet have 10 developers – and all of our budgets are unique so even if I had 10 total I’d have a tough time wrangling the financing between the workgroups. I found Appjs which does a commendable job, but is still not quite the comprehensive solution that Team’s desktop packaging looks to be. Thoughts?

  16. Peter says

    I love you sencha, but this shit is retarded.

    Please take the desktop packager out of the complete team bundle.

    Hear the voices from the customer.

  17. Brad says

    @Alex THANK YOU SO MUCH! I had no idea that Node-Webkit existed.
    That’s exactly what I’ve been searching for. Thank you * infinity!

  18. Michael Mullany says

    Hi guys – we’ve been hearing the same stuff from everyone, and we’re working on a new package/price that will make this available at a much lower entry price. We really did think that the packager would most appeal to large teams at bigger companies, but clearly there’s a ton of interest from smaller teams and solo devs so stay tuned for news on the new pricing.

  19. Awesome Bob says

    Well listening to your customers should probably have come first. It is obvious now that you didn’t because of what you just said. Why wasn’t this available to individuals first and then in a team package or simultaneously? I’ve already invested my time in learning Node-Webkit because it’s free and does the exact same thing. I hope this is a great learning experience for your company.

  20. Alex says

    @Michael Mullany
    My suggestions:
    1) Create a “single developer” package with ST2+Charts+Desktop packaging + Eclipse Plugin
    2) Improve Sencha architect with a code editor supporting all the functionalities of the Eclipse Plugin and provide it as addon to the previous package (for GUI driven developers)
    3) Both should have a fair entry price for small,single and poor developers ;-)

    BTW: The Sencha frameworks are great !! And expanding your developer base is for sure your warranty for an expanded market.

  21. Frik says

    Also, if you are not going to include new products into Sencha “Complete”, then you should rename it to Sencha “Incomplete”.

    The only reason we went with Sencha Complete was that it implied getting new products. We did not need Sencha Touch… so we we will be downgrading to plain old ExtJs only when our renewal is up.

  22. smskute says

    Sencha complete is now available on an individual license basis now. I had no idea that Node-Webkit existed.
    That’s exactly what I’ve been searching for. Thank you * infinity!

  23. Stephen says

    @Michael Mullany

    I have a project I am starting for a client and wanted to purchase sencha complete all week but yet I would really like to have the desktop packager and data connector. I do not want to jump on and buy sencha complete just for you to later offer the other features I dont have funds to throw away. Any update on pricing and timeline so those of us on hold can let our clients know.

    I have tried to call all each day this week at several different times and never got an answer regardless of extension chosen, support, sales, accounting etc. Makes me wonder if it is even worth paying for the premium support package since you guys dont answer your phones… it sort of has the feeling of a one man shop behind the sencha team.

    I have also sent an email using your contact info almost two weeks ago and am yet to get a reply.

    I want to purchase I just need my questions answered before doing so…

  24. Michael Mullany says

    @stephen – my last attempt to comment got swallowed by our own comment filter so I’ll try again and hope for the best. We’ll have a new price & package for SDP announced in January. We get a ton of inquiries every day and we try our best to keep up with them, but we don’t always succeed.

  25. |Stephen says

    Understand that things get busy, but it is coming up on two weeks now that I have been trying to call and email you guys. I have a project that I need to start as soon as I wrap up their website in the next few days and want to order your suite, but not until my questions are answered. I would appreciate a call back.

  26. digitalpoins says

    Hi friends – we’ve heard the same thing from everyone, and we’re working on a new package / price that will make it available to a much lower entry price. We really think that the packager that will be most attractive to the great team at a great company.

Leave a Reply

Your email address will not be published. Required fields are marked *