Sencha Touch 2：在选项卡面板中创建嵌套列表

Posted 2023-02-25

【中文标题】Sencha Touch 2：在选项卡面板中创建嵌套列表

【英文标题】：Sencha Touch 2: Creating a Nested List inside a tab panel

【发布时间】：2012-06-26 15:37:34

【问题描述】：

我现在已经尝试了上千种不同的方式来完成这项工作，Sencha Touch 文档远非清晰或有帮助，而且每个人似乎都以不同的方式来做......其中没有一个对我有用。

我设法让列表视图以下列方式工作：

Ext.define("MyApp_eComm.view.Products", 
extend: 'Ext.navigation.View', //Needs to be navigation view to display the     ProductList.js
xtype: 'products',

requires: [
    'Ext.dataview.List',
    'MyApp.view.ProductList',
    'MyApp_eComm.view.ProductDetail'
],

config: 
    title: sMY_CONST_TAB_BROWSE_TITLE,
    iconCls: sMY_CONST_TAB_BROWSE_CLASS,

    stylehtmlContent: true,
    scrollable: true,

    items: [ 
        /*
            xtype: 'titlebar',
            docked: 'top',
            title: sMY_CONST_TAB_BROWSE_SUBTITLE
        ,*/
        
            xtype: 'productlist',
            title: sMY_CONST_TAB_BROWSE_SUBTITLE
        
    ]
  
)

这是我的列表视图，位于导航视图中...在选项卡面板中。我使用导航视图的原因是我可以将产品详细信息视图从公开组件推到顶部。

Ext.define("MyApp.view.ProductList", 
extend: 'Ext.List',
xtype: 'productlist',

requires: [
    'MyApp.store.ProductStore'
],

config: 
    itemTpl: 'text', 
    store: 'ProductStore',
    onItemDisclosure: true 

); 

这是我的模型：

Ext.define('MyApp.model.ProductListModel', 
extend: 'Ext.data.Model', 

config: 
    fields: ['text']

); 

最后这是我的商店，里面有测试数据，目前没有嵌套：

Ext.define('MyApp.store.ProductStore', 
extend: 'Ext.data.Store',

config: 
    model: 'MyApp.model.ProductListModel',
    sorters: 'text',
    data: [
        
            text: 'Burgers',
        ,
        
            text: 'Pasta',
        ,
        
            text: 'Sausages',
        ,
        
            text: 'Cabbage',
        ,
        
            text: 'Lettuce',
        ,
        
            text: 'Marmalade',
        ,
        
            text: 'Honey',
        ,
        
            text: 'Yogurt',
        ,
        
            text: 'Cheese',
        ,
        
            text: 'Milk',
        ,
        
            text: 'Bread',
        ,
        
            text: 'Butter',
        ,
        
            text: 'Goats Milk',
        ,
        
            text: 'Apple',
        ,
        
            text: 'Oranges',
        ,
        
            text: 'Bananas',
        ,
        
            text: 'Jelly',
        ,
        
            text: 'Spagetti Hoops',
        ,
        
            text: 'Ravioli',
        ,
        
            text: 'Wheatabix',
        ,
        
            text: 'Cornflakes',
        ,              

    ]

);

【问题讨论】：

如果你为你的问题创建了一个 Sencha Fiddle，那么我们可以尝试不同的东西 (senchafiddle.com)。

我正在尝试做类似的事情。拥有一个带有每个选项卡的嵌套钻取列表的选项卡式应用程序是一种非常典型的移动设计模式。为什么他们很难完成！？

【参考方案1】：

尝试添加so

config: 
  title: sMY_CONST_TAB_BROWSE_TITLE,
  iconCls: sMY_CONST_TAB_BROWSE_CLASS,

  styleHtmlContent: true,
  scrollable: true,

  items: 
    
        xtype: 'productlist',
        title: sMY_CONST_TAB_BROWSE_SUBTITLE
    

  

【讨论】：

完全没有解释？为什么它会比他已经拥有的更好？

仅删除评论并不能解决此问题的作者遇到的问题。