面板的煎茶触控列表

Posted 2023-02-26

【中文标题】面板的煎茶触控列表

【英文标题】：Sencha Touch List of a panel

【发布时间】：2011-09-19 11:53:28

【问题描述】：

我设置了一个应用程序，并在我的主页/屏幕上设置了几个链接。当我点击一个链接时，它会显示一个项目列表（如联系人列表），然后在单击列表项时再次显示详细视图。

我有以下设置：

  App.views.Viewport = Ext.extend(Ext.Panel, 
   fullscreen: true,
   layout: 'card',
   cardSwitchAnimation: 'slide',
   dockedItems: [
       
        dock : 'top',
        xtype: 'toolbar',
        title: '<img src="res/img/generic/TT_Small.png" />',
        cls: 'homeHeader'
       ,
    ],

 );

我想要的列表视图是：

  App.views.HomeAbout = Ext.regModel('Contact', 
  fields: ['firstName', 'lastName']
  );

  var store = new Ext.data.JsonStore(
  model : 'Contact',
  root: 'images',
  sorters: 'firstName',

  getGroupString : function(record) 
  return record.get('firstName')[0];
  ,


  data: [
  firstName: 'Tommy', lastName: 'Maintz',
  firstName: 'Rob', lastName: 'Dougan',
  firstName: 'Ed', lastName: 'Spencer',
  firstName: 'Jamie', lastName: 'Avins',
  firstName: 'Aaron', lastName: 'Conran',
  firstName: 'Dave', lastName: 'Kaneda',
  firstName: 'Michael', lastName: 'Mullany',
  firstName: 'Abraham', lastName: 'Elias',
  firstName: 'Jay', lastName: 'Robinson'
  ]
  );

var list = new Ext.List( 全屏：是的， itemTpl : 'firstName lastName', 分组：真， 索引栏：假，

  store: store
  );

我使用简单的“联系人”，例如开始，因此一旦运行，我将根据需要修改我的数据等，但是当我单击链接转到此视图时，我得到以下信息

  Uncaught Attempting to create a component with an xtype that has not been registered: HomeAbout

但在我的控制器中我有：

  about: function()

    if ( ! this.aboutView)
    
        this.aboutView = this.render(
            xtype: 'HomeAbout',
        );
    .....

任何想法或帮助将不胜感激

【参考方案1】：

第一个变化：

App.views.HomeAbout = Ext.regModel('Contact', 
  fields: ['firstName', 'lastName']
 );

到

App.models.Contact = Ext.regModel('Contact', 
  fields: ['firstName', 'lastName']  
);   

那就吃这个

App.views.HomeAbout = Ext.extend(Ext.List,  
    fullscreen: true,
    itemTpl : 'firstName lastName',
    grouped : true,
    indexBar: false, 
    store: store
);

而不是var list...

最后注册新的 xtype - 扩展默认 sencha-touch 类的类 - 像这样

Ext.reg('HomeAbout', App.views.HomeAbout);

【讨论】：

谢谢你，我看到你编辑了它，因为它有两次不同:-)。我已经把我的列表留在里面，然后我将项目：[列表]，到面板，这样它就可以将工具栏保持在顶部，这样我就可以把我们放在后面等等谢谢

我将如何添加一个点击事件，以便为每个添加一个静态细节视图？

将这个：onItemDisclosure:function(record) 添加到 App.views.HomeAbout 的配置中。 record是被点击的对象。

我找到了这个，只需要里面的代码来查看点击的页面，谢谢