1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    1
    revmakx is on a distinguished road

      0  

    Default Answered: Separate functionality for disclosure and normal list

    Answered: Separate functionality for disclosure and normal list


    {
    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

  2. 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:

    Code:
    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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,219
    Answers
    3521
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    1
    revmakx is on a distinguished road

      1  

    Default


    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



  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    goverdhan is on a distinguished road

      0  

    Default


    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

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    10
    Vote Rating
    0
    goverdhan is on a distinguished road

      0  

    Default


    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!!!

Thread Participants: 2