Como abrir um form extjs a partir do click de um botão?

Carlos Fernando dos Santos · 7 de março de 2016

É simples assim como estou dizendo. Tenho um Janela e dentro dessa janela tenho um form, só que este form já começa aparecendo e eu gostaria de abrir ele a partir do botão "novo" e fecha-lo clicando em "cancelar". Vou colocar a imagem para ilustrar melhor ...

Desde já agradeço a atenção

FabianoS · 7 de março de 2016

Eu usuario jquery que e mais fácil.

 $(function(){
//Abrir
  $('.botao').click(function(){

    $('.form').fadeIn();
  });
//Fechar

  $('.botaoCancelar').click(function(){

    $('.form').fadeOut();
  });


 });

mas antes disso e só setar no CSS.

no elemento pai um " display:none; "

DiF · 7 de março de 2016

@FabianoS Sua dica é bem válida, porém hj esse jeito tá um pouco defasado. Como o jQuery ta na versão 2.2.1 tem um recurso que é melhor chamado on().

ficando desta maneira:

$(document).ready(function(){
     var botaoNovo = $('.botaoNOvo');
     var botaoCancelar = $('.botaoCancelar');
     var formulario = $('.formulario'); 
    
     botaoNovo.on('click', function()
           formulario.show();         
     )};
                  
     botaoCancelar.on('click', function(){
          formulario.hide(); 
     });            

});

Outra coisa, evitar de abreviar a chamada do dom. com o cifrão, porque isso evita conflitos.

a função on() permite que a função funcione para elementos criados antes e depois do DOM.

Principalmente se usar ajax!

Carlos Fernando dos Santos · 8 de março de 2016

Obrigado ai galera, mas eu tentei das duas formas e não foi
Será que não tem uma forma de fazer a função em extjs???

Slá to meio perdido kk ... vou colocar o meu código aqui pra caso vocês querem dar uma olhada. Vai que fiz algo errado ne.

<script type="text/javascript">
/*    
    $(document).ready(function(){
             var botaoNovo = $('.btnNovo');
             var botaoCancelar = $('.btnCancelar');
             var formulario = $('.form');
            
             botaoNovo.on('click', function(){
                   formulario.show();         
             });
                          
             botaoCancelar.on('click', function(){
                  formulario.hide(); 
             });            
    });

        $(document).ready(function(){
             $('.btnNovo').click(function(){
                 $('.form').fadeIn();
             });
             $('.btnCancelar').click(function(){
                 $('.form').fadeOut();
             });          
        });
*/
    Ext.onReady(function() {
                
        var Nome = new Ext.form.TextField({ 
            fieldLabel:'Nome', 
            name:'txt-name',
            width:380, 
            emptyText:'Informe seu nome completo ...', 
            id:"id-name" 
        });
        var NomeMae = new Ext.form.TextField({ 
            fieldLabel:'Nome da Mãe', 
            name:'txt-name',
            width:380, 
            emptyText:'Nome da mãe ...', 
            id:"id-nameMae" 
        });
        var Cpf = new Ext.form.TextField({ 
            fieldLabel:'CPF', 
            name:'txt-cpf', 
            emptyText:'000.000.000-00 ', 
            id:"id-cpf" 
        });
        var Email = new Ext.form.TextField({ 
            fieldLabel:'Email', 
            name:'txt-email',
            vtype: "email",
            width:380, 
            emptyText:'[email protected] ...', 
            id:"id-email" 
        });
        var radios = new Ext.form.RadioGroup({ 
            fieldLabel: 'Sexo',                        
             columns: 2, 
             items: [ 
                  {boxLabel: 'Masculino', name: 'framework', inputValue: 'Masculino'}, 
                  {boxLabel: 'Feminino', name: 'framework', inputValue: 'Feminino'},                    
             ] 
        });
        
        this.form = new Ext.FormPanel({
            id: 'form',
            title:'Novo Cadastro', 
            renderTo: Ext.getBody(), 
            defaults:{xtype:'textfield'},
            width:420, 
            height:360,    
            bodyStyle:'padding: 10px',
                 
            items:[ 
                Nome, 
                NomeMae,                
                Email,
                Cpf,
                { 
                    xtype: 'datefield', 
                    fieldLabel: 'Data de Nascimento',
                    name: 'dt-nascimento',
                    emptyText:'dd/mm/aaaa ...', 
                    id: 'id-nascimento'
                },
                radios
                    ],
                    buttons: [{    text: 'Salvar', id: 'btnSalvar' },{ text: 'Cancelar', id: 'btnCancelar' /*
                                                     handler: function() {
                                                                this.up('form').getForm().reset();
                                                    }*/
                    }]
                });    
        var Janela = new Ext.Window({ 
            title: 'Cadastro', 
            width:520, 
            height:600,
            bodyStyle:'background-color:#fff;padding: 40px', 
            items:this.form, 
            buttonAlign: 'left', 
            buttons:[{text:'Novo', id: 'btnNovo'}] 
        });
        Janela.show();
});
</script>