Ir ao conteúdo
  • Cadastre-se
Carlos Fernando dos Santos

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

Recommended Posts

É 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 ...

 

 Capturar.PNG.6d963e2f7ee25734c4d9505a29e

 

Desde já agradeço a atenção :) 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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; "

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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:'usuario@servidor.com ...', 
            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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Carlos Fernando dos Santos O formulário precisa ser criado dinamicamente? precisa ser exatamente com o extJS?

Bom. Nunca mexi com o extJs, ele é só mais um framework dentre muitos. 

O método que passamos mais acima, não necessita a criação do formulário em javascript como estar tentando fazer com o extjs.

 

No caso, é mais fácil você criar em HTML o formulário, estilizar como quer, e no css esconder com display none 

 

Eaí aplicar o código postado mais acima que modifica o valor de none para block usando as funções show() e hide() do jquery

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Carlos Fernando dos Santos pode ser uma pergunta besta , mas você baixou o jquery ? e colocou no script ?

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@dif No caso teria sim que ser em extjs, pois seria para uma aplicação que usar formulário apenas com esse framework ...

@FabianoS Capturar.thumb.PNG.98378d05a9c70d9dc59f0

 

Aqui está o cabeçalho e o começo do código que eu já postei antes ... E como pode ver, sim, já está com JQuery.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×