Ir para conteúdo


Foto

Exemplo de Painéis Auto-Hide e Click-Show


  • Por favor, faça o login para responder
1 resposta neste tópico

#1 Joaoneto

Joaoneto

    Novato

  • Membros
  • PipPip
  • 26 posts
  • LocationUberlândia - MG

Postado 20 September 2008 - 23:45

O modelo Original vem com o Ext 2.2, na pasta examples\layout é o arquivo complex.html.
Vale lembrar que para funcionar os scripts e o CSS devem ser configurados para o diretório certo.
Resolvi postar porque consegui fazer algumas coisas legais, como fazer uma função para configurar os painéis e comentar um pouco do código, além de deixá-lo mais enxuto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo de Painéis</title>
<link href="css/comum.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" type="text/css" href="ext/resources/Original/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext-base.js"></script>
<script type="text/javascript" src="ext/adapter/ext-all.js"></script>
</head>
<style type="text/css">
	html, body {font:normal 12px verdana;margin:0;padding:0;border:0 none;overflow:hidden;height:100%;}
	p {margin:5px;}
</style>
<script type="text/javascript">
    Ext.onReady(function(){
		//Classe responsável por Manter os painéis abertos ou fechados
		Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
		//Esta função configura os painéis. Como possuem as mesmas peculiaridades, é mais
		//"Orientado a objeto" desta forma.
		function ConfiguraPainel(region,id,contentEl,title,width,height,minSize,maxSize,margins)
		{
			var painel = {region:region,id:id,contentEl:contentEl,title:title,collapsible: true,
					split:true, width: width,height: height,minSize: minSize,collapsed:false,
					maxSize: maxSize,layout:'fit',margins:margins,setDisabled:false,
					layout:'accordion',layoutConfig:{animate:true}}
			return painel;
		}
		//Dois tipos de painéis de rodapé
		var PainelS = new Ext.BoxComponent({region:'south',el: 'south',height:30});
		//var PainelS = ConfiguraPainel('south','south-panel','south','Rodapé',0,100,100,100,'0 0 0 0');
		
		var PainelE = ConfiguraPainel('east','east-panel','east','Direito',175,0,175,175,'0 5 0 0');
		var PainelW = ConfiguraPainel('west','west-panel','west','Esquerdo',175,0,175,175,'0 0 0 5');
		var PainelN = new Ext.BoxComponent({region:'north',el: 'north',height:60});
		
		//O original era um TabPanel, acho que pode-se mudar para qualquer coutro
		var PainelCentral = new Ext.Panel({
                    region:'center',deferredRender:false,layout:'fit',activeTab:0,
                    items:[{contentEl:'center1',title: 'Principal',autoScroll:true}]});

		//Para remover os painéis, basta remover do Viewport
//		var viewport = new Ext.Viewport({layout:'border',items:[PainelN,PainelS,PainelE,PainelW,PainelCentral]});
		var viewport = new Ext.Viewport({layout:'border',items:[PainelN,PainelS,PainelW,PainelCentral]});});
</script>
</head>
<body>
  <div id="west">
	<p align="center">WEST - generally for menus, toolbars and/or advertisements</p>
  </div>
  <div id="east">
	<p align="center">EAST - generally for menus, toolbars and/or advertisements</p>
  </div>
  <div id="north">
    <p align="center">NORTH - generally for menus, toolbars and/or advertisements</p>
  </div>
  <div id="center1">
  </div>
  <div id="south">
    <p align="center">Copyright Ext&copy; Javascript Framework</p>
  </div>
 </body>
</html>
Espero ter ajudado.  ;D

#2 Daniel Schmitz

Daniel Schmitz

    Member Avançado

  • Membros
  • PipPipPip
  • 458 posts

Postado 22 September 2008 - 17:34

oi, manda uma screen ae :)
Confie na API do EXT, ela é a sua melhor amiga: http://docs.sencha.com/ext-js/




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

0 membros, 0 visitantes, 0 membros anônimos