NavigationMenu

NavigationMenu.js

/**
 * @docauthor Jose Filipe Lyra
 *
 * Cria um menu de navegacao com suporte ao novo sistema de rotas do ExtJS.
 * 
 * ## Itens do tipo 'button'
 * Itens do tipo 'button' sao tratados como as opcoes do menu. Utilize a propriedade `href`
 * iniciando com um hashtag (#) para utilizar o fragment identifier (a rota em si).
 * Exemplo de uso:
 *     @example
 *     Ext.create('Ext.menu.NavigationMenu', {
 *           items: [{
 *                xtype: 'tbtext', 
 *                text: 'Visão Geral'
 *              }, {
 *                  xtype: 'button',
 *                  text: 'Dashboard',
 *                  href: '#dashboard'
 *              }, {
 *                xtype: 'button',
 *                text: 'Calendário',
 *                href: '#calendario'
 *              }
 *          });
 */
Ext.define('KPIFarm.util.view.menu.NavigationMenu', {
	extend: 'Ext.toolbar.Toolbar',

	alias: 'widget.navigationmenu',
    alternateClassName: ['Ext.menu.NavigationMenu'],
    
    requires: [
    'KPIFarm.util.view.menu.NavigationMenuController'
    ],
    
    // Todos os configs possuem metodos setter e getter
    config: {
        
        /**
         * @cfg {String} uriSeparator
         * O texto utilizado para distinguir a separacao de cada nivel na uri.
         * Valor default: '/'
         * 
         * Exemplo:
         * `uriSeparator = "/"`
         * Se uri for "aba1/subaba2/opcao" os niveis de uri serao aba1 > subaba2 > opcao.
         */
        uriSeparator: '/',

        /**
         * @cfg {String} toggleGroup
         * O grupo a que os botoes do menu pertencem. Este grupo assegura que apenas 1 botao do grupo
         * esteja pressionado.
         * Valor default: 'main-nav'
         */
        toggleGroup: 'main-nav',
        
    },
    
    /**
     * @cfg {String} ui
     * Um estilo UI atribuido ao componente.
     * Valor default: 'default'
     */
    ui: 'default',
    
    /**
     * @cfg {Ext.enums.Layout/Object} layout
     * Valor default: `type: 'vbox', align: 'stretchmax'`
     *
     * Veja {@link Ext.container.Container#layout} para mais informacoes.
     */
    layout: {
        type: 'vbox',
        align: 'stretchmax'
    },
    
    controller: 'util.navigationmenu',


    initComponent: function() {        
        this.prepareMenuItems();
    	this.callParent(arguments); //Carrega o initComponent do super
    },
    
    /**
     * @private
     * Prepara os itens do menu de navegacao, utilizado ao inicializar o componente. 
     * Nao ha necessidade em chamar este metodo diretamente.
     */
    prepareMenuItems: function() {
        //TODO Falta adicionar a parte de estilização (CSS), seja com itemCls ou ui para cada tipo de item.
        
        var me = this,
        newItems = [];

    	Ext.Array.each(me.items, function(item, index, allItems){
            if(item.xtype=="button"){
                Ext.Array.push(newItems, Ext.Object.merge(item, {
                    toggleGroup: me.getToggleGroup(),
                    allowDepress: false,
                    hrefTarget: '_self'
                }));
            } else {
                Ext.Array.push(newItems, item);
            }
    	});
    	me.items = newItems;
    }

});

NavigationMenuController.js

Ext.define('KPIFarm.util.view.menu.NavigationMenuController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.util.navigationmenu',

    init: function () {        
        var History = Ext.util.History;

        if (!History.ready) {
            History.init();
        }
        
        // Chama o onToken para garantir que  a uri esteja vinculada ao botao desde a renderizacao da tela
        this.onToken(History.getToken());
        
        History.on({
            change: this.onToken,
            scope: this
        });
        
        this.callParent(arguments);
    },
    
    onToken: function (token) {
        
        var menu = this.getView(), 
            pressedButton = Ext.button.Manager.getPressed(menu.getToggleGroup()),
            tokenSplitted = token.split(menu.getUriSeparator());
        
        if (pressedButton) {
            pressedButton.toggle(false);
        }
        
        for (var i = tokenSplitted.length; i > 0; i--) {
            //token formado pelos niveis de uri
            var tokenToMatch = tokenSplitted.slice(0, i).join(menu.getUriSeparator()); 
            // procura por um botao com parâmetro uri igual ao token recem-criado
            var button = menu.child('button[href="#' + tokenToMatch + '"]');
            
            // se foi encontrado um botao, ativa-o e encerra o for.
            if(button) {
                button.toggle(true);
                break;
            }
        }     
    }
});