嵌套列表,多个布局

时间:2012-11-09 02:08:01

标签: sencha-touch-2 nested-lists

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

这是我的Tree Store和List Item:

// 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. 分行列表
  2. 点击分支,列出所有作业
  3. 点击作业,详情显示在其他面板中。
  4. 我已经阅读了文档,但在更复杂的实现上似乎有点稀疏。

2 个答案:

答案 0 :(得分:4)

从我的Sencha Experience,我的建议是永远不会使用Ext.NestedList。当然,当你的模型很简单但很难定制时,如果模型包含关联,那么它们非常方便。

所以我会做(并且做过)的是使用Ext.navigation.View并在点击之前列表的项目时推送新列表。这与Ext.NestedList的概念完全相同,因此不会使您的应用程序过载。

Here is an example based on your data

如果您有任何问题,请随时提出

希望这有帮助

答案 1 :(得分:0)

我认为你的defaultRootProperty对于treeStore是错误的。

应该是

defaultRootProperty: 'Jobs',

API reference