Separate functionality for disclosure and normal list

[revmakx]

{
xtype: 'nestedlist',
title: 'Category',
iconCls: 'star',
cls: 'blog',
layout: 'card',
displayField: 'title',
preventSelectionOnDisclose:true,
onItemDisclosure: function(record, btn, index) {
Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('title'), Ext.emptyFn);
test=1;
},
store: Ext.create('Ext.data.TreeStore', {
fields: ['title', 'text'],

root: {},
proxy: {
type: 'ajax',
url: 'blog.json'
}
}),


//when a leaf node is tapped on this function is called. Whatever we return is shown on the page
//here we show a page containing the blog post's text

getDetailCard: function(node) {
if(test==1)
alert(test);
if (node) {
return {
xtype: 'panel',
scrollable: true,
html: node.get('text')
};
}
if(test>0)
{
test=0;
}
}
},

I tried the above code. But when the disclosure was clicked it still moved to the node as a normal list. I tried googling and found this

listeners : {
itemtap: function(subList, subIdx, el, e){

if (e.getTarget().className == 'x-list-disclosure') {
alert(e.getTarget().className);
} else {
// do whatever you want
alert(e.getTarget().className);
} }

but it alerts the top class instead of x-list-disclosure. Any help?

I need to achieve two different events for disclosure and the list.

Thanks
David

[mitchellsimoens]

So both the onItemDisclosure and itemtap events are going to fire when you tap on the disclosure icon which both arguments can be made that this should happen or not. I would side on that I would want them to fire. What I would do is test what element was tapped on in the itemtap event since the onItemDisclosure is only going to fire if you tapped on the disclosure icon. Here is a listener that you can test:

itemtap: function(list, index, target, e) {
    if (!e.getTarget('div.x-list-disclosure')) {
        //code here
    }
}

The getTarget method will check to see if the tap happened on the CSS selector you past it... in this case we want to check to see if the tap happened on 'div.x-list-disclosure'. If it was then it will return an HtmlElement, if it wasn't then it will return null.

[revmakx]

Yup, Figured it out. I was trying

e.getTarget().className == 'x-list-disclosure'

instead of e.getTarget('div.x-list-disclosure')

Thanks for the help. I am loving Sencha and its forum.

Thanks
David

[goverdhan]

hi,
I need sencha touch lists with different disclosure icons(other than 'disclosure.png').Can anyone help me to get more than two such lists with different disclosures...I have already tried it by assigning the property
"-webkit-mask: 0 0 url('src/delete.png') no-repeat;" in "x-list .x-list-item-disclosure"
But this is going to change all my lists with the icon "delete.png".
Either a common css fileswith different "lists" or different css files will do.But the problem is "how to give the class property to the list disclosures?" A sample code will be a great help.
Thanks

[goverdhan]

hi,
I need more than 2 sencha touch lists each with a different disclosure icon.
Editing the css file at
x-list .x-list-item-disclosure1
{
overflow: visible;
-webkit-mask: 0 0 url('src/delete.png') no-repeat;
...............}
will change all list icons. But i need a different icon for each list.
I guess either a "css file with different list classes" will do or "different css files" will.
But the problem i am facing is
How to assign the classes to sencha lists for the disclosure icons?
A sample code will be a great help.
Thanks!!!