PDA

View Full Version : How many levels can the item tap event handle?



ClintPick
26 Jul 2010, 10:23 AM
The code below shows how to add tap event to a list. I would like to know if it would be possible to add a third level i.e. a second itemtap event to "var detail". If it's possible how could it be done? Also, is it a good idea in terms of resources, to implement a navigation using tap event?

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,

store: new Ext.data.Store({
model: 'Contact',

getGroupString: function(record){
return record.get('firstName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz'
}, {
firstName: 'Ed',
lastName: 'Spencer'
}, {
firstName: 'Jamie',
lastName: 'Avins'
}, {
firstName: 'Aaron',
lastName: 'Conran'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
main.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName')
});
}
}
});

var detail = new Ext.Panel({
tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}</tpl>',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Back',
handler: function(){
main.setCard(0);
}
}]
}],
});

var main = new Ext.Container({
fullscreen: true,
layout: 'card',
items:
[list, detail]
}).show();
}
});

evant
26 Jul 2010, 4:28 PM
Detail doesn't have an itemtap event, because it's not a list. In this case though, why would you want an item tap, since there's only ever going to be one item. You can simplify your template:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,

store: new Ext.data.Store({
model: 'Contact',

getGroupString: function(record){
return record.get('firstName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz'
}, {
firstName: 'Ed',
lastName: 'Spencer'
}, {
firstName: 'Jamie',
lastName: 'Avins'
}, {
firstName: 'Aaron',
lastName: 'Conran'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
main.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName')
});
}
}
});

var detail = new Ext.Panel({
tpl: 'First: {firstName}<br />Last: {lastName}',
listeners: {
afterrender: function(c){
c.body.on('tap', function(){
alert('Third level. Perhaps an underwater level?');
});
}
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Back',
handler: function(){
main.setCard(0);
}
}]
}],
});

var main = new Ext.Container({
fullscreen: true,
layout: 'card',
items: [list, detail]
}).show();
}
});

ClintPick
27 Jul 2010, 7:07 AM
I'm sorry. i guess I phrased my question improperly. What i basically wanted to find out was whether it would be possible to have a second list in detail and then have a another list once an item is selected and then have a detail card once an item in that list is clicked. If not what would be the best way to implement such behaviour. A nested list that links to a json store would be ideal.

sort of like:

item list->select item1->item 1 list -> item 1 list item detail