Sencha-组件-NestedList（嵌套列表）（官网文档翻译20）

Sencha-组件-NestedList（嵌套列表）（官网文档翻译20）

Nested List is a component in Sencha Touch which provides a miller column interface to navigate between nested sets of data with a clean and easy to use interface.

 

 

 

Creating a simple Nested List

Creating a simple Nested List is fairly simple. There are only a few important configurations:

• store - this is the data store which is where the Nested List gets its data. Nested List uses the Ext.data.TreeStore class as Nested List has a tree-like UI.
• displayField - this is the field of the store which will be displayed on each list item in the Nested List. This configuration defaults to text so in some cases it is not needed.

Lets look at the at the code needed to create a basic nested list:

 

Ext.define('ListItem',{
    extend:'Ext.data.Model',
    config:{
        fields:['text']}});var treeStore =Ext.create('Ext.data.TreeStore',{
    model:'ListItem',
    defaultRootProperty:'items',
    root:{
        items:[{
                text:'Drinks',
                items:[{
                        text:'Water',
                        items:[{ text:'Still', leaf:true},{ text:'Sparkling', leaf:true}]},{ text:'Soda', leaf:true}]},{
                text:'Snacks',
                items:[{ text:'Nuts', leaf:true},{ text:'Pretzels', leaf:true},{ text:'Wasabi Peas', leaf:true}]}]}});Ext.create('Ext.NestedList',{
    fullscreen:true,
    store: treeStore
});

让走过的代码：

• 首先，我们定义ListItem的模型。这是一个简单的模型，这是我们的文本字段1字段定义。这是唯一的信息，我们需要在这一点上，它会被显示在列表中的每个项目。
• 接下来我们创建treeStore。
• 第一个属性，我们通过刚才定义的模型实例。
• 然后我们定义defaultRootProperty 的数据会被传递到我们的treeStore。在我们的例子中，这将是项目“。
• 然后，我们定义了根属性。这是数据将传递到treeStore的。

树存储数据

在上面的例子中最令人困惑的部分绝对是TreeStore的，其根/数据。让我们再看看代码：

var treeStore =Ext.create('Ext.data.TreeStore',{
    model:'ListItem',
    defaultRootProperty:'items',
    root:{
        items:[{
                text:'Drinks',
                items:[{
                        text:'Water',
                        items:[{ text:'Still', leaf:true},{ text:'Sparkling', leaf:true}]},{ text:'Soda', leaf:true}]},{
                text:'Snacks',
                items:[{ text:'Nuts', leaf:true},{ text:'Pretzels', leaf:true},{ text:'Wasabi Peas', leaf:true}]}]}});

因此，前两行是很容易理解的。首先，我们创建一个TreeStore的一个实例，然后我们给它一个模型，我们在上面定义。简单。

defaultRootProperty是它开始变得有点棘手。这是您的数据告诉根域的嵌套列表中的数据的开始。这是相同的，无论是内联的JavaScript（如以上）或远程数据（我们稍后会来）。正确也适用于数据中的每一个项目，即使它是嵌套。

的根本属性是这种情况下的数据，这个店。正如你可以看到它是一个对象，它只有一个属性，这是项目 -这也是我们的defaultRootProperty。现在，在每一个项目中，我们指定一个文本属性，我们也定义在我们的ListItem模型上面。正如你可以看到的饮料，水和小吃项目，也有儿童（使用defaultRootProperty 项目）。

一些项目也有一个叶属性。这意味着，当用户点击这个项目，会出现一个细节卡（如果配置） -但我们会离开，直到后来。

Loading Remote Data

在上面的例子中，我们简单地添加一些行内的数据，但在创建真实世界的例子，这是非常罕见的情况下。如果我们想将数据从远程JSON文件是什么？

它实际上是非常相似的。让我们来看看我们要加载的JSON文件：

