Foro

Necesito algo de ayuda por favor

0
Hola a todos, bueno estoy iniciando en esto y tengo ya un pequeño recorrido haciendo aplicaciones web. Pero esta ves quiero adentrarme en el mundo de las aplicaciones realizadas con ExtJS pero.... haciendo un simple ejemplo.... me he quedado algo corto y lo expongo aquí a ver si me pueden tal ves dar una mano. Mi pregunta es como puedo acceder a un xtype con su id o itemId ??? alguien me puede echar una manito con esto? Lo que pasa es que quiero hacer una pequeña prueba y es que cuando presiono un botón, pueda volver visible un spacer que por defecto está hidden:true ¿me comprenden? el spacer tiene por id crgAjax Espero que me puedan ayudar Salu2 y de ante mano muchas gracias por la ayuda que me puedan prestar index.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Devasoft</title>
    <link rel="stylesheet" type="text/css" href="js/ext-3.3.0/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="js/ext-3.3.0/resources/css/xtheme-blue.css" />
    <script type="text/javascript" src="js/ext-3.3.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-3.3.0/ext-all.js"></script>
    <script type="text/javascript" src="js/ext-3.3.0/locale/ext-lang-es.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript">
      Ext.onReady(devasoft.login.init,devasoft.login,function(){Ext.QuickTips.init()});
    </script>
  </head>
  <body>
  </body>
</html>
main.js 
Ext.namespace('devasoft');
Ext.BLANK_IMAGE_URL = 'js/ext-3.3.0/resources/images/default/s.gif';
devasoft.login = {
  init: function(){
    this.form = new Ext.FormPanel({
      xtype: 'form',
      border: false,
      padding: 5,
      method: 'POST',
      url: 'login.php',
      region: 'center',
      itemId: 'itmformIdentificacion',
      labelWidth: 60,
      unstyled: true,
      standardSubmit: true,
      id: 'formIdentificacion',
      items: [
      {
        xtype: 'textfield',
        fieldLabel: 'Usuario',
        anchor: '100%',
        name: 'usu',
        itemId: 'itmUsu',
        id: 'usu'
      },
      {
        xtype: 'textfield',
        fieldLabel: 'Password',
        anchor: '100%',
        inputType: 'password',
        name: 'pass',
        itemId: 'itmPass',
        id: 'pass'
      },
      {
        xtype: 'container',
        layout: 'hbox',
        activeItem: 0,
        id: 'cnt1',
        layoutConfig: {
          align: 'middle'
        },
        items: [
        {
          xtype: 'spacer',
          flex: 1,
          id: 'esp1'
        },
        {
          xtype: 'spacer',
          html: '<img src="http://static.ak.fbcdn.net/rsrc.php/zb/r/GsNJNwuI-UM.gif" width="16" height="11" />',
          width: 16,
          height: 11,
          hidden: true,
          id: 'crgAjax'
        },
        {
          xtype: 'spacer',
          width: 5,
          id: 'esp3'
        },
        {
          xtype: 'button',
          text: 'Entrar',
          width: 50,
          type: 'button',
          itemId: 'itmbtnEntrar',
          id: 'btnEntrar',
          handler: this.enviarFormulario,
          scope: this
        }]
      }]
    });
    this.win = new Ext.Window({
      xtype: 'window',
      title: 'Davasoft :: Identificación de Usuario',
      width: 250,
      height: 114,
      closable: false,
      resizable: false,
      draggable: false,
      layout: 'border',
      items: [this.form]
    });
    this.win.show();
  },
  enviarFormulario: function() {
    crgAjax.hidden = false;
  }
}

6 Respuestas

Mejores votos Por fecha Solución
0
existen varias formas de acceder a los componentes o elementos de la pagina, por ejemplo si es un elemento html digamos un div puedes acceder a el de la sgte manera: 
Ext.get('mi_id');
y aplicarle directamente una propiedad, por ejemplo: Ext.get('mi_id').hide(); o asignarlo a una variable y aplicarle luego la propiedad: 
var myId = Ext.get('mi_id');
myId.hide();
si es un componente de ExtJs puedes hacerlo asi: 
var myCompo = Ext.getCmp('mi_id');
tengo entendido que si no vas a hacer uso despues de ese componente es mejor usar: 
Ext.fly('mi_id');
pero no trabajado en ello, actualmente prefiero usar el ref: defino mi boton con la propiedad ref:'mi_boton' y luego cuando quiero aplicar algo: 
this.mi_boton.hide();
por ejemplo. En este sitio hay muy bueno tutoriales y videos. te recomiendo que los leas, yo lo hago cada cierto tiempo y cada vez aprendo algo nuevo. espero te haya sido de utilidad. suerte
0
Hola que tal, muchas gracias por responder precisamente anoche mirando las api y probando para que servían y todo el cuento, encontré varias cositas de las cuales me pude ayudar. Y siguiendo el ejemplo del .js que puse en el post inicial, hice la siguiente solución poco ortodoxa creo pero funciona si tal ves me puedas ayudar a pulir el ejemplo.... muchas gracias <!-- s:) --><!-- s:) --> 
}(...));
    this.win.show();
    Ext.getCmp('crgAjax').hide();
    document.getElementById('esp1').innerHTML = '';
  },
  enviarFormulario: function() {
    var e = Ext.getCmp('crgAjax');
    var i = Ext.getCmp('usu');
    if (e.hidden == true) {
      e.setVisible(true);
      i.disable();
      document.getElementById('esp1').innerHTML = 'HOLA MUNDO';
    }
    else {
      e.hide();
      i.enable();
      document.getElementById('esp1').innerHTML = '';
    }
  Ext.getCmp('formIdentificacion').getForm().submit();
  }
}
Lo que pasa es que vengo acostumbrado de hacer las cosas en jQuery y..... no se necesita tanto código ni tanta lectura para hacer algo tan pequeño, pero lamentablemente jQuery no tiene lo que ExtJS tiene y es la parte bonita. Pero bueno eso es harina de otro costal <!-- s;) --><!-- s;) --> a proposito en el codigo del spacer esp1 quedó así 
{
  xtype: 'spacer',
  flex: 1,
  id: 'esp1',
  html: 'HOLA MUNDO'
}
Salu2 cualquier otra inquietud, estaré informando pero si, primero miraré los tutoriales del sitio que están excelentes <!-- s;) --><!-- s;) -->
0
tambien tengo entendido que puedes usar jquery en conjunto con extjs a través de los adapter
0
Si por ahí vi algo de eso..... pero...... no me quedó claro, pongo el adaptador del jQuery.... y...... entonces eso como modifica mi código o como será la situación ¿tienes por casualidad algún ejemplo de comparación por casualidad? Salu2 voy a buscar que encuentro con referente a eso y lo pongo por aquí <!-- s;) --><!-- s;) -->
0
en esta misma pagina [url]http://www.quizzpot.com/2009/02/que-son-los-adapters-y-en-que-me-beneficia/[/url]
0
ahhh tu eres Crysfel? el de los tutoriales? EDITO: ahhh no es que leí mal jajajajajajaj creí haber leído que esa era tu página jajajajajaj <!-- s;) --><!-- s;) --> EDITO: listo ya vi el video y leí el documento, está muy bueno por utilizar las dos librerías pero yo decía que sería mucho mejor aun poder escribir ExtJS estilo jQuery por ejemplo 
this.win = new Ext.Window({
      xtype: 'window',
      title: 'Davasoft :: Identificación de Usuario',
      id: 'principal',
      width: 250,
      height: 115,
      closable: false,
      resizable: false,
      draggable: false,
      layout: 'border',
      items: [this.form]
    });
$('#win').Window(function(){
      xtype: 'window',
      title: 'Davasoft :: Identificación de Usuario',
      id: 'principal',
      width: 250,
      height: 115,
      closable: false,
      resizable: false,
      draggable: false,
      layout: 'border',
      items: [this.form]
});
Pero de todas maneras está muy chebre poder utilizar las dos libreras al mismo tiempo lo que no haces con uno, lo haces con el otro <!-- s:) --><!-- s:) --> Salu2 y gracias por el link, estaré de nuevo por estos foros con mis dudas porque estoy estudiando ExtJS con todo el material que Crysfel ha puesto a disposición y con las API que hay en la documentación <!-- s:) --><!-- s:) -->

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Ext JS 3