Ext.ns('blablar');
Ext.QuickTips.init();
// Mascaras de validacion
Ext.form.VTypes["passwordVal1"] = /^.{6,31}$/;
Ext.form.VTypes["passwordVal2"] = /[^a-zA-Z].*[^a-zA-Z]/;
Ext.form.VTypes["usernameVal"] = /^[a-zA-Z][-_.a-zA-Z0-9]{0,12}$/;
Ext.form.VTypes["password"] = function(v)
{
if( ! Ext.form.VTypes["passwordVal1"].test(v))
{
Ext.form.VTypes["passwordText"] = "La contraseña debe ser al menos de 6 carácteres.";
return false;
}
Ext.form.VTypes["passwordText"] = "La contraseña debe contener al menos 2 números o símbolos.";
return Ext.form.VTypes["passwordVal2"].test(v);
}
Ext.form.VTypes["username"] = function(v)
{
return Ext.form.VTypes["usernameVal"].test(v);
}
Ext.form.VTypes["usernameText"] = "Tu nombre de usuario no puede ser mayor a 12 carácteres, y debe empezar con una letra."
Ext.form.VTypes["usernameMask"] = /[-_.a-zA-Z0-9]/;
// eof
var estados = new Ext.data.SimpleStore(
{
fields : ['id', 'estado'],
data : [['1', 'AGUASCALIENTES'],
['2', 'BAJA CALIFORNIA'],
['3', 'BAJA CALIFORNIA SUR'],
['4', 'CHIHUAHUA'],
['5', 'COLIMA'],
['6', 'CAMPECHE'],
['7', 'COAHUILA'],
['8', 'CHIAPAS'],
['9', 'DISTRITO FEDERAL'],
['10', 'DURANGO'],
['11', 'GUERRERO'],
['12', 'GUANAJUATO'],
['13', 'HIDALGO'],
['14', 'JALISCO'],
['15', 'MEXICO'],
['16', 'MICHOACAN'],
['17', 'MORELOS'],
['18', 'NAYARIT'],
['19', 'NUEVO LEON'],
['20', 'OAXACA'],
['21', 'PUEBLA'],
['22', 'QUINTANA ROO'],
['23', 'QUERÉTARO'],
['24', 'SINALOA'],
['25', 'SAN LUIS POTOSI'],
['26', 'SONORA'],
['27', 'TABASCO'],
['28', 'TLAXCALA'],
['29', 'TAMAULIPAS'],
['30', 'VERACRUZ'],
['31', 'YUCATAN'],
['32', 'ZACATECAS']]
}
);
var colores = new Ext.data.SimpleStore(
{
fields : ['id', 'color'],
data : [['1', 'blablar.com'],
['2', 'Blanco y Negro'],
['3', 'Olivo'],
['4', 'Gris'],
['5', 'Azul'],
['6', 'Slate'],
['7', 'Metal']]
}
);
blablar.actualizaCuenta = Ext.extend(Ext.FormPanel,
{
frame : true,
id : 'actualizaCuenta',
width : 410,
height : 260,
border : true,
labelWidth : 0,
initComponent : function()
{
Ext.apply(this,
{
items : [
{
layout : 'form',
baseCls : 'x-plain',
defaults :
{
labelAlign : 'top'
}
,
items : [
{
layout : 'column',
baseCls : 'x-plain',
defaults :
{
labelAlign : 'top'
}
,
items : [
{
columnWidth : .3,
layout : 'form',
// Datos de la cuenta
items : [
{
fieldLabel : 'Correo electrónico',
vtype : 'email',
allowBlank : false,
width : 150,
name : 'correo',
enabled : false,
readOnly : true,
xtype : 'textfield'
}
/* , {
fieldLabel : 'Contraseña',
width : 150,
vtype : 'password',
inputType : 'password',
allowBlank : false,
name : 'password',
xtype : 'textfield'
}, {
fieldLabel : 'Confirmar Contraseña',
width : 150,
vtype : 'password',
allowBlank : false,
inputType : 'password',
name : 'validarpwd',
xtype : 'textfield'
} */ ,
{
fieldLabel : 'Nombre de Usuario',
width : 100,
maxLength : 12,
allowBlank : false,
vtype : 'username',
name : 'usuario',
xtype : 'textfield'
}
,
{
xtype : 'datefield',
format : 'd/m/Y',
fieldLabel : 'Fecha Nacimiento',
name : 'fnacimiento'
},
{
xtype : 'combo',
name : 'color',
allowBlank : false,
fieldLabel : 'Paleta',
mode : 'local',
store : colores,
triggerAction: 'all',
displayField : 'color',
dataField : 'id',
width : 120
}
]
}
,
// Nombre y apellidos
{
columnWidth : .3,
layout : 'form',
items : [
{
fieldLabel : 'Nombre',
width : 150,
maxLength : 75,
allowBlank : false,
name : 'nombre',
xtype : 'textfield'
}
,
{
fieldLabel : 'Apellido Paterno',
width : 150,
maxLength : 75,
allowBlank : false,
name : 'paterno',
xtype : 'textfield'
}
,
{
fieldLabel : 'Apellido Materno',
width : 150,
maxLength : 75,
name : 'materno',
xtype : 'textfield'
}
,
{
fieldLabel : 'Número Celular',
name : 'celular',
xtype : 'textfield',
allowBlank : false,
vtype : 'alphanum',
maxLength : 10,
minLength : 10,
isFormField : true,
width : 120
}
/* , {
fieldLabel : 'Código de Validación',
name : 'checkcode',
xtype : 'textfield',
allowBlank : false,
vtype : 'alphanum',
maxLength : 10,
isFormField : true,
width : 120
} */ ]
}
,
// Domicilio y celular
{
columnWidth : .3,
layout : 'form',
items : [
{
fieldLabel : 'Domicilio',
name : 'direccion',
allowBlank : false,
xtype : 'textarea',
isFormField : true,
width : 180,
height : 35
}
,
{
fieldLabel : 'Ciudad',
name : 'ciudad',
xtype : 'textfield',
isFormField : true,
width : 180
}
,
{
xtype : 'combo',
name : 'estado',
allowBlank : false,
fieldLabel : 'Estado',
mode : 'local',
store : estados,
displayField : 'estado',
dataField : 'id',
width : 180
}
/* , {
xtype : 'datefield',
fieldLabel : 'Fecha Nacimiento',
name : 'fNacimiento'
} */ ]
}
]
}
]
}
]
}
);
blablar.actualizaCuenta.superclass.initComponent.apply(this, arguments);
}
, onRender : function()
{
// call parent
blablar.actualizaCuenta.superclass.onRender.apply(this, arguments);
}
}
);
Ext.reg('actualizaCuenta', blablar.actualizaCuenta);
blablar.cuentaNuevaExpress = Ext.extend(Ext.FormPanel,
{
frame : true,
id : 'cuentaNuevaExpress',
width : 540,
height : 200,
iconCls : 'user-icon',
border : true,
labelWidth : 70,
initComponent : function()
{
Ext.apply(this,
{
items : [
{
layout : 'form',
baseCls : 'x-plain',
defaults :
{
labelAlign : 'left'
}
,
items : [
{
layout : 'column',
baseCls : 'x-plain',
defaults :
{
labelAlign : 'left'
}
,
items : [
{
columnWidth : .5,
layout : 'form',
// Datos de la cuenta
items : [
{
fieldLabel : 'Correo electrónico',
vtype : 'email',
allowBlank : false,
width : 180,
name : 'correo',
qtip : 'Texto',
emptyText : 'Tu cuenta de correo',
blankText : 'Este campo es requerido',
xtype : 'textfield'
}
,
{
fieldLabel : 'Contraseña en blablar',
width : 150,
vtype : 'password',
inputType : 'password',
allowBlank : false,
name : 'password',
xtype : 'textfield'
}
,
{
fieldLabel : 'Nombre de Usuario',
width : 100,
maxLength : 12,
allowBlank : false,
vtype : 'username',
name : 'usuario',
emptyText : 'Escribe tu Nick',
blankText : 'Este campo es requerido',
xtype : 'textfield'
}
,{
xtype : 'box', autoEl :
{
tag : 'div', html : 'Marcando la casilla de "Acepto" indicas que estas de acuerdo con los terminos y condiciones de uso del servicio.
'
}
}
]
}
,
// Nombre y apellidos
{
columnWidth : .5,
layout : 'form',
items : [
{
fieldLabel : 'Nombre',
width : 220,
maxLength : 190,
allowBlank : false,
name : 'nombre',
emptyText : 'Tu nombre completo',
blankText : 'Este campo es requerido',
xtype : 'textfield'
}
,
{
fieldLabel : 'Número Celular',
name : 'celular',
xtype : 'textfield',
allowBlank : false,
vtype : 'alphanum',
emptyText : 'Sin 044/045',
maxLength : 10,
minLength : 10,
blankText : 'Este campo es requerido',
isFormField : true,
width : 120
}
/* , {
xtype : 'combo',
name : 'estado',
allowBlank : false,
fieldLabel : 'Estado',
mode : 'local',
store : estados,
displayField : 'estado',
dataField : 'id',
width : 180
}, {
xtype : 'datefield',
fieldLabel : 'Fecha Nacimiento',
name : 'fNacimiento'
} */ ,
{
fieldLabel : 'Validación'
, xtype : 'box'
, anchor : ''
, isFormField : true
, autoEl :
{
tag : 'div', children : [
{
tag : 'img'
, qtip : 'Escribe este texto en el recuadro de abajo.'
, src : './images/validar.aspx?genera=si'
}
,
{
tag : 'div'
, style : 'margin:0 0 0 0'
, html : ''
}
]
}
}
,
{
fieldLabel : 'Código de Validación',
name : 'checkcode',
xtype : 'textfield',
allowBlank : false,
vtype : 'alphanum',
maxLength : 10,
isFormField : true,
blankText : 'Este campo es requerido',
width : 120
}
,
{
xtype : 'checkbox',
fieldLabel : 'Acepto',
name : 'avisar',
allowBlank : false
}
]
}
]
}
]
}
]
}
);
blablar.cuentaNuevaExpress.superclass.initComponent.apply(this, arguments);
}
, onRender : function()
{
// call parent
blablar.cuentaNuevaExpress.superclass.onRender.apply(this, arguments);
}
}
);
Ext.reg('cuentaNuevaExpress', blablar.cuentaNuevaExpress);
// VENTANA PRINCIPAL
var nvacta_win = new Ext.Window(
{
title : 'Crear tu Cuenta en blablar.com',
layout : 'fit',
renderTo: document.hostess,
width : 650,
height : 300,
closable : true,
resizable : false,
plain : true,
border : true,
draggable : true,
iconCls : 'nvacta-icon'
, modal : false
, closeAction : 'hide'
, resizable : false
, shadow : true
, items : [
{
xtype : 'tabpanel'
, activeTab : 0
, defaults :
{
autoScroll : true, bodyStyle : 'padding:8px'
}
, region : 'center'
, deferredRender : false
, autoScroll : true
, items : [
{
title : 'Tus Datos'
, xtype : 'cuentaNuevaExpress'
, url : './crearNueva.aspx'
, buttons : [
{
text : 'Crear Cuenta',
// formBind : true,
// FUNCION DE BOTON PARA ENVIAR MENSAJE
handler : function()
{
var mensajero = Ext.getCmp('cuentaNuevaExpress');
mensajero.getForm().submit(
{
method : 'POST',
waitTitle : 'Por favor, espera',
waitMsg : 'Estamos creando tu cuenta...',
// FUNCION PARA ENVIO DE MENSAJE
success : function()
{
Ext.Msg.show(
{
title : '¡Bienvenido a blablar.com!'
, msg : 'Ya puedes empezar a disfrutar las ventajas de blablar.com.
En breve recibirás un correo para que actives tu cuenta.
Ya puedes enviar mensajes.'
, buttons :
{
yes : 'Aceptar'
// no : 'No, gracias'
}
, fn : function (btn)
{
switch (btn)
{
case 'yes' :
var redirect = 'default.aspx';
window.location = redirect;
break;
default :
var redirect = 'default.aspx';
window.location = redirect;
break;
}
}
, icon : Ext.MessageBox.INFO
}
);
}
,
// VALIDACIONES
failure : function(form, action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Aviso', "Ocurrio un error al crear tu cuenta:
" + obj.errors.reason);
}
else
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Aviso', "Ocurrio un error al crear tu cuenta:
" + obj.errors.reason);
}
mensajero.getForm().reset();
}
}
);
}
}
]
}
/* , {title : '¿Necesitas ayuda?'
, iconCls : 'help-icon'
, autoLoad : {
url : 'nueva-faq.html'
}
, width : 510
, height : 240
} */ ,
{
title : 'Terminos y Condiciones'
, autoLoad :
{
url : 'condiciones.html'
}
, iconCls : 'policy-icon'
, width : 510
, height : 240
}
,
{
title : 'Politica de Privacidad'
, autoLoad :
{
url : 'privacidad.html'
}
, iconCls : 'policy-icon'
, width : 510
, height : 240
}
]
}
]
}
);
var actualizar_win = new Ext.Window(
{
title : 'Actualizar tus datos',
layout : 'fit',
width : 630,
height : 300,
closable : true,
//renderTo: 'hostess',
resizable : false,
plain : true,
border : true,
draggable : true,
iconCls : 'nvacta-icon'
, modal : false
, closeAction : 'hide'
, resizable : false
, shadow : true
, items : [
{
xtype : 'actualizaCuenta'
, url : './crearNueva.aspx?avisar=off'
, buttons : [
{
text : 'Invita a tus amigos',
handler : function()
{
invitarBlablar();
}
}
,
{
text : 'Cancelar mi cuenta',
handler : function()
{
Ext.Msg.show(
{
title : 'Cancelar tu Cuenta' , msg : '¿Realmente deseas cancelar tu cuenta?
Una vez cancelada tu cuenta no podras seguir enviando mensajes.
Si deseas volver activar tu cuenta, envía un correo a: informes@blablar.com' , buttons :
{
yes : 'Si', cancel : 'No'
}
, fn : function (btn)
{
switch (btn)
{
case 'yes' :
window.location = './suspenderCuenta.aspx' ;
break;
default :
break;
}
}
, icon : Ext.MessageBox.QUESTION
}
);
}
}
,
{
text : 'Actualizar',
// formBind : true,
// FUNCION DE BOTON PARA ENVIAR MENSAJE
handler : function()
{
var actualizador = Ext.getCmp('actualizaCuenta');
actualizador.getForm().submit(
{
method : 'POST',
waitTitle : 'Por favor, espera',
waitMsg : 'Estamos actualizando tu cuenta...',
// FUNCION PARA ENVIO DE MENSAJE
success : function()
{
Ext.Msg.show(
{
title : 'Aviso'
, msg : 'Tu información personal ha sido actualizada en blablar.com.
Gracias por mantener tus datos al día.'
, buttons :
{
yes : 'Aceptar'
// no : 'No, gracias'
}
, fn : function (btn)
{
switch (btn)
{
case 'yes' :
var redirect = 'default.aspx';
window.location = redirect;
break;
default :
var redirect = 'default.aspx';
window.location = redirect;
break;
}
}
, icon : Ext.MessageBox.INFO
}
);
}
,
// VALIDACIONES
failure : function(form, action)
{
if(action.failureType == 'server')
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Aviso', "Ocurrio un error al crear tu cuenta:
" + obj.errors.reason);
}
else
{
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Aviso', "Ocurrio un error al crear tu cuenta:
" + obj.errors.reason);
}
}
}
);
}
}
]
}
]
}
);
var legal_win = new Ext.Window(
{
title : 'Terminos y condiciones de uso',
layout : 'fit',
//renderTo: 'hostess',
width : 660,
height : 440,
closable : true,
resizable : false,
plain : true,
border : true,
draggable : true,
iconCls : 'policy-icon'
, modal : false
, closeAction : 'hide'
, resizable : false
, shadow : true
, items : [
{
xtype : 'tabpanel'
, activeTab : 0
, defaults :
{
autoScroll : true, bodyStyle : 'padding:8px'
}
, region : 'center'
, deferredRender : false
, autoScroll : true
, items : [
{
title : 'Terminos y Condiciones'
, autoLoad :
{
url : 'condiciones.html'
}
, width : 510
, height : 240
}
,
{
title : 'Politica de Privacidad'
, autoLoad :
{
url : 'privacidad.html'
}
, width : 510
, height : 240
}
]
}
]
}
);