Estimados amigos:

He empezado a realizar una plantilla de web, en base a la EXT JS.

Podeis acceder a la misma en:

http://www.tsabogados.com

Usuario: demo01 // (OJO: termina en cero uno)
password: demo01

Ahi podeis acceder al sistema.
El inicio con el login, se encuentra funcionando correctamente.

Ahora bien, una vez logeado, pasamos a la plantilla general que voy a utilizar en la aplicación.

He creado en base a un viewport, con 4 regiones, norte, sur, este y oeste.

Como es normal, el oeste (west) es para manejar la aplicación en base a un menu con un layout:'accordion' de tal manera que se simule inicialmente un menu tipo outlook.

Ahora bien, en mi ignorancia, no se como hacer el siguiente paso:

Que una vez que demos a un enlace en el menu, se carge en la región central el apartado de la aplicación a gestionar. Es decir, quiero escoger la opción del menu, que se muestre en la región Center y que ahí pueda mostrar interactivamente lo que se desee, y NO SE COMO MOSTRARLO EN LA REGION CENTER, o en cualquiera de otras partes de la aplicación como la región east.

Además, tengo una serie de dudas más:

Es evidente que una vez mostrase una página en la región center, esta página se supone que tiene que cargar un nuevo .js con lo que se desee mostrar, pero y esa es una de las grandes dudas por lo que supone de descarga al cargar una página nueva, ¿DEBE DE CARGARSE EN LA NUEVA PAGINA TAMBIEN TODAS LAS LIBRERIAS DEL EXT JS ? o al haberse cargado inicialmente en la plantilla MAIN.js con la que gestionamos la plantilla general de la aplicación, ¿YA NO SERIA NECESARIO?.
Es decir, ¿la nueva página a cargar podría ser un simple html que cargara sólamente el js y el css adecuados?

Realmente no se si me he explicado adecuadamente, pero si me gustaria poder consultar estos problemas iniciales que tengo, para empezar a avanzar en la aplicación.

Si alguien quiere, puede añadirme al messenger con el fin de poder comentar estos temas por msn: carlos.torres@telefonica.net.

Gracias anticipadas.

Carlos Torres
Madrid-Spain

Tal vez algo así pueda servir:

Código: Seleccionar todo

