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,579
    Vote Rating
    314
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi