Refresh npm, bower, grunt and wiredep.

Somehow I feel that I messed up something in the course of development... so let's start over... :-)

Removal of NPM

rm -fr ~/.npm
sudo su - 
cd /usr/local/lib/node_modules
rm -fr *

Node Package Manager (npm)

http://nodejs.org/ Select the link to install npm and installation will commence based on your operating system.

Yeoman Scaffolding (yo)

$ sudo npm install --global yo
/usr/local/bin/yo -> /usr/local/lib/node_modules/yo/cli.js

> yo@1.3.2 postinstall /usr/local/lib/node_modules/yo
> yodoctor

[Yeoman Doctor] Everything looks all right!

npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/npm-package-arg requires semver@'4' but will load
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/semver,
npm WARN unmet dependency which is version 2.3.0
yo@1.3.2 /usr/local/lib/node_modules/yo
├── is-root@1.0.0
├── sudo-block@1.0.0
├── yeoman-doctor@1.0.0
├── fullname@1.0.0
├── opn@1.0.0
├── async@0.9.0
├── shelljs@0.3.0
├── underscore.string@2.3.3
├── lodash@2.4.1
├── string-length@1.0.0 (strip-ansi@2.0.0)
├── yeoman-character@1.0.0 (supports-color@1.2.0)
├── nopt@3.0.1 (abbrev@1.0.5)
├── findup@0.1.5 (colors@0.6.2, commander@2.1.0)
├── multiline@1.0.1 (strip-indent@1.0.0)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── yosay@1.0.0 (ansi-regex@1.1.0, ansi-styles@1.1.0, strip-ansi@2.0.0, pad-component@0.0.1, word-wrap@0.1.3, minimist@1.1.0, taketalk@0.1.1)
├── update-notifier@0.2.2 (is-npm@1.0.0, semver-diff@2.0.0, latest-version@1.0.0)
├── configstore@0.3.1 (object-assign@0.3.1, osenv@0.1.0, graceful-fs@3.0.4, uuid@1.4.2, mkdirp@0.5.0, js-yaml@3.0.2)
├── insight@0.4.3 (object-assign@1.0.0, tough-cookie@0.12.1, os-name@1.0.1, lodash.debounce@2.4.1, request@2.45.0, inquirer@0.6.0)
├── yeoman-generator@0.17.7 (dargs@2.0.3, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.8, text-table@0.2.0, github-username@1.0.0, mime@1.2.11, debug@1.0.4, isbinaryfile@2.0.1, grouped-queue@0.3.0, cross-spawn@0.2.3, run-async@0.1.0, mkdirp@0.5.0, iconv-lite@0.4.4, findup-sync@0.1.3, request@2.45.0, file-utils@0.2.1, gruntfile-editor@0.2.0, glob@4.0.6, cheerio@0.17.0, download@1.0.7, inquirer@0.7.3)
└── yeoman-environment@1.0.2 (log-symbols@1.0.1, diff@1.0.8, text-table@0.2.0, debug@2.1.0, grouped-queue@0.3.0, untildify@1.0.0, glob@4.0.6, inquirer@0.8.0)

Installing the AngularJS generator

$ sudo npm install -g generator-angularjs
Password:
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/npm-package-arg requires semver@'4' but will load
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/semver,
npm WARN unmet dependency which is version 2.3.0
generator-angularjs@1.0.0 /usr/local/lib/node_modules/generator-angularjs
└── yeoman-generator@0.14.2 (dargs@0.1.0, diff@1.0.8, debug@0.7.4, rimraf@2.2.8, text-table@0.2.0, mime@1.2.11, async@0.2.10, mkdirp@0.3.5, isbinaryfile@0.1.9, shelljs@0.2.6, chalk@0.3.0, underscore.string@2.3.3, iconv-lite@0.2.11, lodash@2.2.1, findup-sync@0.1.3, glob@3.2.11, file-utils@0.1.5, request@2.27.0, cheerio@0.12.4, inquirer@0.3.5, download@0.1.19)

Installing Grunt

$ sudo npm install -g grunt-cli
Password:
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/npm-package-arg requires semver@'4' but will load
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/semver,
npm WARN unmet dependency which is version 2.3.0
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

Wiredep (Re)Install

$ sudo npm install -g wiredep
Password:
wiredep@1.8.6 node_modules/wiredep
├── propprop@0.3.0
├── minimist@1.1.0
├── lodash@2.4.1
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33-1)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, strip-ansi@0.3.0, has-ansi@0.1.0)
├── glob@4.0.6 (inherits@2.0.1, graceful-fs@3.0.4, once@1.3.1, minimatch@1.0.0)
└── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1, mout@0.9.1)

Bower (Re)Install

http://bower.io/

