Ir para conteúdo


Foto

Accordion Dinamico


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

#1 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 02 July 2012 - 15:05

Ola Pessoal

sempre usei accordion + treepanel dinamico para gerar um menu baseado nas permissoes do usuario
só que na versao 4 do extjs eu nao estava conseguindo fazer, acabei deixando de lado e fui fazendo outros projetos com mais urgencia

só que esses dias comecei a mexer de novo e consegui fazer o accordion do jeito que eu queria, e de quebra ja mudei o comportamento do accordion para funcionar como na versao 3, ou seja iniciando todos os accordion fechados, pois na versao 4 isso nao é possivel fazer por parametros, e mudei tbm a parte que quando fechava um panel ele nao abrir outro igual a versao 3, na versao 4 fechando um panel sem voce querer abria o proximo panel e sempre mantendo um aberto.
nao sei porque mexeram nisso tirando esse recurso tao simples, mas blz deu pra resolver é o que importa

montei um exemplo para quem precisar do accordion

quem tiver alguma dica ou sujestão para melhorar ele pode falar.

imagem 1
Imagem Postada

imagem2
Imagem Postada

link para download:
http://www.extjs.com...on_dinamico.rar


#2 Guedes

Guedes

    Novato

  • Membros
  • PipPip
  • 28 posts
  • LocationPiracicaba/SP

Postado 02 July 2012 - 17:23

Muito bom, inclusivo irei usá-lo em um dos meus projetos!
Irei adapta-lo para CakePHP.
Muito obrigado por compartilhar conosco.

#3 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 02 July 2012 - 18:44

Valeu

esqueci de comentar tbm que nesse exemplo ja tem a opção de clicar no item e abrir uma aba no centro
quem quiser usar grids, etc basta criar os arquivos .js e adicionar um xtype no tabpanel


#4 Márlon

Márlon

    Member Avançado

  • Membros
  • PipPipPip
  • 31 posts
  • LocationRio de Janeiro

Postado 03 July 2012 - 21:15

Muito show esse Painel!

Parabéns Fabyo!
;)
Até aqui nos ajudou o Senhor.

#5 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 03 July 2012 - 22:45

Muito bom mesmo Fabyo! Obrigado!

Eu estava no mesmo dilema que o seu de não funcionar o acordion dinamico como funcionava no Ext JS 3, mas como não tinha tempo de parar e ver, fui usando a tree sem acordion. Valeu mesmo. Parabéns!!!
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#6 Márlon

Márlon

    Member Avançado

  • Membros
  • PipPipPip
  • 31 posts
  • LocationRio de Janeiro

Postado 04 July 2012 - 02:24

Fabyo me descule te incomodar, porem quando fui testar o projeto, encontrei este erro:

"Uncaught TypeError: Cannot read property 'data' of undefined"

No firebug aponta para esta linha:

