Theme and Custom VType problems with Ext JS

I am currently developing a website for a local golf course to allow customers to sign up with NCGA tournaments online. I am using Ext JS for the form, PHP for the database stuff, and Dreamweaver's Spry for the navbar. The form is functioning correctly however I have 2 issues with Ext JS:
1. When I want to add my own VTypes to the form to perform regex validation it works perfectly fine in Firefox, but it breaks the form in Internet Explorer.
VType Code in form.js.php:
Ext.apply( Ext.form.VTypes
            , { 'phone': function()
               {  var re = /^(\d{3}[-]?){1,2}(\d{4})$/;
                  return function(v) { return re.test(v); }
               }()
            , 'phoneMask' : /[\d-]/
                                    , 'phoneText' : 'Not a valid phone number.  Must be in the format 123-4567 or 123-456-7890'
            });
Ext.apply( Ext.form.VTypes
            , { 'numeric': function()
               {  var re = /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/;
                  return function(v) { return re.test(v); }
               }()
            , 'numericMask' : /[0-9]/
                                    , 'numericText' : 'Only numbers are allowed'
            });                                      
Ext.apply( Ext.form.VTypes
            , { 'decNum': function()
               {  var re = /\d+\.\d+|\d+/;
                  return function(v) { return re.test(v); }
               }()
            , 'decNumMask' : /(\d|\.)/
                                    , 'decNumText' : 'Only decimal numbers are allowed'
            });
2. When I add take out
<link rel="stylesheet" type="text/css" href="/EXTJS/ext-2.0.1/resources/css/ext-all.css"/>
from index.php and replace it with a Ext JS theme I downloaded:
 <link rel="stylesheet" type="text/css" href="/EXTJS/ext-2.0.1/resources/css/xtheme-olive.css"/>
the GUI gets really messed up along the buttons and the window that pops up when you submit or don't type in all the required fields. Also the ability to collapse the separate sections: Name, Personal Information, and Phone goes away.

Any help would be appreciated,
Daniel
danfiggolfAsked:
Who is Participating?
 
danfiggolfConnect With a Mentor Author Commented:
Found answer in Ext JS Forms: http://extjs.com/forum/showthread.php?p=124582#post124582

Thank you,
Daniel
0
 
BadotzCommented:
What did the Good Folks at ext have to say about this?
0
 
BadotzCommented:
Are the VTypes shown from ext or from you? If they are yours, please paste an example from ext.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
danfiggolfAuthor Commented:
I actually haven't posted in the Ext forums and the VTypes are made by me, defined within the application itself with this code:
Ext.apply( Ext.form.VTypes
            , { 'phone': function()
               {  var re = /^(\d{3}[-]?){1,2}(\d{4})$/;
                  return function(v) { return re.test(v); }
               }()
            , 'phoneMask' : /[\d-]/
                                    , 'phoneText' : 'Not a valid phone number.  Must be in the format 123-4567 or 123-456-7890'
            });
Ext.apply( Ext.form.VTypes
            , { 'numeric': function()
               {  var re = /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/;
                  return function(v) { return re.test(v); }
               }()
            , 'numericMask' : /[0-9]/
                                    , 'numericText' : 'Only numbers are allowed'
            });                                      
Ext.apply( Ext.form.VTypes
            , { 'decNum': function()
               {  var re = /\d+\.\d+|\d+/;
                  return function(v) { return re.test(v); }
               }()
            , 'decNumMask' : /(\d|\.)/
                                    , 'decNumText' : 'Only decimal numbers are allowed'
            });
0
 
danfiggolfAuthor Commented:
The webpage with the form is located @: http://diamondoaksncga.com/ajax/vid0166/DW_CS3/products/
0
 
BadotzCommented:
Right, but how do you know you're new VTypes are ext-compliant?
0
 
danfiggolfAuthor Commented:
I copied them off the Ext forums and modified the regular expressions.
0
 
danfiggolfAuthor Commented:
Also they work perfectly fine in Firefox, they just don't work in Internet Explorer.
0
 
BadotzCommented:
On your page:

If I click submit without doing anything, it whines about fixing something, but there is no indication of what is wrong.

I entered 123 as the GHIN# and clicked submit - no errors.

What, exacltly, is not working, and how do I know?
0
 
BadotzCommented:
btw: your alert to fix the errors noted needs work - the buttons do not fit within their container, but spill across the page.
0
 
danfiggolfAuthor Commented:
That only happens when I use the xtheme-olive.css. But when I use the base Ext JS CSS file, it works & looks fine.
0
 
BadotzCommented:
Still, if I click submit without doing anything, it whines about fixing something, but there is no indication of what is wrong.

I entered 123 as the GHIN# and clicked submit - no errors.

What, exacltly, is not working, and how do I know?
0
 
danfiggolfAuthor Commented:
I created a temporary pages to show you how the olive green theme should work: index3.php.
index2.php is the same as index.php except it uses ext-all.css instead of xtheme-olive.css, it shows that xtheme-olive.css isn't working properly and should work like ext-all.css except with the green theme.

The VTypes are supposed to validate the data while it is being inputted; however, these VTypes are causing the application to break in Internet Explorer.
0
 
danfiggolfAuthor Commented:
Found answer in Ext JS Forms: http://extjs.com/forum/showthread.php?p=124582#post124582

Thank you,
Daniel
0
 
modus_operandiCommented:
Closed, 500 points refunded.
modus_operandi
EE Moderator
0
All Courses

From novice to tech pro — start learning today.