Results 1 to 4 of 4

Thread: Switch pannel on click on a html element

  1. #1

    Default Switch pannel on click on a html element

    Good evening all,

    I'm brand new to Sencha and I have a stupid issue and I can't find a way to make it work.

    I'd like to display some html links on a panel which, on a click event could navigate through other panels. In fact, having the same system than the tabs on tabPanel, but using html links and not displaying tabs.

    I don't want to create nested lists or these kind of things since I have 3 links to display, and they are actually within some html text.

    I've read bunch of posts on setActiveItem etc, read, I think all the docs available in the learn part... but still I'm stuck with this


    I think it's doable, since in jqtouch or other system, it's mainly an anchor "#mypanel".


    Sorry if this subject has already been treated before, but I didn't find the article.

    Thanks a lot for your answers.

    R,
    JB

  2. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    786
    Answers
    7

    Default

    If you use anchor links, then you can define routes that call controller actions that do the setActiveItem/changing for part.
    See this guide and look for "Routes": http://docs.sencha.com/touch/2-0/#!/guide/controllers

    You could also add a tap/click listener to your view with delegate: 'a' and then handle according to the "target" but that might be too much for a starter.

    The routes should work fine.

  3. #3

    Default

    Thanks for your answer, I didn't expect it to be so complicated to simply access a panel

  4. #4
    Sencha Premium User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    628
    Answers
    67

    Default Where we should set hashes or should we set hashes?

    How exactly should we set the hash for the url?
    I saw the methods in Ext.app.Router and Ext.app.History but I still don't exactly realise what was the intention.

    Methods / actions are routed to my controllers if I manualy change the browser location to fit a rule but I don t see how the location is updated on a new action executes.
    Even if I listen to different actions routed or not and call Ext.app.redirectTo(url or hash) the browser location doesn't change as I would `ve expected.

    Also I was expecting that Sencha 2 can identify actions that are routed and automatically update history and browser location hash, but it is not happening in my case.

    if my view is:
    Code:
    Ext.define("MyApp.view.Main", {
        extend: 'Ext.tab.Panel',
        requires: ['Ext.TitleBar'],
        
        config: {
            id:'mainNav',
            tabBarPosition: 'bottom',
            
            items: [
                {
                    title: 'Welcome',
                    items: {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Welcome to Sencha Touch 2'
                    },
                    
                    html: [
                        "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                        "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                        "and refresh to change what's rendered here."
                    ].join("")
                },
                {
                    title: 'Started',
                    iconCls: 'action',
                    
                    items: [
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Started'
                        }
                    ]
                }
            ],
            listeners:{
                activeitemchange:function(panel, item, old){
                    panel.fireEvent('historychange',item.title);
                    
                }
            }
        }
    });
    and my controller

    Code:
    Ext.define('MyApp.controller.Main', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                nav: '#mainNav'
            },
            routes:{
            'show/:param':'onHistoryEvent'
        },
            control:{
                nav:{
                    historychange:'onHistoryEvent'
                }
            },
        },
        onHistoryEvent : function(data,obj,event)
        {
            console.log('history event: '+data);
        }
        }
    });
    If I mnualy navigate to to http://localhost/MyApp/#show/something
    I get the "something" message in console, which I was expecting.

    I also was expecting that when I click on a tab button, not only the panel will switch but also the location hash would
    change to something like "#show/Home" or "#show/Started".

    If anyone could clear me out, I would appreciate it.

    I am using sencha-touch-2.0.0-gpl

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •