Grunt task to figure out the order in which your ExtJS dependencies should be loaded. Provides you with an ordered list of file paths you can concat and minify.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

grunt-extdeps Dependency Status

Get ordered project ExtJS dependencies

Getting Started

This plugin requires Grunt ~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-extdeps --save-dev

One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


The "extdeps" task


This task builds an ordered array of dependency paths by booting up your application in debug mode and inspecting the Ext.Loader history.

The extdeps task creates a variable named extdeps_[target] which is an ordered array of file paths you can use in subsequent tasks.

For flexibility the extdeps task doesn't add ext-debug.js to the list of paths it creates. This means you can add it as a static script on a CDN or something. Hence, if you want to concat and minify everything then you'll need to manually add ext-debug.js to your concat files.

In your project's Gruntfile, add a section named extdeps to the data object passed into grunt.initConfig().

  extdeps: {
    your_target: {
      options: {
        // Task-specific options go here.



Type: String Default value: ./index.html

REQUIRED. Your application entry point.


Type: String Default value: undefined

REQUIRED. Your application namespace.


Type: String Default value: ./extjs

Path to ExtJS.


Type: String Default value: ./app

Path to your app.


Type: String Default value: .

Path to your the root of your website (used when depending on namespaces not belonging to your application).


Type: String Default value: ./app.js

Path to your app.js file.

Usage Examples

Default Options

  extdeps: {
    dist: {
      options: {
        // The file extdeps should run to inspect the Ext.Loader.history to determine the dependencies
        url: 'index.html',
        // Your classes are named, for example, MyCompany.controller.Homepage
        appNs: 'MyCompany'
  // The generated array can then be used in the concat/minify/other tasks
  concat: {
    dist: {
      src: '<%= extdeps_dist %>',
      dest: 'dist/app.js',

Custom Options

In this example, custom options are used to allow the plugin to be used when the frontend files are not in the same directory as the Gruntfile.

  extdeps: {
    dist: {
      options: {
        url: 'wwwroot/index.html',
        appNs: 'MyCompany',
        extPath: 'wwwroot/extjs',
        appPath: 'wwwroot/app',
        rootPath: 'wwwroot',
        appJs: 'wwwroot/app.js'


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

  • 2013-09-11   v0.0.6   Updated dependencies, fixed github URLs in package.json
  • 2013-04-15   v0.0.4   Brand new