Results 1 to 4 of 4

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

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    149
    Answers
    5
    Vote Rating
    7
      0  

    Default 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
      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
    149
    Answers
    5
    Vote Rating
    7
      0  

    Default 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
      0  

    Default 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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •