1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
    MikeTorra is on a distinguished road

      0  

    Default Modifying disclosure button in list item

    Modifying disclosure button in list item


    Hello,

    I am trying to modify the disclosure button on a list item, specifically its position. Is there a way to do this with CSS? Ideally I would like to use a custom image for the disclosure... Any insight?

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Location
    Switzerland
    Posts
    78
    Vote Rating
    0
    fx-mike is on a distinguished road

      0  

    Default


    Just override the css.
    I did it by putting something like this in my css file:
    Code:
    .x-disclosure {
    	height: 24px;
    	width: 24px;
    	-webkit-mask-box-image: url('data:image/png;base64,iVB...); //shortened for readability
    }
    Modify the position in the same manner as shown above.
    Last edited by fx-mike; 4 Oct 2010 at 8:07 AM. Reason: formatting was ugly

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
    MikeTorra is on a distinguished road

      0  

    Default thanks

    thanks


    Thanks! Exactly what I needed.

  4. #4
    Ext User
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
    MikeTorra is on a distinguished road

      0  

    Default change image

    change image


    Is there a way to change the image without using base64?

  5. #5
    Ext User
    Join Date
    Aug 2010
    Location
    Rome, Italy
    Posts
    50
    Vote Rating
    0
    lteti77 is on a distinguished road

      0  

    Default


    I have a similar problem. But i would like to set the disclosure indicator similar to the one used by the SDK (ie. UITV_accessory_disclosure.png for next level and UITV_accessory_detail.pngfor details).
    I would like to define .x-disclosure1 {} and .x-disclosure2 {} in css and set these classes to my list items.

    How can i set the disclosure css class by javascript? can i use one of the config property of list object?

    Thanks..

  6. #6
    Ext User
    Join Date
    Aug 2010
    Location
    Rome, Italy
    Posts
    50
    Vote Rating
    0
    lteti77 is on a distinguished road

      0  

    Default


    i tried to use this code but i have a blue square box... what's the reason for this strange display?

  7. #7
    Ext User
    Join Date
    Aug 2010
    Location
    Rome, Italy
    Posts
    50
    Vote Rating
    0
    lteti77 is on a distinguished road

      0  

    Default


    i found the solution... the problem was the image size. i tried to use an image bigger than 24px and so only a part of it was displayed...
    using a resized image now works..

  8. #8
    Ext User
    Join Date
    Sep 2010
    Posts
    73
    Vote Rating
    0
    lukesayaw is on a distinguished road

      0  

    Default


    Hi,

    I wonder if I can use the image url like ---webkit-mask-box-image: url(urlpath) as I would like to use my own image for the disclosure?

    many thanks

  9. #9
    Sencha User
    Join Date
    Jul 2010
    Location
    Switzerland
    Posts
    78
    Vote Rating
    0
    fx-mike is on a distinguished road

      0  

    Default


    Sure, thats what url() is for. But as far as I know the path will be relative to your css file, so watch out for that.

  10. #10
    Touch Premium Member
    Join Date
    May 2011
    Posts
    24
    Vote Rating
    0
    jnw is on a distinguished road

      0  

    Default


    Is this still the way to modify the list item disclosure icon in 1.1.0? It's not working for me.

    Code:
    .x-disclosure {
        height: 24px;
        width: 24px;
        -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEU..blah..blah..blah');
    }
    Thanks.

Similar Threads

  1. disclosure and itemtap on list
    By stefx in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 2 Sep 2011, 4:23 AM
  2. [SOLVED] Problem with List Disclosure
    By unpurposed in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 11 Aug 2010, 6:18 AM
  3. a button in the list item, is it possible?
    By abe8810 in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 5 Oct 2007, 8:26 AM

Thread Participants: 5