Ext.each(store.data.items[0].data.items, function(index)

Como eu gostaria muito de usar esse layout de accordion, com o menu dinâmico, será que vc teria alguma dica de como resolver?

vlw!
Até aqui nos ajudou o Senhor.

#7 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 04 July 2012 - 08:00

Voce mudou a configuração do json?

outra coisa do jeito que voce baixou o accordion e rodou sem alterar nada ele funcionou?

#8 Márlon

Márlon

    Member Avançado

  • Membros
  • PipPipPip
  • 31 posts
  • LocationRio de Janeiro

Postado 04 July 2012 - 12:02

Olá Fabyo,

Não alterei nada, tentei rodar do jeito que baixei.

vlw!
Até aqui nos ajudou o Senhor.

#9 Márlon

Márlon

    Member Avançado

  • Membros
  • PipPipPip
  • 31 posts
  • LocationRio de Janeiro

Postado 04 July 2012 - 12:06

Fabyo,

Esquece, já acertei aqui, não havia nenhum problem, só eu que tava rodando o html como se fosse "file:///", chamei do localhost, e funcionou perfeitamente.

Uma vez mais parabéns pelo excelente trabalho!

vlw!
Até aqui nos ajudou o Senhor.

#10 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 04 July 2012 - 12:21

Beleza, precisando só falar

#11 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 06 July 2012 - 08:11

Um bom exemplo Fabyo e irá me ajudar mto, pois estava sem tempo de fazer uma refatoração na minha aplicação.

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


#12 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 06 July 2012 - 11:10

Dei uma limpada no menu, segue abaixo:
index.html
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css" />
		<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-dev.js"></script>
		<style type="text/css">
		.server {
			background-image:url(server.png);
		}
		.workplace {
			background-image:url(workplace.png);
		}
		.wrench {
			background-image:url(wrench.png);
		}
		.application{
			background-image:url(application.png);
		}
		</style>
		
		<script type="text/javascript">
		Ext.onReady(function(){	

			var accordionPanel = Ext.create('Ext.panel.Panel', {
				renderTo   : Ext.getBody(),
				height	   : 300,
				layout	   : 'accordion',
				defaultType: 'treepanel',
				defaults   : {
					border	   : false,
					autoScroll : true,
					rootVisible: false
				}
			});
			
			var store = Ext.create('Ext.data.Store', {
				autoLoad : true,
				fields	 : ['text', 'iconCls', 'items'],
				proxy	 : {
					type  : 'ajax',
					url	  : 'menus.json',
					reader: {root: 'items'}
				},
				listeners: {
					load: function(store) {	
						store.each(function(record) {
							accordionPanel.add({
								title  : record.get('text'),
								iconCls: record.get('iconCls'),
								root   : {children: record.get('items')}
							});
						});
					}
				}		
			});	
		});
		</script>
	</head>
	<body>
	</body>
</html>

menus.json
{"items": 
[
	{
		"text": "Menu 1",
		"iconCls": "server",
		"items": [
			{
				"text": "menu 1.1",
				"id": 1,
				"iconCls": "server",
				leaf: true
			},
			{
				"text": "menu 1.2",
				"id": 2,
				"iconCls": "server",
				leaf: true
			}
		]
	},
	{
		"text": "Menu 2",
		"iconCls": "workplace",
		"items": [
			{
				"text": "menu 2.1",
				"id": 3,
				"iconCls": "workplace",
				leaf: true
			},
			{
				"text": "menu 2.2",
				"id": 4,
				"iconCls": "workplace",
				leaf: true
			},
			{
				"text": "menu 2.3",
				"id": 5,
				"iconCls": "workplace",
				leaf: true
			},
			{
				"text": "menu 2.4",
				"id": 6,
				"iconCls": "workplace",
				leaf: true
			}			
		]
	},
	{
		"text": "Menu 3",
		"iconCls": "wrench",
		"items": [
			{
				"text": "menu 3.1",
				"id": 7,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.2",
				"id": 8,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.3",
				"id": 9,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.4",
				"id": 10,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.5",
				"id": 11,
				"iconCls": "wrench",
				leaf: true
			},			
			{
				"text": "menu 3.6",
				"id": 12,
				"iconCls": "wrench",
				leaf: true
			}			
		]
	},
	{
		"text": "Menu 4",
		"iconCls": "application",
		"items": [
			{
				"text": "menu 4.1",
				"id": 13,
				"iconCls": "application",
				leaf: true
			}			
		]
	}
]
}

Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#13 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 06 July 2012 - 11:12

Valeu  ;)

#14 Guedes

Guedes

    Novato

  • Membros
  • PipPip
  • 28 posts
  • LocationPiracicaba/SP

Postado 06 July 2012 - 11:27

Fabio Jr. Policeno, desculpe-me pela ignorância, mas onde coloco essa refatoração do menu?
Substitui os métodos mas apresenta o menu dentro do painel ao invés da estrutura original.

#15 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 06 July 2012 - 11:50

Guedes é que o Fabio deixou apenas o accordion ele nao incluiu no Viewport

edit---

inclui a atualização do Fabio no Viewport com a função de adicionar a tab no centro

index.html
<html>
	<head>
                <title>Accordion Dinamico</title>
		<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css" />
		<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-dev.js"></script>
		<script type="text/javascript" src="accordion.js"></script>		
		<style type="text/css">
		.server {
			background-image:url(server.png);
		}
		.workplace {
			background-image:url(workplace.png);
		}
		.wrench {
			background-image:url(wrench.png);
		}
		.application{
			background-image:url(application.png);
		}
		.package{
			background-image:url(package.png);
		}
		</style>
		
		<script type="text/javascript">
		Ext.onReady(function(){	

			var accordionPanel = Ext.create('Ext.panel.Panel', {
				title: 'Painel',
				split: true,
				width : 185,
				collapsible: true,		
				iconCls: 'package',				
				region: 'west',
				height	: 300,
				layout	: 'accordionx',
				defaults: {
					defaultType: 'treepanel',
					defaults   : {
						border	   : false,
						autoScroll : true,
						rootVisible: false
					}
				}
			});
			
			var tabPanel = Ext.create('Ext.tab.Panel', {
				region: 'center',
				deferredRender: false,
				activeTab: 0,
				items: [{						
					title: 'Portal',
					html: '<p>Home</p>',
					autoScroll: true
				}],
				defaults   : {
					closable: true
				}	
			});
			
			var store = Ext.create('Ext.data.Store', {
				autoLoad : true,
				fields	 : ['title', 'iconCls', 'items'],
				proxy	 : {
					type          : 'ajax',
					url	          : 'menus.json',
					actionMethods : 'POST',
					noCache       : false,
					reader        : {root: 'items'}
				},
				listeners: {
					load: function() {
						this.each(function(record) {
							accordionPanel.add({
								title  : record.get('title'),
								iconCls: record.get('iconCls'),
								items  : [{
									root: {children: record.get('items')},
									listeners:{
										itemclick: function(view, rec){
											var titulo = rec.get('id');

											var novaAba = tabPanel.items.findBy(function( aba ){ return aba.itemId === rec.get('id'); });
											if(!novaAba){
												novaAba = tabPanel.add({
													title: record.get('title'),
													itemId: rec.get('id'),
													html: rec.get('text'),
													iconCls: rec.get('iconCls')
												});
											}
											tabPanel.setActiveTab(novaAba);
										}
									}								
								}]
							});
						});
					}
				}
			});

			var viewport = Ext.create('Ext.Viewport', {
				layout: 'border',
				renderTo: Ext.getBody(),
				items: [
					Ext.create('Ext.Component', {
						region: 'north',
						height: 85,
						autoEl: {
							tag: 'div',
							xtype	: 'box',
							html:''
						}
					}),
					accordionPanel,
					tabPanel
				]
			});
		});
		</script>
	</head>
	<body>
	</body>