{"items":[{"text":"Drinks","items":[{"text":"Water","items":[{"text":"Still","leaf":true},{"text":"Sparkling","leaf":true}]},{"text":"Soda","leaf":true}]},{"text":"Snacks","items":[{"text":"Nuts","leaf":true},{"text":"Pretzels","leaf":true},{"text":"Wasabi Peas","leaf":true}]}]}

正如你可以看到，它是相同的妥善我们在上面定义的内联根。因此，让我们来看看有什么不同的时候，我们创建了TreeStore：

var treeStore =Ext.create('Ext.data.TreeStore',{
    model:'ListItem',
    defaultRootProperty:'items',
    proxy:{
        type:'ajax',
        url:'data.json'}});

我们创建的存储，使用Ext.create，然后我们像以前一样的的模型和defaultRootProperty性能，但是，这一次，我们设置了一个代理。这个属性告诉TreeStore的加载其数据使用指定代理。在这种情况下的“AJAX”（我们给它一个类型，因为它是一个远程文件加载），然后URL的JSON文件。简单。

Detail Cards

一个细节的卡是什么（如果配置）的，如果用户点击一个项目，是一个叶（定义的TreeStore负载-上面的例子中的数据）。它可以是任何类型的组件，这意味着它是非常定制。您可以设置的详细卡使用的detailCard配置，嵌套列表中的配置。让我们来看一个简单的例子：

 

 

 

正如你所看到的，当你点击的叶项，详细的卡是可见的。因此，让我们看一下代码：

Ext.create('Ext.NestedList',{
    fullscreen:true,
    store: treeStore,
    detailCard:{
        html:'You are viewing the detail card!'}});

我们只需简单地设置detailCard是一个对象，一个配置设置的HTML。该对象将被自动转换成一个组件（就像当你调用一个容器上添加）。

如果我们要设置的detailCard上什么项目，我们挖掘中的数据？让我们看看我们如何做到这一点：

Ext.create('Ext.NestedList',{
    fullscreen:true,
    store: treeStore,
    detailCard:{
        html:'You are viewing the detail card!'},
    listeners:{
        leafitemtap:function(nestedList, list, index, target, record){var detailCard = nestedList.getDetailCard();
            detailCard.setHtml('You selected: '+ record.get('text'));}}});

你看我们怎么添加了监听器的配置。我们这样做，是因为我们要听的leafitemtap事件，该事件被窃听时任叶项。

当该事件被触发时，它传递一些参数：

• nestedList -这是一个参考的嵌套列表实例。
• 名单 -这是一个参考的最后名单，在该项目的叶子配置的挖掘。
• 指数 -该指数在列表存储的记录。
• 目标 - 被窃听的元素。
• 记录 - 记录被窃听的项目。

现在我们知道，当有人点击一个叶项，我们知道哪些记录被窃听，我们就可以更新详细的一些数据卡。

要得到detailCard，我们可以使用法的Ext.NestedList.getDetailCard，然后，我们可以更新我们的detailCard的HTML配置。

让我们来看看这方面的工作的一个例子：

 

 

 

Detail Container

嵌套列表有一个detailContainer配置，该配置用于指定的detailCard容器。这是当你想使用的detailCard是在另一个容器中，这是通常情况下，当屏幕尺寸大于普通电话。

让我们看一个这样的例子在行动：

 

 

 

正如你可以看到，我们有2个项目在视口中。

• 嵌套列表。
• 一个新的的容器我们指定的detailContainer的。

设置的配置是非常简单的。你只要给它一个您要使用的详细容器的容器：

var detailContainer =Ext.create('Ext.Container',{
    layout:'card'});var nestedList =Ext.create('Ext.NestedList',{
    store: treeStore,
    detailCard:true,
    detailContainer: detailContainer
});

如果你不指定一个detailContainer，将被添加到嵌套列表，detailCard。

posted on 2012-12-26 23:20 CW.Liu 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834931.html