从嵌套json显示列表：Sencha Touch 2 [英] Display a list from nested json: Sencha Touch 2

查看：132
本文介绍了从嵌套json显示列表：Sencha Touch 2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



视图 

  Ext.define（'Test.view.Contacts'，{
 extends：'Ext.List'，
 xtype： 'contacts'，
 
 config：{
 title：'Stores'，
 cls：'x-contacts'，
 
 store：'Contacts ，
 itemTpl：[
'< div class =headshotstyle =background-image：url（resources / images / logos / {logo}）;>< / div> ，
'{name}'，
'< span> {add1}< / span>'
] .join（''）
} 
} ）;

当您点击餐厅时，我希望根据项目点击显示另一个列表。



第二个视图 

  Ext.define 'test.view.Menu'，{
 extends：'Ext.List'，
 xtype：'contact-menu'，
 
 config：{
 title： 'menu'，
 cls：'x-contacts'，
 
 store：'Contacts'，
 itemTpl：[
'< div> {item}< ; / div>'
] .join（''），
}，
}）;

模型 

  Ext.define（'Test.model.Contact'，{
 extends：'Ext.data.Model'，
 
 config：{ 
字段：[
'name'，
'logo'，
'desc'，
'phone'，
'city'，
'add1'，
'post'，
'country'，
'latitude'，
'longitude'
]，
 proxy：{
类型：'ajax'，
 url：'contacts.json'
} 
}，
 hasMany：{
 model：Test.model.Menus ，
 name：'menus'
} 
}）; 
 
 Ext.define（'Test.model.Menus'，{
 extends：'Ext.data.Model'，
 config：{
 fields：[
'item'
] 
}，
 belongsTo：Test.model.Contact
}）;

商店 

  Ext.define（'Test.store.Contacts'，{
 extends：'Ext.data.Store'，
 
 config：{ 
 model：'Test.model.Contact'，
 autoLoad：true，
 //分类：'name'，
 grouper：{
 groupFn：function（record ）{
 return record.get（'name'）[0]; 
} 
}，
代理：{
类型：'ajax'，
 url：'contacts.json'，
 reader：{
 type：'json'，
 root：'stores'
} 
} 
} 
}）;

JSON 

  {
store：[{
name：Science Gallery，
logo：sciencegallery.jpg 
desc：获得一些食物，
电话：016261234，
city：Dublin，
add1：Pearse Street ，
post：2，
country：Ireland，
latitude：53.34422，
longitude：-6.25006 
menu：[{
item：SC三明治
}，{
item：SC Toasted Sandwich
}，{
item：SC Panini
}，{
item：SC Ciabatta
}，{
item：SC Burrito
}] 
}，{
name：Spar，
logo：spar.jpg，
desc：获得一些食物，
电话：016261234，
城市：都柏林，
add1：市长街道，
post：2，
国家：爱尔兰，
纬度：53.34422，
经度：-6.25006 
menu：[{
item：Spar Sandwich
}，{
item：Spar Toasted Sandwich
} {
item：Spar Panini
}，{
item：Spar Ciabatta
}，{
item：Spar Burrito 
}] 
}] 
}

我想显示所选餐厅的菜单项（项目，项目，项目...）的列表，但是当我使用嵌套列表时，我必须使用与以前列表相同的模板，这不符合我的需要。在这一刻，我得到了适量的物品，但没有显示。你可以帮我解决问题，谢谢。

解决方案

在我得到解决方案之前，您的代码很少遇到问题（需要解决之前才能解决问题）：




  • code>联系人存储，您的JSON的roog的配置为 rootProperty ，而不是根。

      proxy：{
     type：'ajax'，
     url：'contacts .json'，
     reader：{
     type：'json'，
     rootProperty：'stores'
    } 
    }

    您也可以将此代码放在模型中，因为您已经在其中放置了代理配置。这两个都被合并（应该在你的模型中，并从商店中删除代理）：

      proxy：{
    类型：'ajax'，
     url：'contacts.json'，
     reader：{
     type：'json'，
     rootProperty：'stores'
    } 
    }


  • 模型名称应始终为单数，因为它们代表一个对象。所以使用菜单而不是菜单。


  • 你需要在你使用的类中使用你所使用的任何类。例如，您需要 Sencha.model.Contact 类中的 Sencha.model.Menu 类，所以添加它中的要求中的内容 Contact.js ：

      Ext.define（'Sencha.model.Contact'，{
     extends：'Ext.data.Model'，
     require：['Sencha.model.Menu' ]，
     
     ... 
    }）;


  • 您需要使用 associationKey 在你的hasMany关联中通常会寻找菜单（从模型名称生成），但是在你的JSON中它是菜单。


  • hasMany and belongsTo 配置应该在您的型号内的 config 块内。

      Ext.define （'Sencha.model.Contact'，{
     extends：'Ext.data.Model'，
     require：['Sencha.model.Menu']，
     
     config： {
     ... 
     
     hasMany：{
     model：Sencha.model.Menu，
     associationKey：'menu'
    } 
    } 
    }）;




至于 strong> :) - 您可以在列表中修改您的 itemTpl ，以显示与显示的记录相关联。为此，您可以使用：

 < tpl for =associatedModelName> 
 {field_of_associated_model} 
< / tpl>

所以在你的情况下，你可以这样做：

  itemTpl：[
'{name}'，
'< div>'，
'< h2& b> Menu< / b>< / h2>'，
'< tpl for =menus>'，
'< div> -  {item}< / div>'，
'< / tpl>'，
'< / div>'
] .join（''）

