1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    139
    Answers
    5
    Vote Rating
    6
    drb is on a distinguished road

      0  

    Default Answered: How do I disable a List or NestedList item?

    Answered: How do I disable a List or NestedList item?


    I have a List and would like to disable or enable items individually.

    This would mean that the item cannot be tapped and that it's contents show with opacity less than 1.

    Thanks
    David

  2. Yes, this is more or less what I came up with. I was hoping there was a simpler solution.

    For opacity, I created a itemTpl with <tpl> in it to wrap the template in a <div> with opacity: 0.4 if the item is not selectable.

    For more sophisticated control, one could put a class in the <div> and use CSS to style the opacity, background color, etc.

  3. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5
    Vote Rating
    5
    lgertel is on a distinguished road

      1  

    Default


    Here we go:

    Code:
    var myList =Ext.create('Ext.List',{
                        fullscreen:true,
                        items:[{
                            xtype:'titlebar',
                            docked:'top',
                            ui:'neutral'
                        }],
                        store:{
                            fields:['name','selectable'],
                            data:[{
                                name:'Red'
                            },{
                                name:'Orange'
                            },{
                                name:'Yellow',
                                selectable:true
                            },{
                                name:'Green (unselectable)',
                                selectable:false
                            },{
                                name:'Blue'
                            }]
                        },
                        itemTpl:'{name}',
                        listeners:{
                            select:function(list, model){
                                var value = model.get('name');
                                if(model.get('selectable')===false){
                                    list.deselect(model);
                                    returnfalse;
                                }
                                this.down('titlebar').setTitle(value);
                            }
                        }
                    });

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    139
    Answers
    5
    Vote Rating
    6
    drb is on a distinguished road

      0  

    Default How to handle Opacity

    How to handle Opacity


    Yes, this is more or less what I came up with. I was hoping there was a simpler solution.

    For opacity, I created a itemTpl with <tpl> in it to wrap the template in a <div> with opacity: 0.4 if the item is not selectable.

    For more sophisticated control, one could put a class in the <div> and use CSS to style the opacity, background color, etc.

  5. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    5
    Vote Rating
    1
    markevans is on a distinguished road

      0  

    Default Doesn't that solution fire after an item is selected?

    Doesn't that solution fire after an item is selected?


    Confused by proposed solution (and I'm trying to do the same thing, I think.) The disable action is inside a "select" listener on the list. Won't this disable an item that is "selected", after it is selected? Am I missing something?

    Thanks,

    Mark

    p.s. I get it now. It prevents selection. Never mind.
    Last edited by markevans; 14 Feb 2013 at 10:52 AM. Reason: Silliness.

Thread Participants: 2

Tags for this Thread