PDA

View Full Version : Theme and Custom VType problems



mikfig
11 Feb 2008, 5:23 PM
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