PDA

View Full Version : Dataview as nestedlist item



blessan
10 Aug 2010, 4:52 AM
I tried putting a dataview as an item to the nested list. It worked.
Heres the code



var apptStore = new Ext.data.ArrayStore({
proxy : new Ext.data.MemoryProxy(),
fields : ['clientName', 'apptTime', 'service', 'apptText']
});
var data = localStorage.getItem('apptList5');
apptStore.loadData(eval(data));

var dummyList = new Ext.NestedList({
cls:'apptList',
style:'background-color:white;',
items: new Ext.DataView({
store : apptStore,
scroll:false,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="apptListItem">',
'<div class="ticketList">',
'<p class="ticketListName">{clientName}<span>{apptTime}</span></p>',
'<p>{service}</p>',
'<p class="apptLongText">Power is perishable, and when politicians exit the stage, it often doesn\'t take long -- especially in Washington -- for their importance to be only vaguely recollected.</p>',
'</div>',
'</div>',
'</tpl>'),
overClass : 'x-view-over',
itemSelector : 'div.apptListItem',
emptyText : 'No images to display',
listeners: {
"itemTap":function(dataview, index, item, evt) {
dummyList.setCard(dummyList2,"slide");
}
}
})


Now I have another group of items I want to show when a user taps on the dataview row.

The next list of items code is



var dummyList2 = [
{
xtype:'panel',
cls:'checkoutButtons',
items:[
{
xtype: 'panel',
cls:'openNestedListItem',
html:'<div style="width:185px;padding:10px 0 10px 0;">'+
'<div style="display:inline-block">'+
'<img src="resources/img/Angela.jpg" width="32px" height="32px"/>'+
'</div>'+
'<div style="padding-left:10px;display:inline-block;text-align:left;">'+
'<p style="font-size:12px;">Anjela Cox</p>'+
'<p style="font-size:12px;">(212) 555-0000</p>'+
'<p style="font-size:12px;">angelacox@ymail.com</p>'+
'</div>'+
'</div>',
items:[
{
xtype: 'button',
style:'float:right;margin-top:19px;font-size:12px;',
cls:'checkoutButton',
text: 'Check-In',
handler: function() {
}
}
]
}
]

},
{
xtype:'panel',
cls:'checkoutButtons',
items:[
{
xtype: 'panel',
cls:'openNestedListItem',
html:'<div style="width:320px;padding:10px 0 10px 10px;text-align:left;">'+
'<div>'+
'<p style="font-size:12px;">Women\'s Hair Cut</p>'+
'<p style="font-size:12px;">Sunday July 6 @11:00 AM</p>'+
'<p style="font-size:12px;">angelacox@ymail.com</p>'+
'</div>'+
'</div>',
items:[
{
xtype: 'button',
style:'float:right;margin-top:19px;font-size:12px;',
cls:'checkoutButton',
text: 'Edit',
handler: function() {
}
}
]
}
]

}
];


When I tap on a row and use the line
dummyList.setCard(dummyList2,"slide");

I get the error
TypeError: Cannot read property 'events' of undefined

When I try to set the items config option of the dataview,
it renders along with the dataview in the first list.

How can get this done right? Please help. This is fairly complex for me.

evant
10 Aug 2010, 5:50 AM
You should try and become familiar with the debugger. Set it to break on all errors and follow the stack trace.

blessan
10 Aug 2010, 7:41 PM
Ok Ill try to get it to work. Is dataview a vaible option as an item to nestedlist. I mean how do I set and inner item to each row of the dataview.