Ext.List - CSS issue.

[lgertel]

Hello everyone.

I'm with an issue that seems simple, but after a lot of tries without success I'm posting here.
I have one Ext.List, with a specific cls class defined inside of it.

All that i need is, that for this list and this list only, my height for each row will be pre-defined on my app.scss.

Here is the code:

Ext.define('abras.view.extra.List', {


    extend: 'Ext.List',
    xtype: 'extraList',


    requires: 'Ext.data.Store',


    config: {
        title: 'Outras Informações',
        cls: 'extra',


        itemTpl: [ 
            '<div id="extra">',
            '    <div id="extraLogo">',
               '        <img src="resources/images/{icon}" />',
            '    </div>',
            '    <div id="extraDescription">',
            '        <ul>',
            '            <li><h1>{title}</h1></li>',
            '            <li>{subTitle}</li>',
            '        </ul>',
            '    </div>',
            '</div>'
        ]
        
        
    },


    initialize: function() {
        this.callParent();
        this.setData(abras.app.extraPages);
    }
});

And my SASS:

.extraList .x-list .x-list-item {
    min-height: 6.0em !important;
}


#extra {
    float: left;
    width: 100%;
}


#extraLogo {
    float: left;
    width: 40px;


    img {
        vertical-align:middle;
        width:32px;
        height:32px;
    }
}


#extraDescription {
    float: left;


    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;


        li {
            font-size: 60%;
            color: #999;


            h1 {
                font-size: 120%;
                color: black;
                margin: 0;
                padding: 0;
            }
        }
    }
}

I really don't know how to make this work, it seems correct for me.

Thanks,
Lucas

[pepperseb]

Have you tried

.extra .x-list .x-list-item {   
 min-height: 6.0em !important;
}

instead of

.extraList .x-list .x-list-item {    
min-height: 6.0em !important;
}

?

[lgertel]

I saw the tipo, but still doesn't work:

.extra .x-list .x-list-item {   
    min-height: 6.0em !important;
}


#extra {
    float: left;
    width: 100%;
}


#extraLogo {
    float: left;
    width: 40px;


    img {
        vertical-align:middle;
        width:32px;
        height:32px;
    }
}


#extraDescription {
    float: left;


    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;


        li {
            font-size: 60%;
            color: #999;


            h1 {
                font-size: 120%;
                color: black;
                margin: 0;
                padding: 0;
            }
        }
    }
}

Ext.define('abras.view.extra.List', {


	extend: 'Ext.List',
	xtype: 'extraList',


	requires: 'Ext.data.Store',


	config: {
		title: 'Outras Informações',
		cls: 'extra',


		itemTpl: [ 
			'<div id="extra">',
			'	<div id="extraLogo">',
		   	'		<img src="resources/images/{icon}" />',
		    '	</div>',
		    '	<div id="extraDescription">',
		    '		<ul>',
		    '			<li><h1>{title}</h1></li>',
		    '			<li>{subTitle}</li>',
		    '		</ul>',
		    '	</div>',
			'</div>'
		]
		
		
	},


	initialize: function() {
		this.callParent();
		this.setData(abras.app.extraPages);
	}
});

I'm getting crazy with this one.
Thanks!

[lgertel]

The problem is on x-list

I have changed to

.extra {
    .x-list {
        min-height: 6.0em !important;
    }


    .x-list-item {   
        min-height: 6.0em !important;
    }
}

Now the layout has the right size, but the x-list isn't.
I can see that on list selection, it only highlight the default height size.

Any idea?

[lgertel]

Done!

The property is not x-list!
x-list is the entire component, i have changed the list-label and now works!

.extra {
    .x-list-item .x-list-item-label {   
        min-height: 6.0em !important;
    }
}