Question

我最近开发了一个关于显示类别/子类别的sencha应用程序。它显示了主要类别，但在单击任何类别时不显示子类别。

我的商店是 -

Ext.define('listdemo.store.Sections', {
extend : 'Ext.data.Store',

config : {
    autoLoad: true,
    model: 'listdemo.model.Sections',

    proxy:{
        type   : 'ajax',
        url:'http://localhost/catt.php',

        reader:{
                    type:'json',
                    rootProperty:'categories'       
                }

    }
}
});

型号代码是------

Ext.define('listdemo.model.Sections', {
extend: 'Ext.data.Model',

config: {
    fields: ['categories_id', 'categories_name','subcategories'],


}
});

观点是----

Ext.define('listdemo.view.Main',{
       extend: 'Ext.NestedList',
       xtype:'main',
       requires: [
            'Ext.TitleBar',
            'Ext.dataview.List',
            'Ext.data.Store',
            'Ext.dataview.NestedList'
        ],

       config:{
           title: 'Categories',
           //store:'Sections',
           items:[
           {
               xtype:'list',
               itemTpl:'{categories_name}',
               title:'Categories',
               store:'Sections',

            }
        ]
    }
});

我的php文件返回----

{ “类别”：[{ “categories_id”： “1”， “categories_name”： “硬件”， “子类别”：[{ “categories_id”： “4”， “categories_name”：“图形卡 “}，{” categories_id “：” 5" ， “categories_name”： “打印机”}，{ “categories_id”： “6”， “categories_name”： “监视器”}，{ “categories_id”： “7”，” categories_name “：” 扬声器 “}，{” categories_id “：” 8" ， “categories_name”： “键盘”}，{ “categories_id”： “9”， “categories_name”： “小鼠”}，{ “categories_id”：” 16" ， “categories_name”： “记忆”}，{ “categories_id”： “17”， “categories_name”：“CDROM 驱动器 “}]}，{” categories_id “：” 2" ， “categories_name”： “软件”， “子类别”：[{ “categories_id”： “18”， “categories_name”： “模拟”}，{ “categories_id” ： “19”， “categories_name”： “动作”}，{ “categories_id”： “20”， “categories_name”： “策略”}]}，{ “categories_id”： “3”， “categories_name”：“DVD 电影 “ ”子类别“：[{ ”categories_id“： ”10“， ”categories_name“： ”行动“}，{ ”categories_id“： ”11“， ”categories_name“：” 科学小说 “}，{” categories_id “：” 12" ， “categories_name”： “喜剧”}，{ “categories_id”： “13”， “categories_name”： “卡通”}，{ “categories_id”： “14”，” categories_name “：” 惊悚 “}，{” categories_id “：” 15" ， “categories_name”： “戏剧”}]}]}

如何在主要类别下显示子类别。

Answer 1

您需要更新模型定义以包含字段类型，并注册用于子类别的自定义数据类型。

首先在模型加载之前加入：

Ext.data.Types.ARRAY = {
    type: 'Array'
};

接下来将模型更新为：

Ext.define('listdemo.model.Sections', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'categories_id',
            type: 'int'
        },{ 
            name: 'categories_name',
            type: 'string'
        },{
            name: 'subcategories'
            type: Ext.data.Types.ARRAY
        }]
    }
});

现在，您的商店加载后，通过Web控制台手动检查记录，以确保保存子类别数组。您需要在列表中添加itemtap的侦听器，然后获取子类别并且：
- 使用子类别数组手动删除原始存储。这应刷新列表，但您将丢失原始商店，并且不会有任何卡片动画。
- 设置第二个列表/商店，将使用子类别手动重新加载，这将允许更改卡动画并维护原始商店以进行反向导航。

Answer 2

为您的商店提供商店ID

2.通过参数categories_name并选择其父目录为categories_name的子类别成功：功能（响应） {

searchresponse2 = Ext.JSON.decode（response.responseText）; //从服务器获取响应

// searchresponse2是将第一个结果存储在数组索引[0]

searchresponse2 = searchresponse2 [0];

var categoriesid = searchresponse2.categories; //获得第一名值 “categories_id”： “1”， “categories_name”： “硬件”

         var categoriesname=searchresponse2.categories_name;

                del_categoriesid=[];//declaring array
                del_categoriesname=[];

           for(var i= 0;i<searchresponse2.length;i++)
                {
                    del_categoriesid[i]=searchresponse2[i].categories;
                    del_categoriesname[i]=searchresponse2[i].categories_name;
                }// looping through all values


                for(var j= 0;j < searchresponse2.length;j++)
                {

Ext.getStore（'storeid'）。add（{categories：del_categoriesid [j]，categories_name：del_categoriesname [j]}）; } //在商店中添加结果的值

在sencha中显示类别/子类别

2 个答案: