PDA

View Full Version : Uncaught TypeError



simon
11 Mar 2014, 5:09 AM
I have this code from mastering extjs book:


Ext.apply(Ext.form.field.VTypes, {
customPass: function (val, field) {
return /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{6,20})/.test(val);
},
customPassText: 'Not a valid password. Length must be at least 6 characters and maximum of 20Password must contain one digit, one letter lowercase, one letter uppercase, onse special symbol @#$% and between 6 and 20 characters.',
});



But I get the following error:
"Cannot read property 'field' of undefined"

What is wrong? Probably some reference.

simon
11 Mar 2014, 6:56 AM
I have find out that reference to:

<script src="ext/ext-dev.js"></script>
was the reason.

If I replace ext-dev.js with ext-all-dev.js than I have access to Ext.form object otherwise form is undefined.

So, inside ext-all-dev, all ext objects are created, even if I don't need them?

How can I use "Ext.apply(Ext.form.field.VTypes,..." with ext-dev.js?

chamacs
11 Mar 2014, 10:30 AM
When using ext-dev.js or ext.js, you need to access the page via a web server because the rest of the ExtJS library is dynamically loaded. You cannot just open the HTML file from the file system using the browser.

simon
12 Mar 2014, 2:10 AM
I have web site on local IIS and I'm opening the page with chrome browser.
The page is index.html:



<html>
<head>
<meta charset="UTF-8">
<link href="resources/css/app.css" rel="stylesheet" />
<title>Packt</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-all-dev.js"></script>
<script src="bootstrap.js"></script>
<script src="app/vtypes.js"></script>
<script src="app.js"></script>
</head>
<body>
</body>
</html>

Ext.apply is inside vtypes.js file.
If I replace ext-all-dev.js with ext-dev.js I get the error as mentioned otherwise it works.

chamacs
12 Mar 2014, 7:23 AM
The problem is that the library is not yet loaded when your vtypes.js is ran. Try the following:



Ext.require('Ext.form.field.*');

Ext.onReady(function(){
Ext.apply( ... );
}