Question

我有一个树形图。 Firebug显示我在根节点下有三个孩子。但是，当我在控制器中执行rootNode.findChild时，它总是返回null。我错过了什么？

这是我的控制器：

 Ext.define("GiipIq.controller.Problems", {
     extend: "Ext.app.Controller",
     refs: [{selector: '#problemsTree', ref: 'problemsTree'}],

     selectFirstProblem: function() {
         **var problemsTree = this.getProblemsTree();
         var rootNode = problemsTree.getStore().getRootNode();
         console.log(rootNode);  <== I can see three child nodes under root node in firebug
         var record = rootNode.findChild("id", "bit-manipulation", true);
         console.log(record);**
         //problemsTree.getSelectionModel().select(record); **<== select(index) does not work either**                                                                                                                                                                              
     },  

     init: function () {
         this.control({
             "#problemsTree": { afterrender: this.selectFirstProblem }
         }); 
     }   
 });

这是Firebug结果：

0
    Object { raw={...}, modified={...}, data={...}, more...}

1
    Object { raw={...}, modified={...}, data={...}, more...}

2
    Object { raw={...}, modified={...}, data={...}, more...}

以下是第一个细节：

0
    Object { raw={...}, modified={...}, data={...}, more...}

$className
    "GiipIq.model.Problem"

$hasInheritableStatics
    Object { setProxy=true, getProxy=true, setFields=true, more...}

$inheritableStatics
    ["setProxy", "getProxy", "setFields", 2 more...]

_singleProp
    Object {}

alternateClassName
    "Ext.data.Record"

associations
    Object { allowFunctions=false, initialConfig={...}, items=[0], more...}

childNodes
    [Object { raw={...}, modified={...}, data={...}, more...}, Object { raw={...}, modified={...}, data={...}, more...}]

clientIdProperty
    null

config
    Object {}

configMap
    Object {}

data
    Object { id="algorithm", text="algorithms", leaf=false, more...}

以下是我的观点：

Ext.define("GiipIq.view.Problem", {
    extend: "Ext.window.Window",
    alias: "widget.problemwindow",
    titleAlign: "center",
    closable: false,
    layout: "border",
    autoShow: true,
    maximizable: true,
    draggable: false,
    resizable: false,
    x: 0,
    y: 0,
    width: Ext.getBody().getViewSize().width/2,
    height: Ext.getBody().getViewSize().height/2,
    id: "problem-window",

    getEastPanel: function() {
        return {
            region: "west",
            xtype: "treepanel",
            title: "Problems",
            width: 200,
            split: true,
            collapsible: false,
            floatable: false,
            rootVisible: false,
            useArrows: true,
            store: Ext.create("GiipIq.store.Problems"), 
            id: "problemsTree",
            dockedItems: [{
                xtype: "toolbar",
                dock: "bottom",
                layout: "fit",
                items: [{ 
                    xtype: "button",
                    text: 'Click to Run Selected Problems',
                    id: "run-problems-button" 
                }]
            }],
            listeners: {
                checkchange: function(node, checkedStatus, options) {
                    console.log("vp");
                }
            }
        };
    },

    getCentralPanel: function() {
        return {
            xtype: "tabpanel",
            width: (Ext.getBody().getViewSize()/2) - 200,
            bodyBorder: false,

            items: [{
                title: "Problem Description",
                id: "problem-description-tab"
            },{
                xtype: "panel",
                title: "Source Code",
            },{ 
                xtype: "panel",
                title: "Big O Analysis",
            }]
        };
    },

    initComponent: function () {
        this.items = [
            this.getEastPanel(),
            this.getCentralPanel()
        ];
        this.callParent(arguments);
    }
});

这是我的json数据：

{
    success: true,
    children: [{ 
        id: "algorithm",
        text: "algorithms", 
        expanded: true, 
        leaf: false, 
        checked: false, 
        children: [
            { id: "bit-manipulation", text: "bit manipulation", leaf: true, checked: true },
            { id: "brain-teaser", text: "brain teaser", leaf: true, checked: true }
        ]
    },{ 
        id: "data-structure",
        text: "data structures", 
        expanded: true, 
        checked: false, 
        leaf: false, 
        children: [
            { id: "array-and-string", text: "array and strings", leaf: true, checked: true },
            { id: "linked-list", text: "linked lists", leaf: true, checked: false}
        ] 
    },{ 
        id: "knowledge-based",
        text: "knowledge based", 
        expanded: true, 
        leaf: false, 
        checked: false, 
        children: [
            { text: "C and C++", leaf: true, checked: false},
            { text: "Java", leaf: true, checked: false}
        ]
    }]
}

Answer 1

您发布的代码中没有明显的问题，无论如何都有一些提示：

如果树是异步加载的，那么当您尝试找到它时，孩子可能不在那里
你可以停止你的代码并进入findChild方法，看看那里发生了什么以及为什么返回null
您可以尝试从控制台调用findChild。如果它从那里工作那么这是一个时间问题所以你的代码太早了。

为什么我rootNode.findChild返回null

1 个答案: