Hybrid View

  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,761
    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


    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 .

  8. #7
    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...

  9. #8
    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.

Thread Participants: 2