Tree node hyperlink

[sencha.user]

Hi,

I have a tree,

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!

[mankz]

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

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

[Arg0n]

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

TreeData Example:

{
  id: 'bla',
  text: 'this is a hyperlink',
  href: 'http://google.de'
}

And what do you mean by the panel? :x

[sencha.user]

Hi,

Thanks for the reply, if you see the example,

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,

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.

[Arg0n]

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

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:

layout: {
  align: 'center'
}

[sencha.user]

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

[sencha.user]

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

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:

layout: {
  align: 'center'
}

Thanks , href worked good, but align isn't working .

[Arg0n]

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

[sencha.user]

layout: 'ux.center'

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

[Arg0n]

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