Custom VType in MVC style?

[softwarezman]

Hello,

I've been working on porting my app to v4 and have run into a simple issue that I can't seem to figure out how to properly implement. I wanted to create a custom vtype (any new vtype for that matter) and can't seem to figure out where I'm actually supposed to place the vtype creation code? In the View file? app.js? Any simple sample or direction would be extremely helpful. Thanks!

Zane

[s1nf3rn0]

Have you looked here yet?
http://docs.sencha.com/ext-js/4-0/#/...m.field.VTypes

Also if it's just a vtype, it probably is going to be used across (possibly) multiple files correct? You probably could define it in app.js for now, then move it to a type file at a later point that will be loaded separately?
Maybe include it before(?) bootstap.js?

[softwarezman]

I did look there but while it shows the 'normal' way of loading it in, it doesn't say where to put it when using the MVC style architecture. I'll stick it in app.js and figure out how to get it to work from there. If anybody has any other suggestions I'm more than welcome to try something different. Thanks.

[rrandymeyer]

Hi softwarezman,

How did this work out? I am using MVC and also am looking into creating a custom VType.

thank you - Randy

[softwarezman]

I've had to leave it in app.js for the moment as I had to move on to other aspects of the application unfortunately. I'm sure there has to be a better way, I just can't spend the time on a 'simple' VType anymore.

[jameslinden]

Where in app.js are you declaring the custom VType? Anywhere I try to put it, I get Ext.form is undefined...

[rrandymeyer]

Here is my app.js:

Ext.Loader.setConfig({
    enabled : true,
    paths: {
        Ext: 'ext/src',
        My: 'app'
    } 
});

//custom Vtype for vtype:'SpecSectionVType'
Ext.apply(Ext.form.field.VTypes, {
    SpecSectionVType:  function(v) {
        return /^\d{1,6}$/.test(v);
    },
    SpecSectionVTypeText: 'Must be numeric.',
    SpecSectionVTypeMask: /[\d\.]/i
});

//custom Vtype for vtype:'Sub1VType'
Ext.apply(Ext.form.field.VTypes, {
    Sub1VType:  function(v) {
        return /^\d{1}\.\d{1}$/.test(v);
    },
    Sub1VTypeText: 'Must be in the form #.#',
    Sub1VTypeMask: /[\d\.]/i
});

Ext.application({
    name: 'SI',
    appfolder: 'app',
    controllers: [
        'LayoutController', 
        'ActionsController',
        'DefinitionsController' ,
        'AssignmentController'
    ],

    autoCreateViewport    : false,
   
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                    {
                        xtype: 'HeaderPanel',
                        id: 'headerPanel',
                        region: 'north'
                    },{
                        xtype: 'ActionPanel',
                        id: 'actionPanel',
                        region: 'west'
                    },{
                        xtype: 'MainPanel',
                        id: 'mainPanel',
                           region: 'center'
                    }        
                ]
        });
    }
});

[jameslinden]

Thank you for the example code. I needed to use Ext.Loader first, and now it works.

[softwarezman]

If you use the MVC style programming you would put it in your app.js file in the launch section: (forgive the errors, have to hand-type this)

launch: function() {
  var timeTest = REGEXHERE;
  Ext.apply(Ext.form.field.VTypes, {
    time: function(val, field) {
      return timeTest.test(val);
    }
    timeText: 'Not a valid time. Must be in the format "12:34 PM".',
    timeMask: /[\d\s:amp]/i
  });
}

[jameslinden]

Yeah, I thought so too, and tried that originally, but doing that gets me

Ext.form is undefined

.