Sencha Touch 2：如何在导航视图中显示列表？

Posted 2023-02-25

【中文标题】Sencha Touch 2：如何在导航视图中显示列表？

【英文标题】：Sencha Touch 2: How to show a List in a Navigation View?

【发布时间】：2013-02-01 16:47:17

【问题描述】：

我正在尝试动态创建一个列表，然后在导航视图中动态显示它，但是当我尝试执行此操作时，我没有收到任何错误并且列表不显示。我想知道如何在导航视图中显示列表。

Ext.define('MyApp.view.Navigation', 
    extend: 'Ext.navigation.View',
    id: 'NavView',
    xtype: 'navigationcard',
    config: 
        title: 'Schedule',
        iconCls: 'settings',
        //we only give it one item by default, which will be the only item in the 'stack' when it loads
        items: [
                   
                       xtype: 'mainview'
                   
        ]
    
);
Ext.define('MyApp.view.Main', 
    extend: 'Ext.TabPanel',
    xtype: ['mainview','widget.mainview'],
    config: 
        title:'MyApp',
        fullscreen: true,
        tabBarPosition: 'bottom',

        defaults: 
            stylehtmlContent: true
        ,
        items: [
             xtype: 'schedulecard' ,
             xtype: 'settingscard' 
        ]
    

);

var scheduleStore = Ext.create('Ext.data.Store', 
    storeId: 'schedulestore',
    fields: ['scheduleId', 'templateName', 'startDate', 'times'],
    sorters: 'day',
    grouper: 
        groupFn: function (record) 
            var startDate = $.datepicker.formatDate('DD, MM dd', new Date(record.get('startDate')));
            return startDate;
        ,
        sortProperty: 'startDate',
    
); // create()

Ext.define('MyApp.view.Schedule', 
    extend: 'Ext.List',
    xtype: 'schedulecard',
    grouped: true,
    config: 
        title: 'Schedule',
        iconCls: 'time',
        store: 'schedulestore',
        grouped: true,
        itemTpl: '<span style="font-weight:bold;">templateName</span><br/>times',
        listeners: 
            itemtap: function (list, index, item, e) 
                var self = Ext.getCmp('NavView');
                var listRecord = list.getStore().getAt(index);
                var scheduleId = listRecord.get('scheduleId');


                var scheduleItem = GetScheduleItemById(scheduleId);

                var button = Ext.create('Ext.Button', 
                    iconCls: 'compose',
                    text:'Forms',
                    iconMask: true,
                    handler: function () 
                        var self = Ext.getCmp('NavView');


                        var cListStore = Ext.create('MyApp.view.ScheduleFormsList');
                        var panelForms = Ext.create('Ext.Panel', 
                            id: 'panelForms',
                            items: [ xtype: 'schedulecard' ]
                        );

                        var newView = 
                            title: scheduleItem.AppointmentType.Name,
                            id: 'ScheduleItemDetailForms',
                            items: [cListStore]
                        ;
                        self.push(newView);
                    
                );


                var panelScheduleDetails = Ext.create('Ext.Panel', 
                    id: 'panel',
                    html: '<div style="margin:10px;"><span style="font-weight:bold;">' + timesTxt + '</span></div><hr/><div style="float:left;margin:10px;clear:both;">' + locationtxt + '</div><div style="float:left;margin:10px;">' + googleMap + '</div>'
                );

                var scheduleDetailsContainer = Ext.create('Ext.Container', 
                    fullscreen: true,
                    layout: 'vbox',
                    items: [
                        
                            xtype: 'panel',
                            flex: 1,
                            items: [button]
                        ,
                        
                            xtype: 'panel',
                            flex: 2,
                            items: [panelScheduleDetails]
                        
                    ]
                );

                var newView = 
                    title: scheduleItem.AppointmentType.Name,
                    id: 'ScheduleItemDetailTabs',
                    items: [scheduleDetailsContainer]
                ;
                self.push(newView);


            
        
    
);

【问题讨论】：

你能告诉我列表的代码以及你是如何创建和添加它的吗？

@ThinkFloyd 这是我将列表实例化为名为 cListStore 的变量的代码行。然后我将其添加到新视图并将其推送到导航视图。

我不知道这是一个答案，但我在TabPanel 中显示列表时遇到了很多麻烦。我不知道为什么，但是当我将该视图更改为简单的Container 并手动添加Ext.tab.Bar（不幸的是，使用手动控制）时，一切正常。我建议只尝试一个简单的Container 并查看列表是否显示。如果是这样，那就有问题了。

你在导航视图的配置中尝试过 layout:'fit' 吗？

尝试将代码放入 senchafiddle。然后我们可以查看它

【参考方案1】：

尝试在main中添加列表的xtype

Main.js

Ext.define('MyApp.view.Main',
    extend:'Ext.TabPanel',
    xtype:'mainView',
    id:'idMain',
    config:
        tabBar:
            docked:'bottom',
            hidden:true
        ,
        items:[
             xtype: 'schedulecard' 
              ]
    
);

Schedule.js

Ext.define("MyApp.view.Schedule", 
    extend: "Ext.Container",
    xtype: 'schedulecard',
    config: 
        title: 'Schedule',
        iconCls: 'time',
        layout:'fit',
        items: [

                    
                        xtype: 'navigationview',
                        id:'idScheduleListNavView',
                        items: [
                                
                                    xtype:'list',
                                    onItemDisclosure:true,
                                    loadingText: "Searching ...",
                                    emptyText: "<div class=\"empty-text\">No Places Found.</div>",
                                    id:'idSearchNavList',
                                    store: 'schedulestore',
                                    itemTpl: '<span style="font-weight:bold;">templateName</span><br/>times',
                                ,
                            ],  
                    
          ]
    
);

ScheduleController.js

在您的控制器中创建新视图并推送它

Ext.define('MyApp.controller.ScheduleController',
    extend:'Ext.app.Controller',
    config:
        refs:
            idScheduleList:'schedulecard',
            navScheduleList:'#idScheduleListNavView',
        ,
        control:
            '#idScheduleListNavView' : itemtap:'showScheduleDetails',
        
    ,

    showScheduleDetails : function()
        var navScheduleList = this.getNavScheduleList();
        navScheduleList.push(newView);
    
);