Question

我正在尝试动态创建一个列表，然后在导航视图中动态显示它，但是当我尝试这样做时，我没有错误，列表也没有显示。我想知道如何在导航视图中显示列表。

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);


            }
        }
    }
});

Answer 1

尝试在主

中添加列表的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);
    }
});

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

1 个答案: