Skip to content

Adding Deft JS to Your Application

Jump to bottom Edit New page
Brian Kotek edited this page Aug 29, 2014 · 22 revisions

Back to Wiki Home

Adding Deft JS 5 via Sencha Cmd

While Deft JS 5 is in alpha/beta state, it isn't part of the official Sencha Cmd repository yet. So until the official release, you'll add Deft to your application like this:

  1. Download the Deft 5 library files, and place them somewhere in your application (e.g. /libs)

  2. Edit your app.json and add the location of the Deft JS files to the classpath:, e.g.:

    "classpath": "${app.dir}/libs,${app.dir}/app"

  3. You're ready to build! Do a sencha app refresh if needed, then sencha app build. When you add Deft classes to the requires: list of your own classes, Cmd will automatically include those classes in the application's build artifacts.

(Note: the following will become the proper way to include Deft once it is added to the Sencha Cmd repository. For now, follow the instructions above.)

  1. sencha repo add -address http://packages.deftjs.org/ -name deftjs

  2. Edit your app.json and add deft to the requires array e.g.:

    {
  "name": "MyApp",
  "requires": [
    "[email protected]?"
  ]
}

  3. You're ready to build! Do a sencha app refresh if needed, then sencha app build. When you add Deft classes to the requires: list of your own classes, Cmd will automatically include those classes in the application's build artifacts.

A version of the Phoenix example application built with Ext JS 5, Deft JS 5, and Sencha Cmd will also be available soon.

Using Deft without Cmd

Deft JS is really just a JavaScript library, so it's easy to add to your application. First, you can clone the Git repository to your local system. Or, if Git isn't your thing, you can download a zip file containing the compiled JavaScript library.

Next, grab the deft.js and deft-debug.js files and copy them into your project. You can put them anywhere you like under your project (we typically prefer a lib/deft directory).

Finally, include the deft-debug.js file in your main HTML page. You need to include it after the ExtJS/Touch library, but before your app.js include:

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MyApp</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css"/>
    <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-dev.js"></script>
    <script type="text/javascript" src="lib/deftjs/deft-debug.js"></script>
    <script type="text/javascript" src="app/app.js"></script>
</head>
<body></body>
</html>

That's normally all there is to it! Deft JS is now ready to be configured and used. The only unusual case is if you wish to load the Sencha classes individually (for easier development). The F.A.Q. page has details on how to do this.

Next: Core Features

Add a custom footer
Add a custom sidebar
Clone this wiki locally