$ sudo npm install -g bower
Password:
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/npm-package-arg requires semver@'4' but will load
npm WARN unmet dependency /usr/local/lib/node_modules/npm/node_modules/semver,
npm WARN unmet dependency which is version 2.3.0
bower@1.3.12 /usr/local/lib/node_modules/bower
├── is-root@1.0.0
├── junk@1.0.0
├── stringify-object@1.0.0
├── abbrev@1.0.5
├── which@1.0.5
├── chmodr@0.1.0
├── osenv@0.1.0
├── opn@1.0.0
├── archy@0.0.2
├── rimraf@2.2.8
├── lru-cache@2.5.0
├── bower-logger@0.2.2
├── bower-endpoint-parser@0.2.2
├── graceful-fs@3.0.4
├── lockfile@1.0.0
├── nopt@3.0.1
├── retry@0.6.0
├── tmp@0.0.23
├── q@1.0.1
├── semver@2.3.2
├── p-throttler@0.1.0 (q@0.9.7)
├── request-progress@0.3.0 (throttleit@0.0.2)
├── shell-quote@1.4.2 (array-filter@0.0.1, array-reduce@0.0.0, array-map@0.0.0, jsonify@0.0.0)
├── fstream@1.0.2 (inherits@2.0.1)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── promptly@0.2.0 (read@1.0.5)
├── chalk@0.5.0 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── fstream-ignore@1.0.1 (inherits@2.0.1, minimatch@1.0.0)
├── glob@4.0.6 (inherits@2.0.1, once@1.3.1, minimatch@1.0.0)
├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1)
├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7)
├── mout@0.9.1
├── cardinal@0.4.0 (redeyed@0.4.4)
├── decompress-zip@0.0.8 (nopt@2.2.1, mkpath@0.1.0, touch@0.0.2, readable-stream@1.1.13, binary@0.3.0)
├── request@2.42.0 (caseless@0.6.0, json-stringify-safe@5.0.0, aws-sign2@0.5.0, forever-agent@0.5.2, stringstream@0.0.4, oauth-sign@0.4.0, tunnel-agent@0.4.0, node-uuid@1.4.1, qs@1.2.2, mime-types@1.0.2, bl@0.9.3, form-data@0.1.4, http-signature@0.10.0, tough-cookie@0.12.1, hawk@1.1.1)
├── bower-registry-client@0.2.1 (request-replay@0.2.0, lru-cache@2.3.1, async@0.2.10, mkdirp@0.3.5, graceful-fs@2.0.3, request@2.27.0)
├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, configstore@0.3.1, latest-version@0.2.0)
├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
├── inquirer@0.7.1 (figures@1.3.3, mute-stream@0.0.4, through@2.3.6, readline2@0.1.0, lodash@2.4.1, cli-color@0.3.2, rx@2.3.13)
└── insight@0.4.3 (object-assign@1.0.0, async@0.9.0, chalk@0.5.1, os-name@1.0.1, lodash.debounce@2.4.1, tough-cookie@0.12.1, configstore@0.3.1, inquirer@0.6.0)

Angular ng-enter Directive

Just copied it from somewhere to keep for myself .. I mostly put it in the app.js at the bottom so everyone is able to use this function.

.directive('ngEnter', function() {
 return function(scope, element, attrs) {
  element.bind("keydown keypress", function(event) {
   if (event.which === 13) {
    scope.$apply(function() {
     scope.$eval(attrs.ngEnter, {
      'event' : event
     });
    });

    event.preventDefault();
   }
  });
 };
});

Dancer / Template Toolkit : auto include javascript sources

Playing with Dancer and Angular I found out spliting up controllers in separate js files seems a clean thing to do... however I kept on missing js includes... let's automate this in your 'layout/main.tt' insert the following to include the js pieces automagically

....

[% PERL %]
my @files = ();
use File::Find;
File::Find::find({ wanted=>sub {   push @files, $File::Find::name if /^.*\.js\z/s; }}, 'public/javascripts', 'public/partials');
foreach my $js (@files) {
    $js =~ s/public\///g;
    print "\n";
}
[% END %]


...
..

Then make sure you configure the template engine in your 'config.yml' for TT.

template: "template_toolkit"
engines:
  template_toolkit:
    encoding:  'utf8'
    start_tag: '[%'
    end_tag:   '%]'
    WRAPPER: layouts/main.tt
    EVAL_PERL: '1'

Then my source gets generated like this (lines 35-43) :

EXTJS substring errors on loading widgets.... fast debug in Chrome

So I'm wasting a lot of time with ExtJS refactoring on typos on widgets or paths that are misspelled. See the typical errors at the end of this post... and yeah yeah

1. 1) I should be more careful,
2. 2) should buy a tool,
3. 3) buy new glasses...

but honestly I would rather see a meaningful error on the Javascript so where do we put the break point (Chrome)

So in line ext-all-debug.js:5416 set a conditional breakpoint on that line for '!className'.

