Skip to content

Adding Deft JS to Your Application

Jump to bottom Edit New page
brian428 edited this page Oct 24, 2014 · 7 revisions

Back to Wiki Home

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 Ext JS/Sencha Touch 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.

Using Sencha Cmd (with Deft JS 0.8 only)

The F.A.Q. page has details on how to do this.

Using Sencha Cmd (with Deft JS 0.9+ only)

  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": [
    "deft@0.9.0?"
  ]
}
  1. Require the Deft JS class pre-processors to ensure that they are included in the compiled JS. This can be done in either your Viewport class, or, if you use it, the Application class (which extends Deft.mvc.Application). The important thing is to require them early in the class loading process:
Ext.define("MyApp.Application", {
  extend: "Deft.mvc.Application",
  requires: ["Deft.mixin.Controllable","Deft.mixin.Injectable",...],
...
}
  1. Cmd's new "define-rewrite" optimization breaks any user-defined class pre-processors (such as those used by Deft JS). Until we can arrive at a solution with Sencha, this must be disabled. Edit .sencha/app/production.properties so it uses build.optimize=, with no value. Note this has been fixed in the Deft JS 5 release for Ext JS 5 only.
  2. There is a known bug in Cmd 3.1.2.342 that uses incorrect paths in .sencha/app/build-impl.xml. This isn't a Deft JS-specific issue, but it will cause any projects built with the current version of Cmd to fail. Edit line 443 so that it reads:
<copy todir="${build.resources.dir}" overwrite="true">
  1. For "Development builds" (running the app directly, without building through Cmd), you may need to add/modify the existing Ext.Loader configuration in your app.js file to reference the Deft JS package directory and Sencha source. (Cmd apparently does not automatically include these in the class path yet.)
//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'Deft': 'packages/deft/src/js',
    '<YourAppName>': 'app'
});
Ext.syncRequire(['Deft.mixin.Injectable','Deft.mixin.Controllable']);
//</debug>

//@require Deft.mixin.Injectable
//@require Deft.mixin.Controllable
  1. You're ready to build! Do a sencha app refresh if needed, then sencha app build

A version of the Phoenix example application built with Sencha Cmd is also available.

Next: Core Features

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