PDA

View Full Version : change onItemDisclosure to itemtap...



GertBoers
15 Sep 2011, 11:34 PM
I'm trying to change the following list:


KadanzaDemo.views.teamList = new Ext.List({
id: 'disclosurelist',
store: KadanzaDemo.teamStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>'+'<div class="function">{functie}</div>',
grouped: true,

indexBar: true,
onItemDisclosure: function(record) {
var name = record.data.firstName + " " + record.data.lastName;
KadanzaDemo.detailToolbar.setTitle(name); //zet var naam in toolbar
KadanzaDemo.views.teamDetails.update(record.data); //rendert de detailtpl
KadanzaDemo.views.team.setActiveItem('teamdetails'); //springt naar detailcard
}
});

It works. It goes to a detailpanel when i tap the arrow.
Now I want to work whenever someone taps the item itself (not the arrow), the arrows can disappear, but i might want some sort of icon at the right of the item though (maybe a greather than sign or something).
I changed it to this, but now it doesn't work anymore (TypeError: 'undefined' is not an object (evaluating 'record.data.firstName'):


KadanzaDemo.views.teamList = new Ext.List({
id: 'disclosurelist',
store: KadanzaDemo.teamStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>'+'<div class="function">{functie}</div>',
grouped: true,

indexBar: true,
listeners:{
itemtap: function(record) {
var name = record.data.firstName + " " + record.data.lastName;
KadanzaDemo.detailToolbar.setTitle(name); //zet var naam in toolbar
KadanzaDemo.views.teamDetails.update(record.data); //rendert de detailtpl
KadanzaDemo.views.team.setActiveItem('teamdetails'); //springt naar detailcard
}

}


});

I must be making a(nother) small mistake i think.
Thx.

stefanlaketa
15 Sep 2011, 11:54 PM
I do it like this: (I have omitted quite a lot of code, but I hope you understand what I've done.)



MyApp.View = Ext.extend(Ext.Panel, {

layout: ,
id: ,

initComponent: function() {





this.theList = new Ext.List({

itemTpl: ,
store: ,
grouped: ,
onItemDisclosure: true,
listeners: {

scope: this,
itemtap: this.onItemTap,
disclose: this.onItemTap

}


});

this.items = [this.theList];




},



onItemTap: function() {



}
});

GertBoers
16 Sep 2011, 1:30 AM
I've tried it your way, but it doesn't seem to work... The problem lies in my function apparently.

This works:


listeners:{
itemtap:function(record) {
KadanzaDemo.views.team.setActiveItem('teamdetails');
}


but when i change it to this, it stops working. It did work when i used onItemDisclosure so why won't it work now?

This is the non-working code:


listeners:{
itemtap:function(record) {
var name = record.data.firstName + " " + record.data.lastName;
KadanzaDemo.detailToolbar.setTitle(name);
KadanzaDemo.views.teamDetails.update(record.data);
KadanzaDemo.views.team.setActiveItem('teamdetails');
}


TypeError: 'undefined' is not an object (evaluating 'record.data.firstName')

stefanlaketa
16 Sep 2011, 3:05 AM
The itemtap function should have more ingoing parameters. Try itemtap: function(list, index, item e) {}

GertBoers
16 Sep 2011, 5:41 AM
that doesn't change anything... the function always stops as soon as it reaches record.data.firstName, because it doesn't know where to find this data i think. But I really don't know why this doesn't create a problem when i use onItemDisclosure.

Maybe we can work around it by telling it to run the onItemDisclosure function when the item is tapped?

stefanlaketa
16 Sep 2011, 6:49 AM
According to the API docs, the disclose event for a List has the following parameters:
( Ext.data.Record record, Ext.Element node, Number index, Ext.util.Event e )
and the itemtap event has:
( Ext.DataView this, Number index, Ext.Element item, Ext.EventObject e )
That means that they behave differently.
And upon further reading the docs for DataView it says:

In order to use these features, an itemSelector (http://dev.sencha.com/deploy/touch/docs/output/Ext.DataView.html#Ext.DataView-itemSelector) config must be provided for the DataView to determine what nodes it will be working with.
So I believe you must supply the itemtap event with everything, not just the record.

GertBoers
16 Sep 2011, 7:28 AM
You are absolutely right, but my knowledge of JavaScript is rather limited, so my (probably not so logical) brain tells me to do this:


itemtap: function(this, index, ietem, e) { var name = this.data.firstName + " " + this.data.lastName;
KadanzaDemo.detailToolbar.setTitle(name); //zet var naam in toolbar
KadanzaDemo.views.teamDetails.update(this.data); //rendert de detailtpl
KadanzaDemo.views.team.setActiveItem('teamdetails'); //springt naar detailcard
}

But then i get a syntax error. I should do something with the DataView, but where? and what?
the link you provide is a bit too difficult for me i'm afraid.

By the way: this is the store I'm using:


KadanzaDemo.teamStore = new Ext.data.Store({ model: 'Contact',
sorters: 'lastName',
getGroupString : function(record) { //om te grouperen op laatste naam
return record.get('lastName')[0];
},
data: [
{ firstName: "Gert", lastName: "Boers", },
....

]
});

NickT
16 Sep 2011, 8:36 AM
in your function signiture, dont use 'this' as a variable. that is a reserved word. use something else, like dView, in your case. also, you have the item so there is no need to use the data view variable to then attempt to acquire the particular item that you clicked on. you should be able to directly use the item that has been clicked. Not 100% sure what item looks like within the function, it may be the html element. if so, you can use the dView and obtain the particular data record using the index provided...


itemtap: function(dView, index, item, e) { var name = item.firstName + " " + item.lastName;
KadanzaDemo.detailToolbar.setTitle(name); //zet var naam in toolbar
KadanzaDemo.views.teamDetails.update(this.data); //rendert de detailtpl
KadanzaDemo.views.team.setActiveItem('teamdetails'); //springt naar detailcard
},

GertBoers
19 Sep 2011, 3:07 AM
Allright, i tried:

itemtap: function(dView, index, item, e) {
var name = item.firstName + " " + item.lastName;
KadanzaDemo.detailToolbar.setTitle(name);
KadanzaDemo.views.teamDetails.update(this.data);
KadanzaDemo.views.team.setActiveItem('teamdetails');
}

No more errors, but when i click an item and go to the 'teamdetails', the setTitle and the update didn't really work.
My toolbar says: undefined undefined in stead of firstname lastname.
The tpl is rendered but none of the parameters are filled in.

so i'm guessing item.firstName and ...update(this.data) should be something else?

Thx!

jason402
19 Sep 2011, 8:30 AM
I'm not sure about the 'update' portion, but this is what I do for the name:

var rec = list.getStore().getAt(index);
var name = rec.data.firstName + " " + rec.data.lastName;

I believe you would use dView instead of list though.

GertBoers
19 Sep 2011, 11:25 PM
Yes!

thanks a lot... It works now.
This is my final code:



listeners:{ itemtap: function(list, index, item, e) {
var rec = list.getStore().getAt(index);
var name = rec.data.firstName + " " + rec.data.lastName;
KadanzaDemo.detailToolbar.setTitle(name);
KadanzaDemo.views.teamDetails.update(rec.data);
KadanzaDemo.views.team.setActiveItem('teamdetails');
}

}