1. #1
    Sencha User frankeys's Avatar
    Join Date
    Dec 2010
    Posts
    10
    Vote Rating
    0
    frankeys is on a distinguished road

      0  

    Default Links within Exjts to a certain panel

    Links within Exjts to a certain panel


    What is the best way for internal linking? I've got a tree panel navigation on the left with content in the center. Also i got a FAQ button on the top of my page that loads a faq in the mainpanel, with his own tree navigation panel added on the left within the main panel. Oke, so that is the FAQ.

    So when people browse through the my pages, i have sometimes a link that must refer to a specific section of the FAQ. So when the user clicks on "read more in FAQ" he must be leaded to the FAQ with already the page opened that is set in the link. So a navigation item must be active.

    What is the best way to go on this? I am really new to Extjs, but i like it.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    This is quite similar to what the ExtJS docs do so you may want to take a look at how they work.

    I've also knocked up an example based on your description, hope it's of some help. It's far from perfect but it does show off some techniques that may be useful to you.

    Code:
    Ext.ns('My');
    
    My.FaqPanel = Ext.extend(Ext.Container, {
        layout: {
            align: 'stretch',
            type: 'hbox'
        },
    
        initComponent: function() {
            var root = new Ext.tree.TreeNode({expanded: true, text: 'Root'});
    
            root.appendChild({text: 'Cats', nodeType: 'node'});
            root.appendChild({text: 'Dogs', nodeType: 'node'});
            root.appendChild({text: 'Rabbits', nodeType: 'node'});
            root.appendChild({text: 'Birds', nodeType: 'node'});
    
            var content = new Ext.BoxComponent();
    
            var tree = new Ext.tree.TreePanel({
                border: false,
                ref: 'myTree',
                root: root,
                rootVisible: false,
                width: 200
            });
    
            tree.getSelectionModel().on('selectionchange', function(selModel, node) {
                content.update('Some stuff about ' + node.attributes.text);
            });
    
            this.items = [
                tree,
                content
            ];
    
            My.FaqPanel.superclass.initComponent.call(this);
        },
    
        selectPage: function(topic) {
            this.myTree.getRootNode().findChild('text', topic).select();
        }
    });
    
    My.MainContentPanel = Ext.extend(Ext.Panel, {
        layout: 'fit',
    
        html: [
            'Click here for content about <a href="Cats">Cats</a>.',
            'Click here for content about <a href="Dogs">Dogs</a>.',
            'Click here for content about <a href="Rabbits">Rabbits</a>.',
            'Click here for content about <a href="Birds">Birds</a>.'
        ].join('<br/>'),
    
        afterRender: function() {
            Ext.each(this.body.query('a'), function(anchor) {
                var anchorEl = Ext.fly(anchor);
                var href = anchorEl.getAttribute('href');
    
                anchorEl.on('click', function(ev) {
                    // Prevent clicking the link from jumping to the href
                    ev.preventDefault();
    
                    // Trim off the #
                    this.showFaq(href);
                }, this);
            }, this);
    
            My.MainContentPanel.superclass.afterRender.call(this);
        },
    
        showFaq: function(faqPage) {
            this.removeAll();
    
            var faqPanel = new My.FaqPanel();
    
    
            this.add(faqPanel);
            this.doLayout();
    
            if (faqPage) {
                faqPanel.selectPage(faqPage);
            }
        }
    });
    
    var mainContent = new My.MainContentPanel({
        region: 'center'
    });
    
    new Ext.Viewport({
        layout: 'border',
        items: [
            {
                height: 50,
                region: 'north',
                xtype: 'container',
                items: {
                    xtype: 'box',
                    autoEl: {
                        html: 'FAQ'
                    },
                    listeners: {
                        afterrender: function() {
                            this.getEl().on('click', function() {
                                mainContent.showFaq();
                            });
                        }
                    }
                },
                layout: {
                    align: 'middle',
                    pack: 'end',
                    padding: 10,
                    type: 'hbox'
                }
            }, {
                region: 'west',
                root: new Ext.tree.TreeNode({text: 'Root'}),
                split: true,
                width: 300,
                xtype: 'treepanel'
            },
            mainContent
        ]
    });

Thread Participants: 1

Tags for this Thread