PDA

View Full Version : Disclosure icon



jjfortuin
26 Oct 2010, 5:29 PM
somehow I can't figure this one out, maybe it's not possible or changed in Sencha 0.97. I would like to change the "disclosure" icon. Back in August I replied to a post, to change the icon in tabbar, that worked, however this solution doesn't work now...
This was the post:
http://www.sencha.com/forum/showthread.php?104605-Custom-icon-in-TabPanel-button&highlight=iconCls

can somebody tell me if it's NOT possible to change the disclosure icon, or it has to be done a different way than the tabbar icon.

Thanks,

J.J.

evant
26 Oct 2010, 5:34 PM
Same as any other icon, it uses x-disclosure to style.

jjfortuin
26 Oct 2010, 5:47 PM
Hi Evant, I tried that, but it leaves the "old" icon in place and puts the new one on top...
this is (part of) the code:
"index.js"
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,
grouped: false, //* adds vertical a-z *//
indexBar: false, //* add horizontal letter bar *//

disclosure: {
scope: 'test',
iconCls: 'add',
handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('firstName'));
}
},

store: new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',

getGroupString : function(record) {
return record.get('firstName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'
etc..

with a custom css file with:
.x-list .x-list-group-items > *, .x-list.x-list-flat .x-list-parent > * {
position: relative;
text-align: left;
color: black;
border-top: 1px solid white;
border-bottom: 1px solid #eaeaea;
padding: .8em; }

.x-list .x-disclosure {
-webkit-mask-box-image: url('../img/add.png');
}

jjfortuin
26 Oct 2010, 6:04 PM
thanks for that, but the new icon on top of the old one... I guess I"m missing something. Do i use iconCls or baseCls here?

jjfortuin
26 Oct 2010, 6:07 PM
this is in my css file:
.x-list .x-list-group-items > *, .x-list.x-list-flat .x-list-parent > * {
position: relative;
text-align: left;
color: black;
border-top: 1px solid white;
border-bottom: 1px solid #eaeaea;
padding: .8em; }

.x-disclosure {
-webkit-mask-box-image: url('../img/add.png');
}

jjfortuin
26 Oct 2010, 6:28 PM
Evant, I made 2 test cases... one for 0.93 (works) 0.97 (doesn't work...) any ideas ?

jjfortuin
27 Oct 2010, 3:08 PM
Sorry Evant, got it... something in the style sheets changed with the 0.97 version, I copied the "whole" style and only changed the icon path. That worked... thanks anyway. :)

macap
9 Feb 2011, 6:27 AM
Hi,

I have a similar problem.

I want a different disclosure button too.
But only at one special List. Your solutions seems to change all disclosure icons in the whole app.

Any ideas?

Regards,
Martin

jjfortuin
9 Feb 2011, 12:09 PM
Hi, I believe there's only "one" disclosure icon. I changed the css style sheet, that made it work. However, you might be able to create a new class name for that list. Haven't tried it though...

brink
2 Mar 2012, 11:29 AM
Using SASS, e.g.

set itemCls: 'removable-item'

in lib/sencha-touch/resources/sass/sencha-touch.css put something like


.removable-item .x-list-disclosure {
-webkit-mask: 0 0 theme_image($theme-name, "pictos/minus_black1.png") no-repeat;
-webkit-mask-size: $list-disclosure-size;
}

Compile your code and you're good to go

I was attempting to write it more cleanly using mixins but apparently I don't know what I'm doing there :)