无法在extjs4的treepanel中加载数据

时间:2011-05-31 09:26:19

标签: tree extjs4 extjs-mvc

我是extjs的新手,我正在创建MVC应用程序。

我正在尝试创建以下树形图。

以下是我的模型文件

Ext.define('rt.model.userinproject', {
extend: 'Ext.data.Model',

proxy: {
    type: 'memory'
},


fields: [
    { name: 'text', type: 'string'},
    { name: 'id',  type: 'Number'}

]
});

以下是我的商店文件

Ext.define('rt.store.userinproject', {
extend: 'Ext.data.TreeStore',

model: 'rt.model.userinproject',

root: {
        text: 'Project 1',
        id: 1,
        expanded: true
    },

folderSort: true,

sorters: [{
        property: 'text',
        direction: 'ASC'
    }],

data: [
        {
            text: "Project 1",
            id: 1, 
            expanded: true,
            children: [
                        {
                            text: "Department 1",
                            id: 1,
                            cls: "folder",
                            children:[
                                        {
                                            text: "User 1",
                                            id: 1,
                                            leaf:true
                                        },
                                        {
                                            text: "User 2",
                                            id: 2,
                                            leaf:true
                                        },
                                        {
                                            text: "User 3",
                                            id: 3,
                                            leaf:true
                                        },
                                        {
                                            text: "User 4",
                                            id: 4,
                                            leaf:true
                                        },
                                        {
                                            text: "User 5",
                                            id: 5,
                                            leaf:true
                                        }
                                    ]

                        },
                        {
                            text: "Department 2",
                            id: 2,
                            cls: "folder",
                            children:[
                                        {
                                            text: "User 6",
                                            id: 6,
                                            leaf:true
                                        },
                                        {
                                            text: "User 7",
                                            id: 7,
                                            leaf:true
                                        },
                                        {
                                            text: "User 8",
                                            id: 8,
                                            leaf:true
                                        },
                                        {
                                            text: "User 9",
                                            id: 9,
                                            leaf:true
                                        },
                                        {
                                            text: "User 10",
                                            id: 10,
                                            leaf:true
                                        }
                                    ]


                        },
                        {
                            text: "Department 3",
                            id: 2,
                            cls:"folder",
                            children:[
                                        {
                                            text: "User 11",
                                            id: 11,
                                            leaf:true
                                        },
                                        {
                                            text: "User 12",
                                            id: 12,
                                            leaf:true
                                        },
                                        {
                                            text: "User 13",
                                            id: 13,
                                            leaf:true
                                        },
                                        {
                                            text: "User 14",
                                            id: 14,
                                            leaf:true
                                        },
                                        {
                                            text: "User 15",
                                            id: 15,
                                            leaf:true
                                        }
                                    ]
                        }

                    ]
        },
        {
            text: "Project 2",
            id: 1, 
            expanded: true,
            children: [
                        {
                            text: "Department 1",
                            id: 1,
                            cls: "folder",
                            children:[
                                        {
                                            text: "User 1",
                                            id: 1,
                                            leaf:true
                                        },
                                        {
                                            text: "User 2",
                                            id: 2,
                                            leaf:true
                                        },
                                        {
                                            text: "User 3",
                                            id: 3,
                                            leaf:true
                                        },
                                        {
                                            text: "User 4",
                                            id: 4,
                                            leaf:true
                                        },
                                        {
                                            text: "User 5",
                                            id: 5,
                                            leaf:true
                                        }
                                    ]

                        },
                        {
                            text: "Department 2",
                            id: 2,
                            cls: "folder",
                            children:[
                                        {
                                            text: "User 16",
                                            id: 16,
                                            leaf:true
                                        },
                                        {
                                            text: "User 17",
                                            id: 17,
                                            leaf:true
                                        },
                                        {
                                            text: "User 18",
                                            id: 18,
                                            leaf:true
                                        },
                                        {
                                            text: "User 19",
                                            id: 19,
                                            leaf:true
                                        },
                                        {
                                            text: "User 20",
                                            id: 20,
                                            leaf:true
                                        }
                                    ]


                        },
                        {
                            text: "Department 3",
                            id: 2,
                            cls:"folder",
                            children:[
                                        {
                                            text: "User 21",
                                            id: 21,
                                            leaf:true
                                        },
                                        {
                                            text: "User 22",
                                            id: 22,
                                            leaf:true
                                        },
                                        {
                                            text: "User 23",
                                            id: 23,
                                            leaf:true
                                        },
                                        {
                                            text: "User 24",
                                            id: 24,
                                            leaf:true
                                        },
                                        {
                                            text: "User 25",
                                            id: 25,
                                            leaf:true
                                        }
                                    ]
                        }

                    ]
        }
    ]
});

以下是我的观看文件

Ext.define('rt.view.project.projectuser', {
extend: 'Ext.tree.Panel',
alias: 'widget.projectuser',

disabled: true,
border: false,
cls: 'projectuser',
autoScroll: true,

initComponent: function() {
    Ext.apply(this, {
        store: this.store,

        items: {
        title: 'User in project',
        }
    });

    this.callParent(arguments);
},


});

当我运行代码时,如果没有树,树面板似乎是空的。

我想要做的是,我想根据上面商店中的项目ID显示树

如果您需要我提供任何其他信息,请与我们联系。

任何人都可以帮我解决这个问题。

提前致谢。

1 个答案:

答案 0 :(得分:2)

我能够通过替换视图文件中的以下行来解决上述问题

store: this.store,

如下,

store: Ext.data.StoreManager.lookup('userinproject'),

希望这会对某人有所帮助。

感谢。