Ayuda para un principiante en extjs

udg2001

Saludos ......
Empeze a trabajar con extjs y me parece un framework interesante, pero todavia me mareo en algunas cosas espero que me puedan ayudar.
Debo poner una de texto en estado de "enable false" cuando presiono un boton.
El name de la caja de texto es "referencia_CotizacionAgregar".
Si en donde esta el codigo de cuando se presiono un boton "pongo referencia_CotizacionAgregar.disable()" me presenta un mensaje de error, sin embargo veo que hay un codigo que hace referencia a esa caja de texto para asignarle un valor ej:
var ref = formulario_CotizacionNuevo.form.findField('referencia_CotizacionAgregar').getValue();
Supongo que debe ser algo asi para ponerla en enable false. Por favor si me pueden guiar para poner esa caja de texto en enable false ....

Gracias ......

tokkaido

Hola, puedes hacer lo que quieres de varias formas, te explicaré 2 pero tengo preferencia por hacerlas con el segundo metodo que te explicaré porque me facilita mucho las cosas:

Con el primer método parece menos código pero proceduralmente hablando es poco eficiente y enreda un poco al querer tener acceso a los componentes. En el segundo método separas la interface de los eventos de los componentes y te permite un control muy bueno de estos últimos, te recomiendo que te bajes la versión de prueba del Ext.Designer y trastees un poco ella y aprendas a generar tus archivos según ese modelo, te aseguro que te ahorrará muchos dolores de cabeza

mis consejos son:

* revisa si te sobra o te falta una coma, no todos los navegadores son permisivos con estos errores, por ejemplo IE no te perdona una coma faltante asi que trabaja con algun IDE que revise por ti ese tema, yo uso la version gratuita de Komodo

* recuerda que es case sensitive por lo que Texto es distinto de texto

* recuerda que las llamadas ajax, como cargar stores y combos son ASINCRONICAS, por lo que es probable que te parezca que un valor esta cargado pero es mejor asegurarse de que es así usando algunos listeners y console para checar que los valores que crees que están lo estan cuando los necesitas

* La API es tu amiga, realmente (^_^)

1er metodo:

metodo1.html:


<html>
<head>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
    <script type="text/javascript" src="../extjs/src/locale/ext-lang-es.js"></script>
</head>
<body>
  <script type="text/javascript">
    Ext.onReady(function() {
      var myform = new Ext.FormPanel({
        layout: 'form',
        padding: '10px',
        items: [
          {
            xtype: 'textfield',
            name : 'texto',
            fieldLabel : 'Texto',
            id: 'txt_target',
          }  
        ]
      });
      
       var myboton = new Ext.Button({
        text: 'Presioname!',
        listeners :{
          click: function(){
            var txt = Ext.getCmp('txt_target');
            txt.setDisabled(true);
            // o Ext.getCmp('txt_target').setDisabled(true); deberia funcionar igual
          }
        }
      });
       
       var mytoggleboton  = new Ext.Button({
        text: 'Deshabilitar',
        enableToggle: true,
        listeners :{
          toggle: function(btn, value){
            var txt = Ext.getCmp('txt_target');
            txt.setDisabled(value);
            switch(value){
              case true :
                btn.setText('Habilitar');
                break;
              case false :
                btn.setText('Deshabilitar');
                break;
            }
          }
        }
      });
      
      var mywin = new Ext.Window({
        title: 'Test Window',
        layout: 'fit',
        width: 300,
        height: 120,
        items: [
          myform
        ],
        bbar: [
          myboton,
          {xtype: 'tbfill'},
          mytoggleboton
        ]
      });
      
      mywin.show();
    });
    </script>
</body>
</html>

2do método:

MyWindow.ui.js


MyWindowUi = Ext.extend(Ext.Window, {
  title: 'Test Window',
  width: 300,
  height: 120,
  layout: 'fit',
  initComponent: function() {
    this.items = [
      {
        xtype: 'form',
        padding: '10px',
        items: [
          {
            xtype: 'textfield',
            fieldLabel: 'Texto',
            name: 'texto',
            ref: '../txt_target'
          }
        ]
      }
    ];
    this.bbar = {
      xtype: 'toolbar',
      items: [
        {
          xtype: 'button',
          text: 'Presioname!',
          ref: '../btn_push'
        },
        {
          xtype: 'tbfill'
        },
        {
          xtype: 'button',
          text: 'Deshabilitar',
          enableToggle: true,
          ref: '../btn_disabled'
        }
      ]
    };
    MyWindowUi.superclass.initComponent.call(this);
  }
});

MyWindow.js


MyWindow = Ext.extend(MyWindowUi, {
  initComponent: function() {
    MyWindow.superclass.initComponent.call(this);
    this.btn_push.on('click', this.presioname, this);
    this.btn_disabled.on('toggle', this.deshabilitar, this);
  },
  presioname: function(){
    this.txt_target.setDisabled(true);
  },
  deshabilitar: function(btn, value){
    this.txt_target.setDisabled(value);
     switch(value){
        case true :
          btn.setText('Habilitar');
          break;
        case false :
          btn.setText('Deshabilitar');
          break;
      }
  }
});

metodo2.html:


<html>
<head>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
    <script type="text/javascript" src="../extjs/src/locale/ext-lang-es.js"></script>
    <script type="text/javascript" src="MyWindow.ui.js"></script>
    <script type="text/javascript" src="MyWindow.js"></script>

</head>
<body>
  <script type="text/javascript">
   Ext.onReady(function() {
        var cmp1 = new MyWindow({
            renderTo: Ext.getBody()
        });
        cmp1.show();
    });
    </script>
</body>
</html>

udg2001

Ok muchas gracias probare la solucion y te aviso como me fue thanks ...

Howdy, Stranger!

Categories

In this Discussion

Poll

Tagged

Copyright & Usage

Advertise here

Bookmark us