function cargarPagina(url, destino) {

   Ext.get(destino).load(
      {
         url: url,
         callback: function (destino, exito, respuesta) {

            if (!exito) {
               if (respuesta.status == 404) {
                  Ext.MessageBox.alert('Advertencia', 'No se ha podido encontrar la página solicitada en el servidor.
Póngase en contacto con el servicio técnico para resolver el problema.')
               } else {
                  Ext.MessageBox.alert('Advertencia', 'No se ha podido establecer la conexión con el servidor.
Aguarde un momento e intente nuevamente.');
               }
            }
         },
         scripts: true
      }
   );
}

y luego para llamarla:

Código: Seleccionar todo

cargarPagina(nombreDeLaPagina, nombreDeLaRegion)

si no me equivoco en tu caso nombreDeLaRegion sería igual a 'center2'.
Un comentario fuera de tu pregunta, recuerda enviar la información del usuario encriptada, por lo menos la contraseña.
Saludos.

Gracias. Voy a probarlo inmediatamente.

Me gustaria que me dijeras como encripto la contraseña desde el usuario con el EXT JS, porque cuando lo hacía con PHP usaba md5, antes de enviar el formulario, pero ahora y aunque supongo que se utiliza la misma, realmente no se como utilizarlo al usar la EXT JS, porque no se como hacerlo antes, por mi poco bagaje con el JS en general y la ext js en particular.

El código que estoy utilizando es:

Código: Seleccionar todo

Ext.SSL_SECURE_URL="extjs/resources/images/default/s.gif";
Ext.BLANK_IMAGE_URL="extjs/resources/images/default/s.gif";

Login = function(){
   var dialog,
      form,
      submitUrl = 'login/login.php';
   
   return{
      Init:function(){
         Ext.QuickTips.init();
         
         var logoPanel = new Ext.Panel({
            baseCls: 'x-plain',
            id: 'login-logo',
              region: 'center'
         });
         
         var formPanel = new Ext.form.FormPanel({
              baseCls: 'x-plain',
              baseParams: {
                 module: 'login'
              },
              defaults: {
                 width: 170
              },
              defaultType: 'textfield',
              frame: false,
              autoHeight : true,
              id: 'login-form',
              items: [{
                 xtype : 'fieldset',
               title : new Date().format('l d F Y - H:i'),
               autoHeight : true,
               autoWidth : true,     
               html : '<img src="../images/logo-small.png"/> '
            }, {
               xtype : 'fieldset',
               title : 'Introduzca sus datos',
               defaultType : 'textfield',
               autoHeight : true,
               autoWidth : true,
               items : [ {
                     fieldLabel: 'Usuario',
                     name: 'user',
                     allowBlank : false,
                     minLength : 5,
                     maxLength : 8,
                     blankText : 'Usuario es obligatorio'
                    },{
                     fieldLabel: 'Contraseña',
                     inputType: 'password',
                     name: 'pass',
                     allowBlank : false,
                     minLength : 5,
                     maxLength : 8,
                     blankText : 'Contraseña es obligatoria'
               }]
              }],
              labelWidth:200,             
              region: 'south',
              url: submitUrl,
              method : 'post'
          });

         var resultado = {
            success: function(form,action){
               window.location = 'main.php';
            },
            failure: function(form,action){
               Ext.MessageBox.alert('Torres Sacristan Abogados - Login Error:','Usuario y/o password incorrectos. Reintente de nuevo.');
               // {"success":false,"errors":[{"id":"fieldname","msg":"el valor ya existe, ingrese otro valor por favor"}]}
            }
         };
      
         dialog = new Ext.Window({
              buttons: [{
                 handler: function(){
                    if (form.isValid()){

                       form.submit({
                           waitTitle: "Comprobando accesos",
                           waitMsg : "Espere un momento por favor, autenticando usuario ......",
                        reset:true,
                           success: resultado.success,
                           failure: resultado.failure
                       });
                    } else {
                       Ext.MessageBox.alert('Torres Sacristan Abogados - Error:', '¡Atención: La información ingresada no es válida o está incompleta!');
                    }
                 },
                 scope: Login,
                  text: 'Login'
              }],
              buttonAlign: 'right',
              closable: false,
              draggable: false,
              height: 375,
              id: 'login-win',
              layout: 'border',
              plain: false,
              resizable: false,
              focus : function() {
               Ext.get('user').focus();
            },
              items: [
                 logoPanel,
                 formPanel
              ],
            title: 'Login',
            iconCls : 'icon-unlock',
              width: 500
          });
         
         form = formPanel.getForm();
         
          dialog.show();
      }
   };
}();

Ext.BasicForm.prototype.afterAction=function(action, success){
   this.activeAction = null;
   var o = action.options;
   if(o.waitMsg){
      Ext.MessageBox.updateProgress(1);
      Ext.MessageBox.hide();
   }
   if(success){
      if(o.reset){
         this.reset();
      }
      Ext.callback(o.success, o.scope, [this, action]);
      this.fireEvent('actioncompleted', this, action);
   }else{
      Ext.callback(o.failure, o.scope, [this, action]);
      this.fireEvent('actionfailed', this, action);
   }
}

Ext.onReady(Login.Init, Login, true);




Particularmente utilizo MD5, puedes bajarte el código javascript en el sitio:

http://pajhome.org.uk/crypt/md5/

Para encriptar la contraseña puedes hacer algo como:

Código: Seleccionar todo

this._formulario.on(
         'beforeaction',
         function(formulario, accion) {

            if (accion.type == 'submit') {
               formulario.findField('contrasenia').disable();
               accion.options.params = accion.options.params || {};
               Ext.apply(accion.options.params, {contrasenia: hex_md5(formulario.findField('contrasenia').getValue())});
            }
         }
      );

¿Te ayudó en algo el código para cargar contenido en una región en particular?
Saludos.

En concreto, supongo que hay que encriptarla antes de enviarlo, por tanto antes del form.submit :

.......
handler: function(){
if (form.isValid()){
// ¿se deberia encriptar aquí, supongo?
form.submit({
.......

Para encriptarla, se podría poner:
pass = md5(pass);

teniendo en cuenta que el nombre del campo del password o contraseña es PASS

Gracias de nuevo.

Carlos Torres
Madrid-Spain

Hola Wolverine4277:

En primer lugar, respecto de tu pregunta sobre si ya he probado el mostrar en una region, una pagina concreta, he de decirte que aún no he podido ponerme en ese punto, porque sigo atrancado en pasos previos, que se suponía funcionaban bien, y de pronto dejan de funcionar, sin saber cual ha sido el motivo, nada más que lo compruebe y tenga algo al respecto, te lo diré en este mismo hilo, y así quedará para general conocimiento.

Estoy con el paso previo de encriptar la contraseña, pero no me funciona.

He puesto en mi login.js el código para encriptar que me indicaste, y no se si es que tengo que personalizar alguna línea, respecto de mi código original, aunque si he personalizado realmente el nombre del campo de la contraseña tal y como muestro:

Código: Seleccionar todo

this._formulario.on(
            'beforeaction',
            function(formulario, accion) {

                if (accion.type == 'submit') {
                    formulario.findField('pass').disable();
                    accion.options.params = accion.options.params || {};
                    Ext.apply(accion.options.params, {pass: hex_md5(formulario.findField('pass').getValue())});
                }
            }
        );

El problema es que no se si tengo que cambiar algo más, (puedes ver mi login.js en este mismo hilo más arriba) y la duda es donde colocar en el referido login.js la parte del código anterior.

Saludos cordiales.

Carlos Torres
Madrid-Spain

Bueno, apenas tenga un poco de tiempo miro el código y te digo si encuentro algo.
Algo para tener en cuenta, el código que puse como ejemplo lo utilizo con Ext 1.1, no lo he probado con Ext 2.0, puede ser que haya que cambiar algo.
Incorporaste el código javascript para la encriptación ¿verdad?
Si fuera el código de la página que comentaba en uno de los mensajes anteriores sería algo así:

Código: Seleccionar todo

<script type="text/javascript" src="md5.js"></script>

Saludos.

Si tengo linkado el codigo md5.js, aunque en el ejemplo de más arriba no estaba puesto, pero en el original si está.
Realmente solo me falta saber donde pongo en concreto la porción de código que me dijiste.

Gracias

Carlos

Hola!! soy nueva en EXT pero megusto mucho ti login...podrias pasarme el codigo para ver como lo has hecho o indcarme donde puedo encontrar informacion sobre esto.

GRACIAS!!

El código lo tienes en este mismo post, pero te lo pongo de nuevo en el post que has puesto en el Ayuda 2.0

Saludos