我正在尝试开发要在我的应用程序中使用的自定义数据项，但该数据项没有加载到我的列表视图中。以下是参考代码：
内部项目代码
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
};
问题是项目不可见。有人可以告诉我我做错了什么吗？
谢谢J