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.

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

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 reason, these core classes are not part of ext.js, 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="http://cdn.sencha.io/ext-4.2.0-beta/ext-dev.js"></script>
<script type="text/javascript" src="js/app/app_loader.js"></script>
<script type="text/javascript" src="js/deft/deft-debug.js"></script>
<script type="text/javascript" src="js/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"]);