PDA

View Full Version : getGroupString property with HTML?



rballman
3 Feb 2011, 5:22 PM
I have a question relating to the getGroupString property when using a grouped list. Is there a way to inject HTML into it? I would like to have text on the left-hand side as well as the right.

gcallaghan
3 Feb 2011, 5:55 PM
The method simply returns a string. Therefore, html is no problem.



getGroupString:function(record){
return '<div class="left">Some Left text</div>'+
record.get('groupField') +
'<div class="right">Some Right Text</div>';
}

rballman
3 Feb 2011, 5:59 PM
Hmm I tried that earlier and it messed up the list's layout. I'll give it another shot.

Maybe my float: left/right is what it didnt like.

gcallaghan
3 Feb 2011, 7:55 PM
Ah, layout is a different matter. Sencha Touch doesn't use float methods. it uses the css3 box model. You need to do something like...



<div style="display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-pack:justify;">
<div class="left"><some text</div>
<<groupString>>
<div class="right">some text</div>
</div>


google css3 box layout for mor info

rballman
3 Feb 2011, 8:37 PM
I think the quotes in the string is what messes up the layout.

The following didnt mess up the layout:


getGroupString : function(record) {
return '<div>' + record.get('date') + '</div>';
}


However the following did:


getGroupString : function(record) {
return '<div class="d">' + record.get('date') + '</div>';
}

gcallaghan
3 Feb 2011, 8:42 PM
was your css for div.d floated? I know I had trouble when I attempted to float things.
I had to use the css3 box layout when I wanted to have something justified left and justified right within a list.

I would be very surprised if it was actually the quotes. but I have been wrong before ;)

rballman
3 Feb 2011, 8:52 PM
nope it wasnt floated. in fact, I didnt even create a div.d in the CSS. I just wanted to test the quotes :)

rballman
3 Feb 2011, 10:17 PM
Well, by switching the single and double quotes around it accepted my HTML code:



return "<div class='d'>" + record.get('date') + "</div>";

gcallaghan
4 Feb 2011, 11:45 AM
Look at that. you were 100% right. I just ran into the same thing and found a solution similar to yours. Sure am glad you helped me banish my ignorance. This should definitely be reported as a bug.

I used


'<div class=\'content\'>',