Skip to content

F.A.Q.

Jump to bottom Edit New page
Isaac edited this page Jun 20, 2013 · 30 revisions

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

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.
  1. Fork the Github project, and then create a new branch to contain your changes.
  2. Ensure that for the cloned repository the parent directory contains an unzipped copy of Sencha Touch & ExtJS, or a symlink to each, named touch and ext respectively. For example if you cloned the DeftJS 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.
  3. 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.
  4. Install required NodeJS modules. cd path/to/src/DeftJS && npm install. This will install Karma.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. Create a pull request from your branch back to the DeftJS master branch to let us know about your proposed changes.
  12. 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 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"]);
Add a custom footer
Add a custom sidebar
Clone this wiki locally