开发者

unable to load data in treepanel of extjs4

I am new to extjs and I am creating MVC application.

I am trying to create tree panel as following.

Following is my model file

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

proxy: {
    type: 'memory'
},


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

]
});

Following is my store file

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
                                        }
                                    ]
                        }

                    ]
        }
    ]
});

Following is my view file

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);
},


});

When I am running code, tree panel seems empty without tree.

What I want to do is, I want to show tree based on project id in store above

Let me know if you need any other information from me.

Can anyone help me regarding the matter.

Thanks in advance.


I was able to solve above problem by replacing following line in my view file

store: this.store,

as following,

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

Hope this will help someone.

Thanks.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