Ir para conteúdo


Foto

Accordion Dinamico


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

#21 Fabio Jr. Policeno

Fabio Jr. Policeno

    Member Avançado

  • Expert User
  • 2933 posts
  • LocationCuritiba - PR

Postado 22 August 2012 - 10:17

Dê uma pesquisada no fórum. Existem vários exemplos neste modelo.
Produtos/Serviços Ext JS
Porque dEle, por Ele, para Ele são todas as coisas

#22 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 22 August 2012 - 10:43

Bom Dia Fabio,

Ja dei uma pesquisada nao consegui algo que fosse o que preciso... tipo eu precisava em teoria de um accordion desses em MVC e assim chamar minhas grids conforme menu nas tabs. (coisa de iniciante que tá aprendendo)


Atenciosamente,
Rafael

#23 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 22 August 2012 - 11:01

Crie um grid e chame ele pelo xtype





#24 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 22 August 2012 - 11:02

Bom Dia Fabyo,

Eu sei que é isso que preciso fazer mas nao sei como proceder.... ainda mais que minha estrutura está em MVC !


Abraços !

#25 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 22 August 2012 - 11:12

Crie os grids e passe os nomes deles pelo json, para nao ter que criar campos extras eu costumo usar o id

exemplo

controller:

    ,init   : function() {
        this.control({
			'west' : {
				render: this.renderAccordion				
			}
			,'west treepanel': {
				itemclick: this.onNodeClick
			}
        });

	,onNodeClick : function(view, record){
		var tabPanel = Ext.getCmp('centro');

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



#26 rccintra

rccintra

    Member Avançado

  • Membros
  • PipPipPip
  • 431 posts

Postado 22 August 2012 - 11:18

Sim mas o problema é que nao to sabendo passar no menus.json as minhas grids !! Fora que o arquivo que peguei no inicio desse topico não está em MVC !

Abraços!

#27 inhaquites

inhaquites

    Member Avançado

  • Membros
  • PipPipPip
  • 69 posts
  • LocationGuaíba

Postado 04 September 2012 - 22:56

pessoal...
sou iniciante....
nao estou conseguindo entender como faço pra inserir os formularios dentro das tabs...
alguem consegue postar um link para um exemplo ?
obrigado....

#28 Allison WIllian

Allison WIllian

    Member Avançado

  • Membros
  • PipPipPip
  • 40 posts
  • LocationLondrina

Postado 19 September 2012 - 22:28

olá.

muito bom esse menu.

só estou com um problema de chamar exemplo um formulario.
tenho o usuario.js, coloquei no xtype da aba
xtype  : record.get('id')

segue meu arquivo usuario.js

vlw

#29 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 19 September 2012 - 22:43

Crie seu grid nesse padrao:

Ext.define('App.usuario.form', {
    extend      : 'Ext.form.Panel'
    ,alias      : 'widget.usuario' <- o xtype será esse

#30 Allison WIllian

Allison WIllian

    Member Avançado

  • Membros
  • PipPipPip
  • 40 posts
  • LocationLondrina

Postado 20 September 2012 - 08:38

Mas esse não seria para formato em MVC?
Não estou usando esse padrão.



#31 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 20 September 2012 - 08:56

Mas tbm funciona sem ser MVC

eu comecei assim criando os arquivos no formato certo mesmo nao usando mvc, pois quando fui migrar nao tive dor de cabeça os arquivos ja estavam prontos pra funcionar e como falei funciona do modo tradicional tbm

basicamente vc cria assim:

Ext.define('MeuForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.meuform',
...


e usa assim:
Ext.create('MeuForm');
ou em xtype passando seu alias



#32 Loiane

Loiane

    Member Avançado

  • Expert User
  • 1013 posts
  • LocationSão Paulo - SP

Postado 31 October 2012 - 07:04

Pessoal,

Migrei o exemplo para MVC e também coloquei associação entre models. É o mesmo exemplo com algumas modificações:

http://www.loiane.co...acao-de-models/

Autora dos livros:

Mastering Ext JS 5 http://bit.ly/1HWeHXh
Mastering Ext JS 4 http://bit.ly/14NZkxg

Ext JS 4: First Look http://bit.ly/o1IP1w
Sencha Architect http://bit.ly/19FVBGs
Curso ExtJS 4 Gratuito http://bit.ly/s5S0Oj (conceitos valem pro Ext 5 e 6 tb)


#33 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 31 October 2012 - 07:19

Ptz fino d+ vou até mudar o que fiz para este, pois não tinha associações entre Models. Obrigado por compartilhar.

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


#34 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 31 October 2012 - 07:52

Oi Loiane, muito bom seu exemplo

só uma duvida nao entendi a parte da associação entre models, pela logica o menu_id referencia o id do menu

só que eu mudei no json um submenu de "menu_id": "2" para "menu_id": "1" e o sub menu continuou no mesmo lugar, o certo seria ele ser submenu do menu 1 nao é mesmo?

		"title": "Menu 2",
		"iconCls": "computer",
		"id": "2", <-------------------
		"items": [
			{
				"text": "menu 2.1",
				"iconCls": "chart_bar",
				"menu_id": "1", <-----------------------
				"id": "21"
			},



#35 Loiane

Loiane

    Member Avançado

  • Expert User
  • 1013 posts
  • LocationSão Paulo - SP

Postado 31 October 2012 - 11:58

Oi Fabyo,

O ExtJS não tem essa lógica. Como tá vindo como filho do menu_id 1, ele vai ficar debaixo dele. O ExtJS apenas lê o que vem do servidor. Esse menu_id pode ajudar depois a pegar a entidade belongsTo - se for preciso - e aí a partir desse id carrega do servidor.

Nas associações de models o ExtJS apenas fornece a capacidade de leitura de dados aninhados e com isso já gera os métodos automaticamente para vc obter os dados e só. O resto é contigo!  :)

Autora dos livros:

Mastering Ext JS 5 http://bit.ly/1HWeHXh
Mastering Ext JS 4 http://bit.ly/14NZkxg

Ext JS 4: First Look http://bit.ly/o1IP1w
Sencha Architect http://bit.ly/19FVBGs
Curso ExtJS 4 Gratuito http://bit.ly/s5S0Oj (conceitos valem pro Ext 5 e 6 tb)


#36 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 31 October 2012 - 13:36

OK, valeu

#37 marcusvar

marcusvar

    Iniciante

  • Membros
  • Pip
  • 1 posts
  • LocationPorto Alegre

Postado 08 March 2013 - 16:20

Valeu Fabyo grande post,

Já implementei nos meus projetos.
Então Loiane, baseado no esclarecimento que você passou para o Fabyo, da capacidade de leitura do Extjs de dados aninhados, inseri uma adaptação para pegar o resto da árvore de um node de cada menu.
Deem uma olhada pra ver se ficou legal.

O código ficou assim:

var recursiveMenuItems = function(items, menu) { 
    var parent = menu.appendChild({
        text: items.text, 
        iconCls: items.iconCls,
        leaf: items.leaf, 
        className: items.className
    });
    Ext.each(items.items, function(item){
        recursiveMenuItems(item, parent);                
    });
};

this.getMenuStore().load(function(records, op, success){

    var menuPanel = Ext.ComponentQuery.query('menu')[0];

    Ext.each(records, function(root){

        var menu = Ext.create('Sencha.view.MenuItem',{
            title: root.get('title'),
            iconCls: root.get('iconCls')
        });
        
        Ext.each(root.items(), function(itens){
            Ext.each(itens.data.items, function(item){
                var parent = menu.getRootNode().appendChild({
                    text: item.get('text'), 
                    iconCls: item.get('iconCls'),
                    leaf: item.get('leaf'),
                    className: item.get('className')
                });
                
                if(item.raw.hasOwnProperty('items')){
                    recursiveMenuItems(item.raw.items[0], parent);
                }
            });  

        }); 

        menuPanel.add(menu);
    }); 
});

Fiz um appendChild recursivo quando tem uma opção com sub-itens e também inclui um campo "leaf" no model menuItem para verificar se é pasta ou opção ou seja, item ou sub-item. Ajustei o menu.json para:

{"items": 
[
	{
		"title": "Menu 1",
		"iconCls": "",
		"cls": "folder",
		"id": "1",
		"items": [
			{
				"text": "menu 1.1",
                                "iconCls": "",
				"menu_id": "1",
				"id": "11",
                                "leaf": false,
				"items": [
        { 
            "text": "menu 1.1.1",
	    "iconCls": "",
	    "leaf": false,
	    "items": [
            {
                "text": "menu 1.1.1.1",
  	     	"iconCls": "user_female",
		"leaf": true
            },
            {
                "text": "menu 1.1.1.2",
  	     	"iconCls": "",
		"leaf": false,
    		"items": [
                {
                    "text": "menu 1.1.1.2.1",
      	     	    "iconCls": "user_female",
    		    "leaf": true
                },
                {
                    "text": "menu 1.1.1.2.2",
      	     	    "iconCls": "user_female",
    		    "leaf": true
                }]

            }]
        }]
			},
			{
				"text": "menu 1.2",
				"iconCls": "user_gray",
				"menu_id": "1",
				"id": "12",
                                "leaf": "true"
			},
			{
				"text": "menu 1.3",
				"iconCls": "user_green",
				"menu_id": "1",
				"id": "13",
		  	        "leaf": true
			},
			{
				"text": "menu 1.4",
				"iconCls": "",
				"menu_id": "1",
				"id": "14",
		  	        "leaf": false,
		  	        "items": [{
  				    "text": "menu 1.4.1",
  				    "iconCls": "user_orange",
  				    "menu_id": "14",
  				    "id": "141",
  		  	            "leaf": true
                                 }]
			},
			{
				"text": "menu 1.5",
				"iconCls": "user_red",
				"menu_id": "1",
				"id": "15",
		  	        "leaf": true
			},
			{
				"text": "menu 1.6",
				"iconCls": "user_suit",
				"menu_id": "1",
				"id": "16",
		  	        "leaf": true
			},
			{
				"text": "menu 1.7",
				"iconCls": "user",
				"menu_id": "1",
				"id": "17",
		  	        "leaf": true
			}
		]
	},
	{
		"title": "Menu 2",
		"iconCls": "computer",
		"id": "2",
		"items": [
			{
				"text": "menu 2.1",
				"iconCls": "chart_bar",
				"menu_id": "2",
				"id": "21",
		  	        "leaf": true
			},
			{
				"text": "menu 2.2",
				"iconCls": "chart_curve",
				"menu_id": "2",
				"id": "22",
		  	        "leaf": true
			},
			{
				"text": "menu 2.3",
				"iconCls": "chart_org",
				"menu_id": "2",
				"id": "23",
		  	        "leaf": true
			},
			{
				"text": "menu 2.4",
				"iconCls": "chart_pie",
				"menu_id": "2",
				"id": "24",
		  	        "leaf": true
			}			
		]
	},
	{
		"title": "Menu 3",
		"iconCls": "table",
		"id": "3",
		"items": [
			{
				"text": "menu 3.1",
				"iconCls": "tag_blue",
				"menu_id": "3",
				"id": "31",
		  	        "leaf": true
			},
			{
				"text": "menu 3.2",
				"iconCls": "tag_green",
				"menu_id": "3",
				"id": "32",
		  		"leaf": true
			},
			{
				"text": "menu 3.3",
				"iconCls": "tag_orange",
				"menu_id": "3",
				"id": "33",
		  		"leaf": true
			},
			{
				"text": "menu 3.4",
				"iconCls": "tag_pink",
				"menu_id": "3",
				"id": "34",
		  		"leaf": true
			},
			{
				"text": "menu 3.5",
				"iconCls": "tag_purple",
				"menu_id": "3",
				"id": "35",
		  		"leaf": true
			},
			{
				"text": "menu 3.6",
				"iconCls": "tag_red",
				"menu_id": "3",
				"id": "36",
		  		"leaf": true
			},
			{
				"text": "menu 3.7",
				"iconCls": "tag_yellow",
				"menu_id": "3",
				"id": "37",
		  		"leaf": true
			}
		]
	},
	{
		"title": "Menu 4",
		"iconCls": "money",
		"id": "4",
		"items": [
			{
				"text": "menu 4.1",
				"iconCls": "money_dollar",
				"menu_id": "4",
				"id": "41",
		  	        "leaf": true
			},
			{
				"text": "menu 4.2",
				"iconCls": "money_euro",
				"menu_id": "4",
				"id": "42",
		  	        "leaf": true
			},
			{
				"text": "menu 4.3",
				"iconCls": "money_pound",
				"menu_id": "4",
				"id": "43",
		  	        "leaf": true
			},
			{
				"text": "menu 4.4",
				"iconCls": "money_yen",
				"menu_id": "4",
				"id": "44",
		  	        "leaf": true
			}			
		]
	}	
]
}

No final de tudo ficou assim:

Imagem Postada

Valeu pessoal, abração a todos e fiquem com Deus  ;)

#38 georgefsb

georgefsb

    Iniciante

  • Membros
  • Pip
  • 6 posts

Postado 20 March 2013 - 18:33

Pessoal, Boa noite.

Estou precisando de ajuda para integrar o menu em um layout 'border' na regiao 'west'. Como devo fazer?
a aplicaçao é em mvc.

estou utilizando o exemplo modificado pela Loiane ( http://www.loiane.co...acao-de-models/ )


Obrigado.

#39 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3497 posts
  • LocationBelo Horizonte

Postado 21 March 2013 - 08:18

georgefsb, no seu caso o componente que irá ficar na região west seria a mesma view "Sencha.view.Menu" do exemplo da @Loiane, mais ou menos assim:
Ext.define('Sencha.view.Viewport', {
     extend: 'Ext.container.Viewport'
    ,requires: [
        'Sencha.view.Menu',
        'Sencha.view.MenuItem'
    ]
    ,layout: 'border'
    ,items: [{
         region: 'west'
        ,xtype:: 'menu'
    }, {
         region: 'center'
        ,html: 'Componente da região "center"'
    }]
});

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


#40 georgefsb

georgefsb

    Iniciante

  • Membros
  • Pip
  • 6 posts

Postado 21 March 2013 - 13:26

Legolas,

Obrigado pela força... funcionou certinho.

até mais.





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

0 membros, 0 visitantes, 0 membros anônimos