Search code examples
classdomextjstreepanel

Trying to work with down() method from ExtJS 4.2.1


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.


Solution

  • 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