</html>

menus.json
{"items": 
[
	{
		"title": "Menu 1",
		"iconCls": "server",
		"items": [
			{
				"text": "menu 1.1",
				"id": 1,
				"iconCls": "server",
				leaf: true
			},
			{
				"text": "menu 1.2",
				"id": 2,
				"iconCls": "server",
				leaf: true
			}
		]
	},
	{
		"title": "Menu 2",
		"iconCls": "workplace",
		"items": [
			{
				"text": "menu 2.1",
				"id": 3,
				"iconCls": "workplace",
				leaf: true
			},
			{
				"text": "menu 2.2",
				"id": 4,
				"iconCls": "workplace",
				leaf: true
			},
			{
				"text": "menu 2.3",
				"id": 5,
				"iconCls": "workplace",
				leaf: true
			},
			{
				"text": "menu 2.4",
				"id": 6,
				"iconCls": "workplace",
				leaf: true
			}			
		]
	},
	{
		"title": "Menu 3",
		"iconCls": "wrench",
		"items": [
			{
				"text": "menu 3.1",
				"id": 7,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.2",
				"id": 8,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.3",
				"id": 9,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.4",
				"id": 10,
				"iconCls": "wrench",
				leaf: true
			},
			{
				"text": "menu 3.5",
				"id": 11,
				"iconCls": "wrench",
				leaf: true
			},			
			{
				"text": "menu 3.6",
				"id": 12,
				"iconCls": "wrench",
				leaf: true
			}			
		]
	},
	{
		"title": "Menu 4",
		"iconCls": "application",
		"items": [
			{
				"text": "menu 4.1",
				"id": 13,
				"iconCls": "application",
				leaf: true
			}			
		]
	}
]
}


#16 Guedes

Guedes

    Novato

  • Membros
  • PipPip
  • 28 posts
  • LocationPiracicaba/SP

Postado 11 July 2012 - 21:21

Olá Fabyo, muito obrigado por postar a refatoração do Fabio Jr. Policeno.
Já testei e esta funfando! Estou migrando-o para o CakePHP utilizando como base o exemplo funcional do Legolas.

#17 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 27 July 2012 - 10:51

Dei mais uma diminuida/melhorada no menu: http://forum.extjs.c...g33743#msg33743
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#18 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 27 July 2012 - 10:51

Valeu  ;D

#19 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 30 July 2012 - 14:41

A pedidos, coloquei o menu em um viewport

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css" />
		<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-dev.js"></script>
		<style type="text/css">
		.server {
			background-image:url(server.png);
		}
		.workplace {
			background-image:url(workplace.png);
		}
		.wrench {
			background-image:url(wrench.png);
		}
		.application{
			background-image:url(application.png);
		}
		</style>
		
		<script type="text/javascript">
		Ext.onReady(function(){	
		
			var accordionPanel = Ext.create('Ext.panel.Panel', {
				region	   : 'west',
				width	   : 300,
				layout	   : 'accordion',
				defaultType: 'treepanel',
				defaults   : {
					border	   : false,
					autoScroll : true,
					rootVisible: false
				}
			});
			
			var store = Ext.create('Ext.data.Store', {
				autoLoad : true,
				fields	 : ['text', 'iconCls', 'items'],
				proxy	 : {
					type  : 'ajax',
					url	  : 'menus.json',
					reader: {root: 'items'}
				},
				listeners: {
					load: function(store) {	
						store.each(function(record) {
							accordionPanel.add({
								title  : record.get('text'),
								iconCls: record.get('iconCls'),
								root   : {children: record.get('items')}
							});
						});
					}
				}		
			});
			
			Ext.create('Ext.container.Viewport', {
				layout: 'border',
				items : [accordionPanel, {
					region: 'center',
					html  : 'Center'
				}]
			});
		});
		</script>
	</head>
	<body>
	</body>
</html>

Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#20 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 22 August 2012 - 10:11

Ola tenho uma diversas grids e processos feitos em MVC (controller, store, model, view).... Como procedo usando esse exemplo de 'accordion dinamico' para adicionar uma grid em cada tab conforme o click do menu ?


Abraços !




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

0 membros, 1 visitantes, 0 membros anônimos