Ver Mensaje Individual
  #15 (permalink)  
Antiguo 04/03/2009, 13:29
Avatar de SPAWN3000
SPAWN3000
 
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 8 meses
Puntos: 15
Respuesta: Object.extend() mas corto

Concreto:

Mi problema es que hago esto:

var ClaseA = {
Create:function(url,Parm){
this.Parm = {
move: '10',
Default:'Convert',
Error: 'Ferror',
waitinterval:10
};
this.url = url || "";
this.Parm = Object.extend(this.Parm,Parm);
}
}

var obj = new ClaseA.Create('localhost',{move:'20',Default:'NN'} );

Si, este era uno de mis problemas y ya funciona como debería:
this.Parm = Object.extend(this.Parm,Parm);

2. Al efectuar la primera petición Ajax mediante obj todo funciona bien, la segunda vez lo que tenia move se me reinicia a 10 y debería permaneces en 20, (Por que? ). Y pensé que la solución podría estar extendiendo estas características a un nuevo objeto(Como una clonación- Por cierto, existe clonar para una etiqueta y es netamente compatible?)

Ahora, que si crean nuevas funciones javascript...puedan heredar lo que necesiten de la librería como métodos de crear ventanas, o validar campos...etc.

Mi archivo audAJX.js
La verdad, te paso algunas del AJAX:
Código:
var XMLHttpObject = [
    function () {return new XMLHttpRequest()}, //Other
    function () {return new ActiveXObject("Msxml2.XMLHTTP")}, //IE
    function () {return new ActiveXObject("Msxml3.XMLHTTP")}, //IE
    function () {return new ActiveXObject("Microsoft.XMLHTTP")} //IE
];
var auAJX = {
	Create:function(url,Parm){//Definicion y configuración
		url: '',
		this.Parm = {
			method: 'POST',
			contentType:'application/x-www-form-urlencoded',
			onComplete: HttpResp,
			onSuccess: stateChange,
			Paramt: '',
			waitinterval:10,
			asynchronous: true
		};
		this.url = url || "";
		this.Parm = Object.extend(this.Parm,Parm);//Lo que tu agregaste

		IE='\v'=='v'; //is IE
		IEx=document.all?1:0; //is IE confirm
		if(EstadoAjax!=1){    //Si esta disponible el servicio
		try{
			//...valida si existen las funciones definidas
		}catch(exp){
			alert('Error en la definición de parametros');
		}
Invoca la petición al servidor...
Código:
//=================Initial:Server
		try{
			var xxmlhttp = false;
			for (var i=0;i<XMLHttpObject.length;i++) {
			try { xxmlhttp = XMLHttpObject[i](); }
			catch (e) { continue; }
			break;
			}
			if(this.xParm.method.toLowerCase()!='get'){var SndParm = this.xParm.Paramt;
			}else{var SndParm=null; url = url+'?'+this.xParm.Paramt;}
			//los procedimientos xmlhttp
			ConnAJX.setRequestHeader('Content-Type',this.xParm.contentType); //Envio una cabecera
			ConnAJX.send(SndParm); //falta escapar los caracteres
			tiempo=setTimeout('ErrorConn()',this.xParm.waitinterval*1000);
		}catch(err){
			alert('MSG/Error de petición:'+err);
			ResetOptions();

//============otras funciones...
function xVisible(idTag) {
	var DTag = document.getElementById(idTag);
	DTag.style.display=(DTag.style.display!='none')?'none':'';
}
String.prototype.replace = function(s1,s2){
	return this.split(s1).join(s2);
};

function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}
function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}

function ExtVlr(idobj){
    var Cobj = document.getElementById(idobj);
    var Mytag = Cobj.tagName.toLowerCase();
    valor = (Mytag=='select')? Cobj.options[Cobj.selectedIndex].value:Cobj.name;
    return valor;
}
y he temido que crear otros para cada componente:
Grid.js
DatePicker.js
CheckBox.js
Listbuttons.js
Window.js
MsgBox.js
...
scwLanguages.js
Formatos.js

y un CSS con los componentes generales
Código:
root { 
    display: block;
}
.ContTbl{
overflow:auto;
width:100%;
/*height:100%!important;*/
min-height:60px;
max-height:120px;
background-color:#fff;
border:1px solid #B5B8C8;
margin:2px;
}
/*Creo el estilo de la tabla*/
.Grid{
    text-align:center;
    width:100%;
    background-color:#fff;
    border:1px solid #ccc;
}
.Grid thead{
    border-left:1px solid #fff;
    width:100%;
}
.Grid tbody {
    width:100%;
    height:135px;
    overflow-y:scroll;
    overflow-x:hidden;
}
.tfooter {
    color:#1C3D7C;
    border-top:1px solid #99bbe8;
    border-bottom:1px solid #99bbe8;
    background: transparent url(images/grid/bg.gif) repeat-x 0 0;
    margin: 0 auto;
    padding:10px 0px 0px 0px; /*top top a h*/
    font:bold Georgia, 'Times New Roman', Times, serif;
    font-weight:bold;
    height:16px;
}
.Grid th{
    background: transparent url(images/grid/grid3-hrow.gif) repeat-x;
    
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    
    height:25px;
    #height:18px;
    font-weight:bold;
}
.Grid tr{
    height:15px;    
}
.Grid tr:hover {
        background: transparent url(images/grid/row-over.gif) repeat-x;
}
.Grid td{
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    height:15px;
    border-top:1px solid #eee;
    background-color:#fff;
}
/*
tr td:hover {
background:#F3F2ED;
}
tr:hover td {
background:#F8F8F8;
}*/
/*Fin del estilo tabla*/
#def_form input{
    height:18px;
    font-size: 12px;
    font:bold Georgia, 'Times New Roman', Times, serif;
    border:1px solid #6787b8;
    padding:0;
}
textarea{
    font-size: 12px;
    font:bold Georgia, 'Times New Roman', Times, serif;
    border:1px solid #6787b8;
    padding:0;
}
select{
        font-size: 12px;
        font:bold Georgia, 'Times New Roman', Times, serif;
        border:1px solid #B5B8C8;
        padding:0;
        margin:3px;
        width:200px;
        /*background: transparent url(images/text-bg.gif) repeat-x 0 0;*/
        background: #fff url(images/text-bg.gif) repeat-x 0 0;
}
/*Date picker select*/
#scw select{
    padding:0;
    width:60px;
    border:1px solid #B5B8C8;
}
/*Date picker Input submit*/
#scw input{
    padding:0;
    width:20px;
    border:1px solid #1C3E7D;
    background: #1C3E7D;
    color:#fff;
}
.scwHead #scwHeadLeft{
    background: url(images/Date/left-btn.gif) no-repeat;
    cursor: pointer;
}
.scwHead #scwHeadRight{
    background: url(images/Date/right-btn.gif) no-repeat;
    cursor: pointer;
}
/*Date picker Input table*/
#scw table,tbody,th{
    padding:0;
    /*border-left:1px solid #fff;*/
    background:url(images/window/hd-bg.gif) repeat-x 0 0 #1C3D7A;
}
#scw table,td{
    background:#1C3D7A;
}
#scw thead,th{
    color:#000;
    background: #fff;
}
#scw iframe{
    border:1px solid #fff;
}
/*Fin date picker*/
label:hover{
    border-bottom:1px solid #6787b8;
    border-top:1px solid #6787b8;
    background: #BCD2EF;
    padding-top:3px;
}
option:hover {
color : #333;
}
select:hover{
    border:1px solid #87A1C5;
}
select:focus{
    border:1px solid #1C3D7C;
}
/*Aplicar a todos los input text*/
textarea{
    border:1px solid #B5B8C8;
    margin-right:5px;
}
textarea:hover{
        border:1px solid #87A1C5;
}
textarea:focus{
        border:1px solid #1C3D7C;
}
input{
    margin-left:4px;
}
input[type='submit'] {
        margin-left:3px;
}
input[type='text'] {
        border:1px solid #B5B8C8;
        height:18px;
        background: transparent url(images/text-bg.gif) repeat-x 0 0;
        margin-top:2px;
}
input[disabled="disabled"] {
    background: #eee;
}
input[type='text']:hover {
        border:1px solid #87A1C5;
}
input[type='text']:focus {
        border:1px solid #1C3D7C;
}
input[type='checkbox'] {
        margin-left:5px;
        height:15px;
}
input[type='checkbox']:focus {
        border:1px solid #1C3D7C;
}
input[type='radio'] {
    height:15px;
    margin-top:3px;
    margin-bottom:3px;
}
select[size='8'] {
        width:100%;
}
.ColTbl{
        background-color:#eee;
        border-right:2px solid #fff;
        border-bottom:1px solid #fff;
}
.Boton2{
    margin-left:65%;
    width:100px;
    height:25px;
    cursor:pointer;
}
#scwIE{
    width:200px;
    top:0px;
    left:0px;
}
#Date1{
    width:250px;
    top:0px;
    margin-left:52px;
}
#preload{
    background:transparent url(images/Precarga_4.gif) no-repeat;
    width:20px;
    height:20px;
    margin-left:10px;
    margin-top:8px;
}
Barra.css
me crea una barra fija en la parte superior. Para opciones extra)
Código:
body { margin:0; padding:0; background-image:none; }
* html body { overflow:auto; }

#Fija { position:absolute; width:100%; z-index:2;
height:35px;
background:url(images/window/hd-bg.gif) repeat-x 0 0 #1C3D7A;
}
html>body #Fija { position:fixed; }

#Todo { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
html>body #Todo { position:static; top:auto; left:auto; width:auto; height:auto; overflow:visible; }

#Todo p { margin:1em 1em 1em 120px; }
#Fija p { margin:0; padding:0; text-align:right; font-size:0.55em; }

.Volver { border-top:dotted #88A 3px; padding:0.5em 0; }
Reset.css
Código:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,
cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,center,u,b,i{
margin:0;padding:0;border:0;outline:0;
font-weight:normal;font-style:normal;
font-size:100%;font-family:inherit;
vertical-align:baseline
}

body{line-height:1}
:focus {outline:0}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
blockquote:before,blockquote:after,q:before,q:after{content: ""}
blockquote,q{quotes: "" ""}
input,textarea{margin:0;padding:0}
hr{margin:0;padding:0;border:0;color:#000;background-color:#000;height:1px}

Última edición por SPAWN3000; 04/03/2009 a las 13:51