这是一个项目的下载（使用SDK工具生成），其中包括一个演示，主要使用您的代码： http://rwd.me/FS57


I have a list that displays a list of restaurants with the logo of the restaurant etc.

The view

Ext.define('Test.view.Contacts', {
    extend: 'Ext.List',
    xtype: 'contacts',

    config: {
        title: 'Stores',
        cls: 'x-contacts',

        store: 'Contacts',
        itemTpl: [
            '<div class="headshot" style="background-image:url(resources/images/logos/{logo});"></div>',
            '{name}',
            '<span>{add1}</span>'
        ].join('')
    }
});

When you tap the restaurant i want it to show another list based on the item tapped.

The second view

Ext.define('Test.view.Menu', {
    extend: 'Ext.List',
    xtype: 'contact-menu',

    config: {
        title: 'Menu',
        cls: 'x-contacts',

        store: 'Contacts',
        itemTpl: [
            '<div>{item}</div>'
        ].join(''),
    },
});

The models

Ext.define('Test.model.Contact', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            'name',
            'logo',
            'desc',
            'telephone',
            'city',
            'add1',
            'post',
            'country',
            'latitude',
            'longitude'
        ],
        proxy: {
            type: 'ajax',
            url: 'contacts.json'
        }
    },
    hasMany: {
        model: "Test.model.Menus",
        name: 'menus'
    }
});

Ext.define('Test.model.Menus', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'item'
        ]
    },
    belongsTo: "Test.model.Contact"
});

The store

Ext.define('Test.store.Contacts', {
  extend: 'Ext.data.Store',

  config: {
    model: 'Test.model.Contact',
    autoLoad: true,
    //sorters: 'name',
    grouper: {
      groupFn: function(record) {
        return record.get('name')[0];
      }
    },
    proxy: {
      type: 'ajax',
      url: 'contacts.json',
      reader: {
        type: 'json',
        root: 'stores'
      }
    }
  }
});

The JSON

{
    "stores": [{
        "name": "Science Gallery",
        "logo": "sciencegallery.jpg",
        "desc": "Get some food",
        "telephone": "016261234",
        "city": "Dublin",
        "add1": "Pearse Street",
        "post": "2",
        "country": "Ireland",
        "latitude": "53.34422",
        "longitude": "-6.25006",
        "menu": [{
            "item": "SC Sandwich"
        }, {
            "item": "SC Toasted Sandwich"
        }, {
            "item": "SC Panini"
        }, {
            "item": "SC Ciabatta"
        }, {
            "item": "SC Burrito"
        }]
    }, {
        "name": "Spar",
        "logo": "spar.jpg",
        "desc": "Get some food",
        "telephone": "016261234",
        "city": "Dublin",
        "add1": "Mayor Street",
        "post": "2",
        "country": "Ireland",
        "latitude": "53.34422",
        "longitude": "-6.25006",
        "menu": [{
            "item": "Spar Sandwich"
        }, {
            "item": "Spar Toasted Sandwich"
        }, {
            "item": "Spar Panini"
        }, {
            "item": "Spar Ciabatta"
        }, {
            "item": "Spar Burrito"
        }]
    }]
}

I want to show a list of menu items (item, item, item...) for the restaurant selectedbut when I use a nested list I have to use the same template as the previous list which doesnt suit my needs. At the moment I get the right amount of items but nothing shows. Can you please help me with where I'm going wrong, thanks.

解决方案

Before I get to the solution, here are a few problems with your code (which need to be fixed before the solution will work):

  • In your proxy config within the Contacts store, the config for the roog of your JSON is rootProperty, not root.

    proxy: {
    type: 'ajax',
    url: 'contacts.json',
    reader : {
        type : 'json',
        rootProperty : 'stores'
    }
}

    You could also just put this code inside your model, as you already put a proxy config in there. Here are both merged (should be inside your model, and remove proxy from the store):

    proxy: {
    type: 'ajax',
    url: 'contacts.json',
    reader : {
        type : 'json',
        rootProperty : 'stores'
    }
}

  • Model names should always be singular as they represent one object. So use Menu, not Menus.

  • You need to require any classes you use inside the class you use them. For example, you need the Sencha.model.Menu class inside the Sencha.model.Contact class, so add it inside the requires property inside Contact.js:

    Ext.define('Sencha.model.Contact', {
    extend: 'Ext.data.Model',
    requires: ['Sencha.model.Menu'],

    ...
});

  • You need to use associationKey in your hasMany association as normally it would look for menus (generated from the Model name), but in your JSON is it menu.

  • hasMany and belongsTo configs should be inside config block within your models.

    Ext.define('Sencha.model.Contact', {
    extend: 'Ext.data.Model',
    requires: ['Sencha.model.Menu'],

    config: {
        ...

        hasMany: {
            model: "Sencha.model.Menu",
            associationKey: 'menu'
        }
    }
});

As for the solution :) - you can modify your itemTpl inside your list to display associated for the record being shown. To do this, you can use:

<tpl for="associatedModelName">
     {field_of_associated_model}
</tpl>

So in your case, you can do something like this:

itemTpl: [
    '{name}',
    '<div>',
        '<h2><b>Menu</b></h2>',
        '<tpl for="menus">',
            '<div> - {item}</div>',
        '</tpl>',
    '</div>'
].join('')

Here is a download of a project (generated using the SDK Tools) which includes a demo of this, using mostly your code: http://rwd.me/FS57

这篇关于从嵌套json显示列表：Sencha Touch 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