Ir para conteúdo


Foto

Probleminha com BorderLayout ao fechar e tentar reabrir uma tab...


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

#1 Mark Wells

Mark Wells

    Novato

  • Membros
  • PipPip
  • 19 posts

Postado 04 October 2007 - 19:53

Na minha aplicação eu tenho 3 aplicações, norte que é uma toolbar, sul que é usada para alertas e dicas aos usuários e a centro que é onde eu pretendo carregar dinamicamente de acordo com a seleção efetuada no menu.

Na inicialização da minha aplicação a região central fica "vazia", ou seja, recebe apenas um ContentPanel, mas não carrego nada, apenas uma imagem de fundo configurada pelo CSS.

Abaixo eu mostro como estou "lidando" com o BorderLayout. O Layout principal é definido como abaixo, este código se encontra na sessão INIT

mainLayout = new Ext.BorderLayout('container',{
	north:{initialSize:49, split:false, titlebar:true, title:'<b>.:: Sistema WebSiaux ::.</b>', margins:{top:0,bottom:2,right:0,left:0}},
	south:{animate:true, autoScroll:true, collapsible:true, initialSize:80, split:false, title:'<b>.:: Dicas de Uso ::.</b>', titlebar:true},
	center:{autoScroll:true, titlebar:true}
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('toolbar',{toolbar:appToolbar}));
mainLayout.add('south', new Ext.ContentPanel('statusBar',{autoScroll:true, closable:false, fitToFrame:true}));
mainLayout.add('center', new Ext.ContentPanel('content',{autoScroll:true, closable:true, fitToFrame:true}));
mainLayout.endUpdate();

Supondo que eu clique um item do menu como esplicado acima. Bem simples não?
	new Ext.menu.Item({
		text:'<b>Ve&iacute;culo Oficial</b>',
		id:'tb_cmdTabVeiOfi',
		icon:'images/list-items.gif',
		handler: this.showTabVeiOfi
	})

Eu espero que apareça uma nova Tab chamada Veiculos Oficiais e dentro dessa Tab eu espero um grid que mostra alguns dados carregados a partir de um banco de dados. A tab aparece, assim como o grid é renderizado bunitinho, mas se eu fecho esta tab e tento abri-la novamente ocorre um erro, o qual mostro nas imagens do firebug abaixo.

showTabVeiOfi: function(){
...
...
var ds ...;
var cm ...;
var grid = new Ext.grid.Grid('veiOfiGridEditor', {...});//veiOfiGridEditor is the target div where the grid will be rendered althought I'm not using a GridEditor

//ADDING THE PANEL IN THE CENTER REGION
	mainLayout.beginUpdate();
	mainLayout.add('center', new Ext.ContentPanel('veiOfiCad',{title:'<b>Ve&iacute;culo Oficial</b>', autoScroll:true, closable:true, fitToFrame:true}));
	mainLayout.endUpdate();

//ADDING THE "NESTED" PANEL WITHIN THE CENTER REGION
	var innerLayout = Ext.BorderLayout.create({
		center: {
			margins:{left:3,top:3,right:3,bottom:3},
			panels: [new Ext.GridPanel(veiOfiGrid)]
		}
	}, 'veiOfiGrid');
	veiOfiGrid.render();

//more configurations for the grid
...
...
};
FIREBUG IMAGE 1:
Imagem Postada

FIREBUG IMAGE 2:
Imagem Postada

E finalmente, abaixo está o código HTML desta página
<body>
<div id="container">
	<div id="toolbar" class="x-layout-inactive-content"></div>
	<div id="content" class="x-layout-inactive-content">
		<div id="veiOfiCad" class="x-layout-inactive-content">
			<div id="veiOfiGrid"></div>
			<div id="veiOfiGridEditor"></div>
		</div>
	</div>
	<div id="statusBar" class="x-layout-inactive-content"></div>
</div>
</body>

Alguma sugestão para evitar este problema??

Abraços a todos

#2 EthraZa

EthraZa

    Member Avançado

  • Expert User
  • 542 posts
  • LocationSão Paulo

Postado 05 October 2007 - 00:09

Eu não sei como vc está matando sua Tab, mas eu tive muita dor de cabeça com isso e vou te contar meu caso pra ver se ajuda...

Criava a TAB dinamicamente e as divs dentro dela também.
Criava o Grid nessas divs.
Fechava a TAB na X dela (que é euivalente a um destroy(true)).
Se abria de novo podia dar problema, pq a tab foi destruida, as divs com o grid foram destruidas, mas o componente em si não foi e ele estava na memória apontando pra umas divs que não existiam mais e ainda tinha o mesmo nome do grid novo que se abriria.
A solução foi pegar o evento beforeClose da Tab e dar um destroy no grid antes de fechar a Tab, destroy esse que só é possível com uma referência ao Grid de quando foi criado pois não é possível fazer um Ext.getCmp ou coisa parecida quando se trata de Grids.

Será que seu problema não seria algo semelhante?
Mandriva Linux in LAMPE (Linux/Apache/MySql/Php/Ext)

#3 Mark Wells

Mark Wells

    Novato

  • Membros
  • PipPip
  • 19 posts

Postado 05 October 2007 - 10:34

Eu não sei como vc está matando sua Tab, mas eu tive muita dor de cabeça com isso e vou te contar meu caso pra ver se ajuda...

Criava a TAB dinamicamente e as divs dentro dela também.
Criava o Grid nessas divs.
Fechava a TAB na X dela (que é euivalente a um destroy(true)).
Se abria de novo podia dar problema, pq a tab foi destruida, as divs com o grid foram destruidas, mas o componente em si não foi e ele estava na memória apontando pra umas divs que não existiam mais e ainda tinha o mesmo nome do grid novo que se abriria.
A solução foi pegar o evento beforeClose da Tab e dar um destroy no grid antes de fechar a Tab, destroy esse que só é possível com uma referência ao Grid de quando foi criado pois não é possível fazer um Ext.getCmp ou coisa parecida quando se trata de Grids.

Será que seu problema não seria algo semelhante?


Parece ser exatamente esse o caso, inclusive li aquele post em que você citava o problema que você teve na forma da declaração das variáveis entre versões 1.1 e 1.1.1. Naquela época eu entrei na sua aplicação e vi que este aplicativo tem uma aparência bastante próxima do que eu desejo para o meu.

Tentei até entrar novamente no sistema para ver qual foi a sua solução para este layout mas o usuário já não era mais válido  ;D.

Na minha aplicação eu prentendia criar todas as divs necessárias no arquivo HTML, não dinamicamente, conforme abaixo

<div id="content" class="x-layout-inactive-content">
<div id="veiOfiCad" class="x-layout-inactive-content"> <!-- tela veiculos oficiais -->
<div id="veiOfiGrid"></div>
<div id="veiOfiGridEditor"></div>
</div>
<div id="destino" class="x-layout-inactive-content"> <!-- tela destino -->
<div id="destinoGrid"></div>
<div id="destinoGridEditor"></div>
</div>
<div> ... </div> <!-- outra tela -->
<div> ... </div> <!-- + outra tela -->
</div>

e por aí vai, uma para cada item "tela" da minha aplicação... Mas realmente ao fechar a tab tudo vai para o espaço, inclusive as divs....

Você poderia colocar trechos do código onde você aplicou esta solução para servir de guia para mim?

Obrigado pela atenção
Mark Wells



#4 EthraZa

EthraZa

    Member Avançado

  • Expert User
  • 542 posts
  • LocationSão Paulo

Postado 06 October 2007 - 18:52

Como vc notou, as divs são removidas do DOM quando a TAB é fechada, por isso acho que elas tem que ser criadas dinamicamente mesmo.
Tudo que eu crio no meu sistema é atravez de functions que eu crio pra fazer as coisas do Ext de maneira padronizada... mas vou tentar explicar o melhor possível.
Vou postar o código que fiz pra dar o destroy nos grid ao fechar as tabs que foi onde eu tive que quebrar a cabeça pra descobrir como fazer.
Eu tenho uma classe (ATW), onde crio todas essas funções e variáveis, assim sempre da pra executar uma função la de dentro e ter acesso as variaveis do jeito que elas foram deixadas...

Esse é o evento que vai ser executado quando for clicado o X (Fechar) de uma Tab. layout é a referencia ao BorderLayout.
layout.regions.center.on('beforeremove',function(a,b){
				var gridDiv=Ext.query('div[@id='+b.getEl().id+'] div[@className*=x-grid-container]');
				if (gridDiv!=''){
					Ext.each(gridDiv, function(g){
							ATW.killGrid(g.id)
						}
					)
				}
			});

Esse é o cara que mata os Grids. grids é um Object que eu adiciono a referencia de cada grid que crio assim:
var newgrid = new Object;
newgrid[divgrid]=grid;
Ext.apply(grids,newgrid);

onde grid é a referencia ao Grid que acabei de criar e divgrid é o id da div onde esse Grid foi criado, assim eu posso mata-lo depois atraves do id da div que serve de container pra ele.
Ai vc pode ver que no final o killGrid eu sobreponho o objeto grids com todos os grids que ainda possam existir menos os que eu acabei de matar, que estavam dentro da Tab.
killGrid: function(sDiv) {
		var ngrids = new Object;
		var ngrid = new Object;
		for (var e in grids){
			if (e == sDiv){
				grids[e].stopEditing();
				grids[e].destroy(true);
			}else{
				ngrid[e]=grids[e];
				Ext.apply(ngrids,ngrid);
			}
		}
		grids=ngrids;
	},

Espero que esse código te ajude... Levei uma semana pra entender que essa era a solução do meu problema!  ;D
Mandriva Linux in LAMPE (Linux/Apache/MySql/Php/Ext)

#5 Mark Wells

Mark Wells

    Novato

  • Membros
  • PipPip
  • 19 posts

Postado 10 October 2007 - 10:15

Realmente esse é um problema de acabar com a paciência. :)

Muito obrigado pela sugestão, vou ter rever boa parte do meu código, mas pelo menos vai chegar em algum lugar.  ;D

Abraços
Mark Wells

#6 jorenilson

jorenilson

    Member Avançado

  • Membros
  • PipPipPip
  • 91 posts
  • LocationManaus/AM

Postado 09 September 2012 - 14:43

Boa tarde Mark Wells,
Sei que este tópico já é um pouco antigo mas estou a dias quebrando cabeça com um problema parecido que estou enfrentando. Você conseguiu resolver esta questão?
by Jorenilson Santos




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

0 membros, 0 visitantes, 0 membros anônimos