javascript - Sencha touch 2-自定义组件开发数据项未从商店加载值

我正在尝试开发要在应用程序中使用的自定义数据项，但是该数据项未加载到我的列表视图中。以下是供参考的代码：

内部物品代码

 Ext.define("MyApp.view.MyBookingListItemInner", {
        extend : "Ext.Container",
        requires : [],
        alias:"widget.myBookingListItemInner",
        config : {
            layout : {
                type : "hbox",
                pack : "start"
            },
            cls : "mybooking-inner-panel-item",
            items:[
            {
                xtype : "label",
                cls : "mybooking-label-time-cls",
                itemId : "mybooking-left-time-label-itemId",
                flex:1
            },{
                xtype : "panel",
                cls : "my-booking-details-panel-item",
                itemId : "my-booking-details-panel-itemId",
                flex : 3,
                layout : {
                    type : "vbox",
                    pack : "start"
                },
                items : [{
                    xtype : "label",
                    itemId : "mybooking-deskno-id",
                    cls : "mybooking-deskno",
                    flex : 1
                }, {
                    xtype : "label",
                    itemId : "mybooking-location",
                    cls : "mybooking-locationcls",
                    flex:1
                }, {
                    xtype : "label",
                    itemId : "mybooking-group",
                    cls : "mybooking-locationcls",
                    flex:1
                }]
            }
            ]
        },
        setTimeLabel: function(time)
        {
            console.log("test");
            this.down("#mybooking-left-time-label-itemId").setHtml(time);
        },
        setDeskNoLabel: function(deskNo)
        {
            console.log("test");
            this.down("#mybooking-deskno-id").setHtml(deskNo);
        },
        setLocationLabel: function(location)
        {
            console.log("test");
            this.down("#mybooking-location").setHtml(location);
        },
        setGroupLabel: function(group)
        {
            console.log("test");
            this.down("#mybooking-group").setHtml(group);
        }

    });

数据项代码：

Ext.define("MyApp.view.MyBookingListItem", {
    extend : "Ext.dataview.component.ListItem",
    requires : ["Ext.Button"],
    alias : "widget.bookinglistitem",
    config : {
        layout : {
            type : "hbox",
            align : "left"
        },
        cls : 'x-list-item booking-list-item',
        button : {
            cls : 'x-button custom-button custom-font mybooking-delete-cls',
            flex : 0,
            itemId : "mybooking-delete-button",
            text : "Delete",
            width : "113px",
            height : "46px",
            hidden : true,
            style : "z-index:100",
            handler : this.buttonTapHandler,
            scope : this
        },
        myBookingListItemInner:{
            flex:2
        },
        dataMap : {
            getMyBookingListItemInner : {
                setTimeLabel : "time",
                setDeskNoLabel : "deskNo",
                setLocationLabel : "location",
                setGroupLabel : "group"
            }
        }
    },
    applyButton : function(config) {
        return Ext.factory(config, Ext.Button, this.getButton());
    },
    updateButton : function(newButton, oldButton) {
        if (newButton) {
            this.add(newButton);
        }

        if (oldButton) {
            this.remove(oldButton);
        }
    },
    applyMyBookingListItemInner: function(config)
    {
        return Ext.factory(config,MyBookingListItemInner,this.getMyBookingListItemInner());
    },
    updateMyBookingListItemInner: function (newItem,oldItem)
    {
        if(oldItem)
        {
            this.remove(oldItem);
        }
        if(newItem)
        {
            this.add(newItem)
        }
    },
    buttonTapHandler : function(btn, e, opts) {
        console.log("Button Tap Handler - Delete Button Tapped");
    }
});

店铺代码

Ext.define("MyBookingModel",{
    extend:"Ext.data.Model",
    config:{
        fields:[
        {name:"day", type:"string"},
        {name:"date",type:"string"},
        {name:"time",type:"string"},
        {name:"deskNo",type:"string"},
        {name:"location",type:"string"},
        {name:"group",type:"group"}
        ]
    }
});

Ext.define("MyApp.store.MyBookingStore",{
    extend:"Ext.data.Store",
    config:{
        storeId:"mybookingstoreid",
        model:"MyBookingModel",
        sorters:"date",
        grouper:{
            groupFn:function(record)
            {

                return "<div class='daysort'>"+record.get("day") + "</div><div class='datesort'>" +record.get('date')+"</div>";
            }
        },
        data:[
        {day:"Tue",date:"22 Jan 2013",time:"All Day",deskNo:"Desk 123",location:"Floor 10, Canary Wharf",group:"Marketing"},
        {day:"Wed",date:"23 Jan 2013",time:"AM",deskNo:"Desk 80",location:"Floor 10, Canary Wharf",group:"Marketing"},
        {day:"Wed",date:"23 Jan 2013",time:"PM",deskNo:"Desk 84",location:"Floor 10, Canary Wharf",group:"Marketing"},
        {day:"Thu",date:"24 Jan 2013",time:"AM",deskNo:"Desk 12",location:"Floor 10, Canary Wharf",group:"Marketing"},
        {day:"Thu",date:"24 Jan 2013",time:"PM",deskNo:"Desk 123",location:"Floor 10, Canary Wharf",group:"Marketing"}
        ]
    }
});

列表视图组件

var listView = {
            xtype:"list",
            useComponents:true,
            selectedCls:'',
            cls:'mybookings-listview',
            id:'mybookings-listview-id',
            defaults:"bookinglistitem",
            // itemTpl:"<div class='booking-list'><div class='booking-time'>{time}</div><div class='booking-details'><div class='booking-desk'>{deskNo}</div><div class='booking-location'>{location}</div><div class='booking-group'>{group}</div></div></div>",
            store:'mybookingstoreid',
            grouped:true,
            flex:2
        };

问题是项目不可见。
有人可以告诉我我在做什么错吗？

谢谢
Ĵ

最佳答案

终于让它起作用了。
一个小的错字..现在它可以正常工作。

var listView = {
            xtype:"list",
            useComponents:true,
            selectedCls:'',
            cls:'mybookings-listview',
            id:'mybookings-listview-id',
            defaultType:"bookinglistitem",
            // itemTpl:"<div class='booking-list'><div class='booking-time'>{time}</div><div class='booking-details'><div class='booking-desk'>{deskNo}</div><div class='booking-location'>{location}</div><div class='booking-group'>{group}</div></div></div>",
            store:'mybookingstoreid',
            grouped:true,
            flex:2
        };