F.A.Q.

Back to Wiki Home

If you have a question or think something should be added to the F.A.Q., please let us know at the DeftJS Google Group.

Questions

• How do I contribute to Deft JS?
• How do I enable logging within Deft JS?
• How do I use Deft JS with ext.js, ext-debug.js, or ext-dev.js to load Sencha classes individually instead of using ext-all.js?
• How do I use Deft JS with the Sencha Touch microloader and Sencha Cmd?
• Why aren't my View Controllers or injections being processed after building with Sencha Cmd?

Answers

How do I contribute to Deft JS?

We always appreciate help or new ideas. The easiest way to contribute to Deft JS is:

1. Make sure Node.js is installed. Node includes the CoffeeScript module by default, so if Node is installed you should be ready to edit the CoffeeScript source for DeftJS.

• If you aren't familiar with CoffeeScript, don't be intimidated. It's a very simple language that compiles to JavaScript, and the entire language specification is a single page. Think of it as JavaScript without all the braces and semicolons, but with a lot of great extras like collections support, comprehensions, null-safety operator (soaks), and compile-time error checking.

2. Fork the Github project, and then create a new branch to contain your changes.
3. Ensure that for the cloned repository the parent directory contains an unzipped copy of Sencha Touch & Ext JS, or a symlink to each, named touch and ext respectively. For example if you cloned the Deft JS repository to path/to/src/DeftJS then path/to/src/touch should contain the contents of the Sencha Touch zip file distribution and path/to/src/ext should contain the contents of the Sencha ExtJS zip file distribution.
4. Ensure that the latest copy of Sencha Cmd is installed. Check that running the command sencha which displays the same version as used by the DeftJS workspace.cmd.version.
5. Install required NodeJS modules. cd path/to/src/DeftJS && npm install. This will install Karma.
6. Edit the CoffeeScript source in path/to/src/DeftJS/packages/deft/src/coffee to include your changes. Since CoffeeScript uses indents to infer information about the code, be sure you use the tab character for your indents.
7. Compile the CoffeeScript into JavaScript. You can do this any way you like (command line, Cake file, etc.), but if you completed steps 3, 4 and 5 you can simply cd path/to/src/DeftJS/packages/deft && sencha package build.
8. If you're adding or changing existing functionality, we'd greatly appreciate it if you write unit test(s) or check that existing unit test(s) cover the changes you have made. Test CoffeeScript sources are in path/to/src/DeftJS/packages/deft/test/coffee.
9. Make sure all unit tests pass. sencha package build will recompile the test .coffee files, and you can run the tests against various Sencha libraries by opening the path/to/src/DeftJS/packages/deft/test/TestRunner.html file in a browser and choosing different Sencha libraries to use.
10. Alternatively you can run the tests against various browsers by using the Karma test runner e.g. cd path/to/src/DeftJS/packages/deft && ant test -Dkarma.browsers=PhantomJS.
11. Push your changes to your forked repository. Make sure you rebase to ensure that your commits sit on top of the current DeftJS master branch.
12. Create a pull request from your branch back to the DeftJS master branch to let us know about your proposed changes.
13. If you're adding or changing multiple things, set up separate branches and create separate pull requests for each change you're proposing. It's a lot easier for us to vet one thing at a time vs. trying to look over numerous different changes in one giant pull request.

If you really have a problem with using CoffeeScript, you can edit the JavaScript directly and send us that in a pull request. We can use a tool like Js2Coffee to translate it back into CoffeeScript. Just be aware that this makes it more difficult for us to review, vet, and merge your proposed changes.

How do I enable logging within Deft JS?

To enable logging output in the browser console, use the development version of Ext JS/Touch (e.g. ext-dev.js, ext-all-dev.js, etc.)

How do I use DeftJS with ext.js, ext-debug.js, or ext-dev.js to load Sencha classes individually instead of using ext-all.js?

Deft JS relies on several core Sencha classes to function. For some strange reason, these core classes are not part of the ext.js file, so you'll need to ensure that these classes are loaded and available before the DeftJS library is loaded. The easiest way to do this is to create a separate JavaScript file to specify Ext.Loader paths and require these dependent classes. So your script includes on the index page would look similar to:

<script type="text/javascript" charset="utf-8" src="/path_to_extJS_source/ext-dev.js"></script>
<script type="text/javascript" src="app/app_loader.js"></script>
<script type="text/javascript" src="deft/deft-debug.js"></script>
<script type="text/javascript" src="app/app.js"></script>

In this case, the app_loader.js file would set up the loader paths and require the necessary Sencha classes. It would look similar to:

// Configure Loader paths
Ext.Loader.setConfig({
	enabled: true,
	paths: {
		"MyAppNamespace": "app",
		"Ext": "/path_to_extJS_source/src"
	}
});

// Include dependent Sencha classes
Ext.syncRequire(["Ext.Component", "Ext.ComponentManager", "Ext.ComponentQuery"]);

How do I use Deft JS with the Sencha Touch microloader and Sencha Cmd?

The notes below are mainly for older versions of Touch and Cmd. For the latest information on this topic, see the Adding Deft JS to Your Application section of the Deft JS documentation.

Using Deft JS with Touch and Sencha Cmdfollows steps similar to the process mentioned above (to use Deft JS with the Sencha framework source files). So you'll create a separate app_loader.js file to set up Loader paths and require the necessary Touch classes that Deft JS depends on. So your app.json configuration file might look like:

"js": [
	{
		"path": "touch/sencha-touch.js"
	},
	{
		// Force the build to include necessary Touch classes
		"path": "app_loader.js",
		"bundle": true,
		"update": "delta"
	},
	{
		"path": "lib/deft/deft-debug.js"
	},
	{
		"path": "app.js",
		"bundle": true,
		"update": "delta"
	}
]

And your app_loader.js file would look similar to:

// Configure Loader paths
Ext.Loader.setConfig({
	enabled: true,
	paths: {
		"MyAppNamespace": "app",
		"Ext": "/path_to_touch_source/src"
	}
});

// Include dependent Sencha classes
Ext.syncRequire(["Ext.Component", "Ext.ComponentManager", "Ext.ComponentQuery"]);

Why aren't my View Controllers or injections being processed after building with Sencha Cmd?

For View Controllers: Deft JS dynamically requires your view controller class for you, based on the controller annotation in your view. Unfortunately, Sencha Cmd can't handle this dynamic behavior. So if you use Cmd, you'll need to add a requires entry for your view controller class to your view, to ensure that the view controller class is included.

Also, be sure that you're requiring the Deft.mixin.Controllable in your Application class or via Ext.syncRequire() during application startup.

For injections: Be be sure that you're requiring the Deft.mixin.Injectable in your Application class or via Ext.syncRequire() during application startup.

For more, see the Adding Deft JS to Your Application section of the Deft JS documentation.