Uncaught TypeError: Cannot call method 'substring' of undefined ext-all-debug.js:5043
Ext.ClassManager.parseNamespace ext-all-debug.js:5043
Ext.ClassManager.get ext-all-debug.js:5151
Ext.ClassManager.instantiate ext-all-debug.js:5434
Ext.ClassManager.instantiateByAlias ext-all-debug.js:5416
Ext.apply.widget ext-all-debug.js:5701
Ext.define.create ext-all-debug.js:21751
Ext.define.lookupComponent ext-all-debug.js:37477
Ext.define.prepareItems ext-all-debug.js:37447
Ext.define.add ext-all-debug.js:37502
Ext.define.initItems ext-all-debug.js:37279
Base.implement.callParent ext-all-debug.js:4250
Ext.define.initItems ext-all-debug.js:50980
Ext.define.initComponent ext-all-debug.js:37262
Base.implement.callParent ext-all-debug.js:4250
Ext.define.initComponent ext-all-debug.js:50959
Base.implement.callParent ext-all-debug.js:4250
Ext.define.initComponent ext-all-debug.js:53582
Base.implement.callParent ext-all-debug.js:4250
Ext.define.initComponent ext-all-debug.js:126581
Ext.define.constructor ext-all-debug.js:29304
Base.implement.callParent ext-all-debug.js:4250
Ext.define.constructor ext-all-debug.js:33278
constructor ext-all-debug.js:4883
Ext.apply.widget ext-all-debug.js:5703
Ext.define.create ext-all-debug.js:21751
Ext.define.lookupComponent ext-all-debug.js:37477
Ext.define.prepareItems ext-all-debug.js:37447
Ext.define.add ext-all-debug.js:37502
Ext.define.initItems ext-all-debug.js:37279
Ext.define.initComponent ext-all-debug.js:37262
Base.implement.callParent ext-all-debug.js:4250
Ext.define.initComponent ext-all-debug.js:68865
Ext.define.constructor ext-all-debug.js:29304
Base.implement.callParent ext-all-debug.js:4250
Ext.define.constructor ext-all-debug.js:33278
constructor ext-all-debug.js:4883

Wiring a combo box populating two fields by means of events.

We have a 'citycombo' with store attached that has a record with the name and the state where the city resides. For example: name : 'Springfield', state : 'MA'. The selection of Springfield, MA from the city combo will populate the state field (which is freeform). How to wire the events. Flow; catch the select event, lookup the state field by means of its id 'stateId' and set the value of the field found....

   }, {
     'xtype' : 'citycombo',
     'name' : 'city',
     'fieldLabel' : 'city',
     listeners : {
      "select" : function(k, rs) {
       console.log("%o %o", k, rs);
       if (rs.length) {
        me.getComponent('iState').setValue(rs[0].get('state'));
       }
      }

     },

   }, {
     'xtype' : 'textfield',
     'id' : 'iState',
     'name' : 'state',
     'fieldLabel' : 'state',

   },

Grid - Form and Filtering in ExtJS4 and record release.

Components we have ... [1] one grid - with table of query results [2] one form - for details when row is selected in the grid [3] one check - box The check box 'Incl' will apply a filter based on the checked value. If you selected a record and show it in the form there will be an error occuring on the handler when using the filtering on the store like this.

   }, {
     xtype : 'checkbox',
     boxLabel : 'Incl. Archive',
     handler :  function(_old, _new) {
       var filter = {};
       var _store_ = Ext.getStore('GridStore');
       // release any loaded record bound to form.
       if (!_new) {
        filter = { property : 'my_field', value : { '!=' : 'ARC'}};
        _store_.filter(filter);
       }
       else {
        _store_.clearFilter();
       }
     }

TypeError: record is undefined
createRelayer()ext-all-debug.js (line 11282)
fire()ext-all-debug.js (line 9677)
continueFireEvent(eventName="selectionchange", args=[Object { events={...}, views=[1], modes={...}, more...}, []], bubbles=undefined)ext-all-debug.js (line 11035)
fireEventArgs(eventName="selectionchange", args=[Object { events={...}, views=[1], modes={...}, more...}, []])ext-all-debug.js (line 11013)
fireEvent(eventName="selectionchange")ext-all-debug.js (line 10999)
maybeFireSelectionChange(fireEvent=true)ext-all-debug.js (line 92334)
doDeselect(records=[Object { raw={...}, modified={...}, data={...}, more...}], suppressEvent=undefined)ext-all-debug.js (line 92269)
deselect(records=Object { raw={...}, modified={...}, data={...}, more...}, suppressEvent=undefined)ext-all-debug.js (line 92155)
handler(_old=Object { xtype="checkbox", boxLabel="Incl. Archive", initialConfig={...}, more...}, 

The reason is that the form will "hold" the record that was selected in the grid. To solve this we need to deselect the record, but that's not all. We also need to prevent the 'selectionchange' event from occurring, hence suspending the events on the selection model would also need to be applied. The new handler code for the checkbox is:

     handler :  function(_old, _new) {
       var filter = {};
       var _store_ = Ext.getStore('TerritoryAddressStore');
       // release any loaded record bound to form.
       grid.getSelectionModel().suspendEvents();
       grid.getSelectionModel().deselect(form.getRecord());
       if (!_new) {
        filter = { property : 'my_field', value : { '!=' : 'ARC'}};
        _store_.filter(filter);
       }
       else {
        _store_.clearFilter();
       }
       grid.getSelectionModel().resumeEvents();
      
     }