ExtJs: more vtypes for validation .... vtype on a roll..

Ext.form.VTypes["hostnameVal1"] = /^[a-zA-Z][-.a-zA-Z0-9]{0,254}$/;
Ext.form.VTypes["hostnameVal2"] = /^[a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}([.][a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}){0,}$/;
Ext.form.VTypes["ipVal"] = /^([1-9][0-9]{0,1}|1[013-9][0-9]|12[0-689]|2[01][0-9]|22[0-3])([.]([1-9]{0,1}[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2}[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-4])$/;
Ext.form.VTypes["netmaskVal"] = /^(128|192|224|24[08]|25[245].0.0.0)|(255.(0|128|192|224|24[08]|25[245]).0.0)|(255.255.(0|128|192|224|24[08]|25[245]).0)|(255.255.255.(0|128|192|224|24[08]|252))$/;
Ext.form.VTypes["portVal"] = /^(0|[1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
Ext.form.VTypes["multicastVal"] = /^((22[5-9]|23[0-9])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){3})|(224[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2})|(224[.]0[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])))$/;
Ext.form.VTypes["usernameVal"] = /^[a-zA-Z][-_.a-zA-Z0-9]{0,30}$/;
Ext.form.VTypes["passwordVal1"] = /^.{6,31}$/;
Ext.form.VTypes["passwordVal2"] = /[^a-zA-Z].*[^a-zA-Z]/;


Ext.form.VTypes["hostname"]=function(v){
 if(!Ext.form.VTypes["hostnameVal1"].test(v)){
  Ext.form.VTypes["hostnameText"]="Must begin with a letter and not exceed 255 characters"
  return false;
 }
 Ext.form.VTypes["hostnameText"]="L[.L][.L][.L][...] where L begins with a letter, ends with a letter or number, and does not exceed 63 characters";
 return Ext.form.VTypes["hostnameVal2"].test(v);
}
Ext.form.VTypes["hostnameText"]="Invalid Hostname"
Ext.form.VTypes["hostnameMask"]=/[-.a-zA-Z0-9]/;


Ext.form.VTypes["ip"]=function(v){
 return Ext.form.VTypes["ipVal"].test(v);
}
Ext.form.VTypes["ipText"]="1.0.0.1 - 223.255.255.254 excluding 127.x.x.x"
Ext.form.VTypes["ipMask"]=/[.0-9]/;


Ext.form.VTypes["netmask"]=function(v){
 return Ext.form.VTypes["netmaskVal"].test(v);
}
Ext.form.VTypes["netmaskText"]="128.0.0.0 - 255.255.255.252"
Ext.form.VTypes["netmaskMask"]=/[.0-9]/;


Ext.form.VTypes["port"]=function(v){
 return Ext.form.VTypes["portVal"].test(v);
}
Ext.form.VTypes["portText"]="0 - 65535"
Ext.form.VTypes["portMask"]=/[0-9]/;

Ext.form.VTypes["multicast"]=function(v){
 return Ext.form.VTypes["multicastVal"].test(v);
}
Ext.form.VTypes["multicastText"]="224.0.1.0 - 239.255.255.255"
Ext.form.VTypes["multicastMask"]=/[.0-9]/;
Ext.form.VTypes["username"]=function(v){
 return Ext.form.VTypes["usernameVal"].test(v);
}
Ext.form.VTypes["usernameText"]="Username must begin with a letter and cannot exceed 255 characters"
Ext.form.VTypes["usernameMask"]=/[-_.a-zA-Z0-9]/;
Ext.form.VTypes["password"]=function(v){
 if(!Ext.form.VTypes["passwordVal1"].test(v)){
  Ext.form.VTypes["passwordText"]="Password length must be 6 to 31 characters long";
  return false;
 }
 Ext.form.VTypes["passwordText"]="Password must include atleast 2 numbers or symbols";
 return Ext.form.VTypes["passwordVal2"].test(v);
}
Ext.form.VTypes["passwordText"]="Invalid Password"
Ext.form.VTypes["passwordMask"]=/./;

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();
      
     }