jhonjairoroa87's blog: ExtJS 4 : add/read Custom Attributes in TreeNode

Thursday, October 27, 2011

ExtJS 4 : add/read Custom Attributes in TreeNode

Add a 'fields' array to the TreePanel:

,fields:[ 'text' , 'customfield']

and add the custom attribute to the node

,root: {
text: 'Root',
expanded: true,
children: [
{
text: 'Administracion General'
,customfield:'administracionGeneral'
,expanded: true
}
]
}

modify the listeners and get the custom attribute from record 'rec':

,listeners:{
itemclick: function(view,rec,item,index,eventObj)
{
nodeClickAction = rec.get('customfield');
alert(nodeClickAction);
}
}

i.e

var tree = new Ext.tree.TreePanel({
renderTo: Ext.getBody(),
height: 300,
width: 250,
fields:[ 'text' , 'customfield'],
title: 'Files',
  listeners:{
itemclick: function(view,rec,item,index,eventObj)
{
  nodeClickAction = rec.get('customfield');
alert(nodeClickAction);
}
   }
,root: {
text: 'Root',
expanded: true,
children: [
{
  text: 'Administracion General'
  ,customfield:'administracionGeneral'
,expanded: true
}
]
}
});

Here is a detailed example:

#### index.html ####

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Custom Tree Test</title>

<link rel="stylesheet" type="text/css" href="./ext-4.0.7-gpl/resources/css/ext-all.css"/>


<script type="text/javascript" src="./ext-4.0.7-gpl/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
   Ext.onReady(function(){
    var tree3 = new Ext.tree.TreePanel({
    // title: 'Simple Tree',
    rootVisible : false // hides root
    ,border:false // hides border
    ,fields:[ 'text' , 'onClickAction']
    //,width: 150,
    //height: 150,
    ,listeners:{
     itemclick: function(view,rec,item,index,eventObj)
      {     nodeClickAction = rec.get('onClickAction');
          alert(nodeClickAction);
      }
     }
    ,root: {
     text: 'Root',
     expanded: true,
     children: [
      {
       text: 'Administracion General'
       ,onClickAction:'administracionGeneral'
       ,expanded: true,
       children: [
       {
        text: 'Bodegas'
        ,onClickAction : 'bodegaPanelId'
        ,children:[
         {
           text: 'Crear Bodega'
           ,onClickAction : 'crearBodegaPanelId'
           ,leaf: true
         },{
           text: 'Buscar Bodega'
           ,onClickAction : 'buscarBodegaPanelId'
         ,leaf: true                                            }
]
         },{
            text: 'Tipos Producto'
            ,onClickAction : 'tipoProductoPanelId'
            ,children:[
             {
              text: 'Crear Tipo Producto'
              ,onClickAction : 'crearTipoProductoPanelId'
              ,leaf: true
            },{
             text: 'Buscar Tipo Producto'
             ,onClickAction : 'buscarTipoProductoPanelId'
             ,leaf: true                                                           }
         ]
            },{
              text: 'Tipos Documento'
             ,onClickAction : 'tipoDocumentoPanelId'
             ,children:[
              {
                text: 'Crear Tipo Documento'
                ,onClickAction : 'crearTipoDocumentoPanelId'
                ,leaf: true
              },{
                  text: 'Buscar Tipo Documento'
                  ,onClickAction : 'buscarTipoDocumentoPanelId'
              ,leaf: true
                                                                }
        ]
       }
      ]
     }
]
   }
});

                    var west = new Ext.Panel({
                         id : 'westContentPanelId'
                        ,title: 'Menú Principal'
                        ,layout: 'fit'
                        ,collapsible: false
                        ,region:'west'
                        ,width: 215
                        ,margins: '5 0 5 5'
                        ,items:[tree3]
                    });

var viewportz = new Ext.Viewport({
    layout:'fit', // The Viewport renders itself to the document body, and automatically sizes itself to the size of the
    //browser viewport and manages window resizing
    renderTo: 'container',
    layoutConfig:{animate:true}
    ,items:[west]
     });
   });
    </script>

    <div id="container">
        </div>

    </body>
</html>

Reference:
http://www.sencha.com/forum/showthread.php?145512-Tree-node-custom-attributes

3 comments:

Anonymous said...: Fuck you, Jhon Jario Roa, it doesn't work.; December 6, 2011 at 8:28 PM
jhonjairoroa87 said...: LOL!!!!!!!!!!

Hey you don't have to be THAT RUDE!!
You just need a bit of help ;)

I have just added an example to the post, simply copy/paste the code to your html file, (don't forget to change the extjs link directory); December 6, 2011 at 9:06 PM
Unknown said...: Dear Jhon
It works,
thanks million to your work; August 8, 2014 at 4:15 AM