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 DeftJS?
• How do I enable logging within DeftJS?
• 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?
• How do I use DeftJS with the Sencha Touch microloader and Sencha Command?

Answers

How do I contribute to DeftJS?

We always appreciate help or new ideas. The easiest way to contribute to DeftJS 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
3. Edit the CoffeeScript source to include your changes. Since CoffeeScript uses indents to infer information about the code, be sure you use the tab character for your indents.
4. Compile the CoffeeScript into JavaScript. You can do this any way you like (command line, Cake file, etc.), but there is an Apache Ant build file included in the DeftJS root directory that will do this if you wish.
5. Make sure all Jasmine tests pass. The build will recompile the Jasmine .coffee files, and you can run the tests against various Sencha libraries by opening the `spec/SpecRunner.html' file and choosing different Sencha libraries to use.
6. Push your changes to your forked repository.
7. Create a pull request to let us know about your proposed changes.

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 DeftJS?

To enable logging output in the browser console, use the development version of ExtJS/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?

DeftJS 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 DeftJS with the Sencha Touch microloader and Sencha Command?

Using DeftJS with Touch and Sencha Command follows steps similar to the process mentioned above (to use DeftJS 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 DeftJS 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"]);