无法在extjs4的树面板中加载数据
我是 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 显示树，
如果您需要我提供任何其他信息，请告诉我。
任何人都可以帮助我解决这个问题。
提前致谢。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我能够通过将视图文件中的以下行替换
为以下内容来解决上述问题，
希望这会对某人有所帮助。
谢谢。
I was able to solve above problem by replacing following line in my view file
as following,
Hope this will help someone.
Thanks.