1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Answers
    4
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default Answered: Tree node hyperlink

    Answered: Tree node hyperlink


    Hi,

    I have a tree,
    Code:
    var tree = Ext.create('Ext.tree.Panel', {
            store: store,
            frame: true,
            renderTo: 'tree_el',
            height: 400,
            width: 400
        });
    I used this example,
    http://dev.sencha.com/deploy/ext-4.0...e/reorder.html

    I want to give same hyperlink to all nodes of this tree, how that can be done?

    And how can we align a panel center? The above panel for example.

    Thanks in advance!

  2. In your get-nodes.php you should have something like an array with your nodes:

    Code:
    array(
      'text' => 'this is a hyperlink',
      'href' => 'http://google.com'
    );
    To center your TreePanel you need to edit the layout of your component around your TreePanel:

    Code:
    layout: {
      align: 'center'
    }

  3. #2
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,759
    Answers
    33
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    You can use the 'href' property of the NodeInterface, when sending your node data.

    http://docs.sencha.com/ext-js/4-1/#!....NodeInterface

  4. #3
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    When you create your store, use the 'href' property.

    TreeData Example:
    Code:
    {
      id: 'bla',
      text: 'this is a hyperlink',
      href: 'http://google.de'
    }
    And what do you mean by the panel? :x

  5. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Answers
    4
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    Hi,

    Thanks for the reply, if you see the example,

    Code:
    Ext.require([
        'Ext.tree.*',
        'Ext.data.*',
        'Ext.tip.*'
    ]);
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'get-nodes.php'
            },
            root: {
                text: 'Ext JS',
                id: 'src',
                expanded: true
            },
            folderSort: true,
            sorters: [{
                property: 'text',
                direction: 'ASC'
            }]
        });
    
        var tree = Ext.create('Ext.tree.Panel', {
            store: store,
            viewConfig: {
                plugins: {
                    ptype: 'treeviewdragdrop'
                }
            },
            renderTo: 'tree-div',
            height: 300,
            width: 250,
            title: 'Files',
            useArrows: true,
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Expand All',
                    handler: function(){
                        tree.expandAll();
                    }
                }, {
                    text: 'Collapse All',
                    handler: function(){
                        tree.collapseAll();
                    }
                }]
            }]
        });
    });
    Store is created there, where do you mean I have give href?

    I don't understand NodeInterface, is there an example?

    Panel alignment is aligning the above tree panel in the center, now I am giving,

    Code:
    margin: '100 0 0 500'
    which don't seem to be a good idea, because there can be changes in monitor sizes, so center should do it.

  6. #5
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      1  

    Default


    In your get-nodes.php you should have something like an array with your nodes:

    Code:
    array(
      'text' => 'this is a hyperlink',
      'href' => 'http://google.com'
    );
    To center your TreePanel you need to edit the layout of your component around your TreePanel:

    Code:
    layout: {
      align: 'center'
    }

  7. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Answers
    4
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    I missed to tell, I want to have click (link) only in the leaf, that will have same url for all.

  8. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Answers
    4
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by Arg0n View Post
    In your get-nodes.php you should have something like an array with your nodes:

    Code:
    array(
      'text' => 'this is a hyperlink',
      'href' => 'http://google.com'
    );
    To center your TreePanel you need to edit the layout of your component around your TreePanel:

    Code:
    layout: {
      align: 'center'
    }
    Thanks , href worked good, but align isn't working .

  9. #8
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    Damn... I knew it xD
    It also doesn't work in the TreePanel itself? If you write the layout config into the TreePanel :x

    Another solution might be layout: 'ux.center', but documentation says that it's ExtJs 4.1.2 only...

  10. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Answers
    4
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    Code:
    layout: 'ux.center'
    It isn't working, I was trying to align complete panel in the center for sometime now, but in vain .

  11. #10
    Sencha User Arg0n's Avatar
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    122
    Answers
    12
    Vote Rating
    16
    Arg0n will become famous soon enough Arg0n will become famous soon enough

      0  

    Default


    To be honest, I never tried to center something before. But it can't be so complicated...

    If you look into the ExtJs Layout Browser Example, you will see under the node "Custom layouts" something with center. They use ux.center fot it. Which is the class Ext.ux.layout.Center. You could check, if you have this class, else download it and include it into your src. >.<

Thread Participants: 2