嵌套列表,多种布局
Posted
技术标签:
【中文标题】嵌套列表,多种布局【英文标题】:Nested List, Multiple Layouts 【发布时间】:2012-11-09 02:08:00 【问题描述】:在 Sencha Touch 2.1 中,我定义了以下嵌套列表:
xtype: 'NestedList',
docked: 'top',
ui: 'light',
store: treeStore,
detailCard: true,
detailContainer: // Reference to a Another Panel
我可以显示嵌套列表,但通过 JSON 添加项目被证明是有问题的。这是我的 JSON 示例:
[
"BranchID" : 4,
"BranchName" : "Branch Name",
"Jobs" : [
"JobOrderID" : 75,
"JobTitle" : "Job Title",
"leaf" : true
]
]
这是我的树商店和列表项:
// Define a List Item:
Ext.define('Branch',
extend: 'Ext.data.Model',
config:
fields: [
'BranchID',
'BranchName'
]
);
var treeStore = Ext.create('Ext.data.TreeStore',
model: 'Branch',
defaultRootProperty: 'items',
proxy:
type: 'ajax',
url: 'data/region.php'
);
我可以看到 data/region.php 正在被调用,并且它正确地返回 JSON - 但列表项没有显示。如何让列表项显示?
此外,我想为叶节点使用不同的布局 - 并让这些叶节点在单独的面板中拉出请求。如何识别面板,以便在我的 NestedList 的 DetailContainer 部分中引用它?
我在寻找什么:
-
分支机构列表
点击一个分支,列出所有工作
点击一个工作,详细信息显示在其他面板中。
我已经阅读了文档,但是对于更复杂的实现来说似乎有点稀疏。
【问题讨论】:
【参考方案1】:根据我的 Sencha 经验,我的建议是永远不要使用 Ext.NestedList
。当然,当您的模型非常简单但当您的模型包含关联时难以自定义时,它们会非常方便。
所以我会做(并且做过)是使用Ext.navigation.View
并在您点击以前列表的项目时推送新列表。这与Ext.NestedList
的概念完全相同,因此它不会使您的应用程序过载。
Here is an example based on your data
如果您有任何问题,请随时提出
希望这有帮助
【讨论】:
冠军努力!这会很好 - 非常感谢您的及时回答! 我是 sencha 的新手,这个例子对我有很大的帮助。但是,您引用的网站不再有效。你能把你的例子贴在别处吗?【参考方案2】:我认为你的 defaultRootProperty 对于 treeStore 是错误的。
应该是
defaultRootProperty: 'Jobs',
API reference
【讨论】:
我试了一下,但没有帮助 - 接受的答案根据我的数据提供了一个可行的解决方案 - 不过感谢您的尝试。以上是关于嵌套列表,多种布局的主要内容,如果未能解决你的问题,请参考以下文章