PDA

View Full Version : NestedList cancel itemtap event not working...



jaypompano
28 Jan 2011, 12:51 PM
Trying to cancel the itemtap event when leafitemtap fires, but it is not working.




var findPanel = new Ext.form.FormPanel({
items: []

var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Simple Query',
displayField: 'text',
store: store
});

nestedList.on('leafitemtap', function (subList, subIndex, el, e, card) {
//nestedList.suspendEvents(false);
//e.suspendEvents(false);
nestedList.suspendEvents(false);
iFortisBlue.Documents.GetQuickfindDocuments(subList, subIndex, el, e, card);
Ext.getCmp('bottomTabPanel').setActiveItem(1);
});

nestedList.on('itemtap', function (list, index, item, e) {
iFortisBlue.Find.DatabaseID = list.store.data.keys[1]; //databaseid...
});

findPanel.add(nestedList);
findPanel.doLayout();



I keep getting my databaseid variable overwritten because both the leafitemtap and itemtap event fires at the end and I don't want the itemtap event to fire.

Am I doing this wrong?

AndreaCammarata
29 Jan 2011, 1:39 AM
Hi joypompano.
Why don't you manage everything with only the "itemtap" public event in this way



var nestedList = new Ext.NestedList({
fullscreen: true,
store: store,
title: 'Simple Query',
displayField: 'text',
listeners: {
itemtap: function(list, index, item, e) {

//Let's get the data record associated to selected item
var record = list.getStore().getAt(index).data;

//Selected item is a leaf...
if(record.leaf){

console.info('LEAF');

//Selected item is not a leaft...
}else{

console.info('NO LEAF');

}

}
}
});


Obvisuolt replace console.info according to your needs.
I post you a full example that use the same data of kitchensink example.



Ext.setup({
onReady: function() {

var data = [{
text: 'User Interface',
cls: 'launchscreen',
items: [{
text: 'Buttons',
leaf: true
},
{
text: 'Forms',
leaf: true
},
{
text: 'List',
leaf: true
},
{
text: 'Nested List',
leaf: true
},
{
text: 'Icons',
leaf: true
},
{
text: 'Toolbars',
leaf: true
},
{
text: 'Carousel',
leaf: true
},
{
text: 'Tabs',
leaf: true
},
{
text: 'Bottom Tabs',
leaf: true
},
{
text: 'Map',
leaf: true
},
{
text: 'Overlays',
leaf: true
}]
},
{
text: 'Animations',
items: [{
text: 'Slide',
preventHide: true,
cardSwitchAnimation: 'slide',
leaf: true
},
{
text: 'Slide (cover)',
preventHide: true,
cardSwitchAnimation: {
type: 'slide',
cover: true
},
leaf: true
},
{
text: 'Slide (reveal)',
preventHide: true,
cardSwitchAnimation: {
type: 'slide',
reveal: true
},
leaf: true
},
{
text: 'Pop',
preventHide: true,
cardSwitchAnimation: {
type: 'pop',
scaleOnExit: true
},
leaf: true
},
{
text: 'Fade',
preventHide: true,
cardSwitchAnimation: {
type: 'fade',
duration: 600
},
leaf: true
},
{
text: 'Flip',
preventHide: true,
cardSwitchAnimation: {
type: 'flip',
duration: 400
},
leaf: true
},
{
text: 'Cube',
preventHide: true,
cardSwitchAnimation: {
type: 'cube',
duration: 400
},
leaf: true
}]
},
{
text: 'Touch Events',
leaf: true
},
{
text: 'Data',
items: [
{
text: 'Nested Loading',
leaf: true
},
{
text: 'JSON P',
leaf: true
},
{
text: 'YQL',
leaf: true
},
{
text: 'AJAX',
leaf: true
}
]
},
{
text: 'Media',
items: [{
text: 'Video',
leaf: true
}, {
text: 'Audio',
leaf: true
}]
}
];

Ext.regModel('Demo', {
fields: [
{name: 'text', type: 'string'},
{name: 'source', type: 'string'},
{name: 'preventHide', type: 'boolean'},
{name: 'cardSwitchAnimation'},
{name: 'card'}
]
});

var structureStore = new Ext.data.TreeStore({
model: 'Demo',
root: {
items: data
},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});


var list = new Ext.NestedList({
fullscreen: true,
store: structureStore,
itemTpl: '{text}',
listeners: {
itemtap: function(list, index, item, e) {

//Let's get the data record associated to selected item
var record = list.getStore().getAt(index).data;

//Selected item is a leaf...
if(record.leaf){

console.info('LEAF');

//Selected item is not a leaft...
}else{

console.info('NO LEAF');

}

}
}
});
}
});


Hope this helps.