Trying to work with down() method from ExtJS 4.2.1

Question

I am trying to find a specific element from my page using ExtJS 4 so I can do modifications on it. I know its id so it should not be a problem BUT

-I tried Ext.getCmp('theId') and it just return me undefined

-I tried to use down('theId') method by passing through the view and I still get a nullresponse.

As I know the id of the element I tried again the two methods by setting manually the id and it didn't work neither.

Do these two methods not function?

How should I do?

Here is the concerned part of the code :

listeners: {
                load: function(node, records, successful, eOpts) {
                    var ownertree = records.store.ownerTree;
                    var boundView = ownertree.dockedItems.items[1].view.id;
                    var generalId = boundView+'-record-';
                    // Add row stripping on leaf nodes when a node is expanded
                    //
                    // Adding the same feature to the whole tree instead of leaf nodes
                    // would not be much more complicated but it would require iterating
                    // the whole tree starting with the root node to build a list of
                    // all visible nodes. The same function would need to be called
                    // on expand, collapse, append, insert, remove and load events.
                    if (!node.tree.root.data.leaf) {
                        // Process each child node
                        node.tree.root.cascadeBy(function(currentChild) {
                            // Process only leaf
                            if (currentChild.data.leaf) {
                                var nodeId = ""+generalId+currentChild.internalId;
                                var index = currentChild.data.index;
                                if ((index % 2) == 0) {
                                    // even node
                                    currentChild.data.cls.replace('tree-odd-node', '')
                                    currentChild.data.cls = 'tree-even-node';
                                } else {
                                    // odd node
                                    currentChild.data.cls.replace('tree-even-node', '')
                                    currentChild.data.cls = 'tree-odd-node';
                                }
                                // Update CSS classes
                                currentChild.triggerUIUpdate();
                                console.log(nodeId);
                                console.log(ownertree.view.body);
                                console.log(Ext.getCmp(nodeId));
                                console.log(Ext.getCmp('treeview-1016-record-02001001'));
                                console.log(ownertree.view.body.down(nodeId));
                                console.log(ownertree.view.body.down('treeview-1016-record-02001001'));
                            }
                        });
                    }
                }

You can see my console.log at the end. Here is what they give me on the javascript console (in the right order):

treeview-1016-record-02001001

The precise id I am looking for. And I also try manually in case...

h {dom: table#treeview-1016-table.x-treeview-1016-table x-grid-table, el: h, id: "treeview-1016gridBody", $cache: Object, lastBox: Object…}

I checked every configs of this item and its dom and it is exactly the part of the dom I am looking for, which is the view containing my tree. The BIG parent

And then:

undefined
undefined
null
null

Here is the item I want to access:

<tr role="row" id="treeview-1016-record-02001001" ...>

And I checked there is no id duplication anywhere...

I asked someone else who told me these methods do not work. The problem is I need to access this item to modify its cls.

I would appreciate any idea.

Answer 1

You are looking for Ext.get(id). Ext.getCmp(id) is used for Ext.Components, and Ext.get(id) is used for Ext.dom.Elements. See the docs here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-get

Answer 2

Ok so finally I used the afteritemexpand listener. With the ids I get the elements I am looking for with your Ext.get(id) method kevhender :). The reason is that the dom elements where not completely loaded when I used my load listener (it was just the store) so the Ext.get(id) method couldn't get the the element correctly. I first used afterlayout listener, that was correct but too often called and the access to the id was not so easy. So, here is how I did finally :

listeners: {
                load: function(node, records, successful, eOpts) {
                    var ownertree = records.store.ownerTree;
                    var boundView = ownertree.dockedItems.items[1].view.id;
                    var generalId = boundView+'-record-';

                    if (!node.tree.root.data.leaf) {
                        // Process each child node
                        node.tree.root.cascadeBy(function(currentChild) {
                            // Process only leaf
                            if (currentChild.data.leaf) {
                                var nodeId = ""+generalId+currentChild.internalId;
                                var index = currentChild.data.index;
                                if ( (index % 2) == 0 && ids.indexOf(nodeId) == -1 ) {
                                    ids[indiceIds] = nodeId;
                                    indiceIds++;
                                } 
                               console.log(ids);
                            }
                        });
                    }
                },
                afteritemexpand: function( node, index, item, eOpts ){

                    /* This commented section below could replace the load but the load is done during store loading while afteritemexpand is done after expanding an item.
                     So, load listener makes saving time AND makes loading time constant. That is not the case if we just consider the commented section below because
                     the more you expand nodes, the more items it will have to get and so loading time is more and more important
                    */

//                      var domLeaf = Ext.get(item.id).next();
//                      for ( var int = 0; int <     node.childNodes.length; int++) {
//                          if (node.childNodes[int].data.leaf && (int % 2) == 0) {
//                                  if (ids.indexOf(domLeaf.id) == -1) {
//                                      ids[indiceIds] = domLeaf.id;
//                                      indiceIds++;
//                                  }
//                          }
//                          domLeaf = domLeaf.next();
//                      }
                    for ( var int = 0; int < ids.length; int++) {
                        domLeaf = Ext.get(ids[int]);
                        if (domLeaf != null) {
                            for ( var int2 = 0; int2 < domLeaf.dom.children.length; int2++) {
                                if (domLeaf.dom.children[int2].className.search('tree-even-node') == -1){
                                    domLeaf.dom.children[int2].className += ' tree-even-node';
                                }
                            }
                        }
                    }
                },

With ids an Array of the ids I need to set the class.

Thank you for the method.