Ir para conteúdo


Foto

Fechar Tabs pelo controller

tabs tabpanel

Melhor Resposta wagner nogueira , 21 June 2015 - 21:57

sk8wagner, se entendi direito a sua dúvida seria como resgatar o seu componente central sem a utilização do "id" fixo, certo?

Se for isso há algumas formas mas a maioria delas depende muito de como elaborou a sua arquitetura, porém para um caso mais genérico você pode utilizar a classe "Ext.ComponentQuery".

Veja na API DOC o método query com ele você pode passar qualquer seletor para resgatar os elementos (note o retorno do método), desta forma poderia resgatar o seu TabPanel assim:

Ext.ComponentQuery.query('#tabprincipal')[0].removeAll();

Dê uma olhada na API DOC dessa classe, pois tem alguns exemplos bacanas de seletores.

 

Espero que lhe ajude

 

Quando eu busco o item por Ext.ComponentQuery.query('#tabprincipal')[0] ele retorna undefined mesmo colocando itemId='tabprincipal ' , quando busquei por id funcionou, vou tentar fazer conforme sugerido, se nao der eu deixo por id mesmo. Obrigado
 

Visualizar todo o conteúdo do post


  • Por favor, faça o login para responder
5 respostas neste tópico

#1 wagner nogueira

wagner nogueira

    Novato

  • Membros
  • PipPip
  • 26 posts
  • LocationIpatinga - Mg

Postado 19 June 2015 - 14:16

Olá Pessoal,
Precisando de uma ajuda:
 

Dentro do Viewport possuo um panel fixo com essa configuracao:
 

{
            xtype: 'tabpanel',
            region: 'center',
            id: 'tabprincipal', <- Adicionei um id
            itemId: 'tab',
            margin: '2 5 5 0',
            collapsed: false
 }
Através do controler eu adiciono algumas abas ao clicar nos itens de um Treepanel:
onMenuItemClick: function(view, rec) {
        if (!rec.raw || !rec.raw.panel) return;

         var id = rec.raw.panel;

        var cls = "Teste.view." + id;

        var tabs = this.getTab();
        id = id.replace(".", "");
        var tab = tabs.child('#' + id);

        if (!tab) {
            tab = tabs.add(Ext.create(cls, {
                itemId: id,
                title: rec.get('text')
            }));
        }
        tabs.setActiveTab(tab);

    }

Para solucionar o problema foi só adicionar no botão:

Ext.getCmp('tabprincipal').removeAll();

Ao clicar no botão eu gostaria de fechar todos os items abertos nessa Tab sem fecha-la, usando ItemId e não id.

 

Aguardando sugestões,
Obrigado



#2 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 19 June 2015 - 23:00

Para solucionar o problema foi só adicionar no botão:

Ext.getCmp('tabprincipal').removeAll();

Ao clicar no botão eu gostaria de fechar todos os items abertos nessa Tab sem fecha-la, usando ItemId e não id.

sk8wagner, se entendi direito a sua dúvida seria como resgatar o seu componente central sem a utilização do "id" fixo, certo?

Se for isso há algumas formas mas a maioria delas depende muito de como elaborou a sua arquitetura, porém para um caso mais genérico você pode utilizar a classe "Ext.ComponentQuery".

Veja na API DOC o método query com ele você pode passar qualquer seletor para resgatar os elementos (note o retorno do método), desta forma poderia resgatar o seu TabPanel assim:

Ext.ComponentQuery.query('#tabprincipal')[0].removeAll();

Dê uma olhada na API DOC dessa classe, pois tem alguns exemplos bacanas de seletores.

 

Espero que lhe ajude


  • wagner nogueira curtiu isso

"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#3 wagner nogueira

wagner nogueira

    Novato

  • Membros
  • PipPip
  • 26 posts
  • LocationIpatinga - Mg

Postado 21 June 2015 - 21:57   Melhor Resposta

sk8wagner, se entendi direito a sua dúvida seria como resgatar o seu componente central sem a utilização do "id" fixo, certo?

Se for isso há algumas formas mas a maioria delas depende muito de como elaborou a sua arquitetura, porém para um caso mais genérico você pode utilizar a classe "Ext.ComponentQuery".

Veja na API DOC o método query com ele você pode passar qualquer seletor para resgatar os elementos (note o retorno do método), desta forma poderia resgatar o seu TabPanel assim:

Ext.ComponentQuery.query('#tabprincipal')[0].removeAll();

Dê uma olhada na API DOC dessa classe, pois tem alguns exemplos bacanas de seletores.

 

Espero que lhe ajude

 

Quando eu busco o item por Ext.ComponentQuery.query('#tabprincipal')[0] ele retorna undefined mesmo colocando itemId='tabprincipal ' , quando busquei por id funcionou, vou tentar fazer conforme sugerido, se nao der eu deixo por id mesmo. Obrigado
 



#4 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 22 June 2015 - 13:24

sk8wagner, você fez dessa forma?

{
    xtype: 'tabpanel',
    region: 'center',
    itemId: 'tabprincipal',
    margin: '2 5 5 0',
    collapsed: false
 }

Pois a classe Ext.ComponentQuery irá resgatar todos os componentes da sua aplicação que batem com o seletor passado.

 

Teria como colocar aqui a forma que você está construindo o Viewport desde a classe até a sua utilização?

 

Pois não indico utilizar IDs fixos e da forma que lhe falei tem que funcionar.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#5 wagner nogueira

wagner nogueira

    Novato

  • Membros
  • PipPip
  • 26 posts
  • LocationIpatinga - Mg

Postado 22 June 2015 - 20:18

sk8wagner, você fez dessa forma?

{
    xtype: 'tabpanel',
    region: 'center',
    itemId: 'tabprincipal',
    margin: '2 5 5 0',
    collapsed: false
 }

Pois a classe Ext.ComponentQuery irá resgatar todos os componentes da sua aplicação que batem com o seletor passado.

 

Teria como colocar aqui a forma que você está construindo o Viewport desde a classe até a sua utilização?

 

Pois não indico utilizar IDs fixos e da forma que lhe falei tem que funcionar.

 

No viewport ficou:
 

       {
            xtype: 'tabpanel',
            region: 'center',
            itemId: 'tab',
            margin: '2 5 5 0',
            collapsed: false,
            deferredRender: false
        },

No controller do botão ficou:

Ext.ComponentQuery.query('#nav')[0].setDisabled(true);
Ext.ComponentQuery.query('#botoesbloqueios')[0].setDisabled(true);
Ext.ComponentQuery.query('#tab')[0].removeAll();

Funcionou, costumo usar o ComponentQuery em tudo, só nesse caso que não tava conseguindo, porém eu não havia utilitado o removeAll com ComponentQuery. Valeu Legolas, sempre ajudando... 



#6 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 23 June 2015 - 07:44

Funcionou, costumo usar o ComponentQuery em tudo, só nesse caso que não tava conseguindo, porém eu não havia utilitado o removeAll com ComponentQuery. Valeu Legolas, sempre ajudando... 

Ai sim sk8wanger, pois não fazia sentido funcionar com ID fixo e não com itemId. 

 

Estamos aí para ajudar mesmo meu caro.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)





0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos