在sencha中显示类别/子类别

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”：[{“ 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”： “ Memory”}，{“ 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电影”，“ subcategories”：[{“ categories_id”：“ 10”，“ categories_name”：“动作”}，{“ categories_id”： “ 11”，“ categories_name”：“科幻小​​说”}，{“ categories_id”：“ 12”，“ categories_name”：“喜剧”}，{“ categories_id”：“ 13”，“ categories_name”：“卡通 s“}，{” 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添加一个侦听器，然后获取子类别，并且可以：
-使用subcategories阵列手动重新加载原始商店。 这样可以刷新列表，但是您将失去原始存储，并且不会出现任何纸牌动画。
-设置第二个列表/商店，将其与子类别一起手动重新加载，这将允许更改名片动画并维护原始商店以便向后导航。

Answer 2

1. 给您的商店商店编号

2.传递参数category_name，然后选择其父目录为category_name的子类别：function（response）{

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（{类别：del_categoriesid [j]，类别名称：del_categoriesname [j]}）； } //将结果的值添加到存储中