PDA

View Full Version : What changed in list item templates in 0.96?



jacstofberg
30 Sep 2010, 9:24 PM
Hi there,

I downloaded the 0.96 release recently and fired up my application. My list templates are suddenly all messed up. I've searched around a little, but could not find if anything had changed for list item templates. The text and images in each of the list items run over one another.

Here is a sample of the simplest of my list item templates that used to work in 0.95:



Nmi.views.MainMenuList = Ext.extend(Ext.List, {
tpl: '<tpl for="."><div class="menuitem"><table><td width="105"><img src="./resources/images/{image}" width="90" /></td><td>{title}</td></table></div></tpl>',
itemSelector: 'div.menuitem',
singleSelect: true,
scroll:true,
layout: 'fit',
initComponent: function() {


Any advise duly appreciated.

Kind regards,
Jac

jep
30 Sep 2010, 9:38 PM
I believe you need to remove the layout:'fit'. I ran into a similar problem with a Carousel. It shouldn't have a layout since the content is being created by a template. The "layout" config is only for use with the "items" config. It seems 0.96 is less tolerant of making this error.

jacstofberg
30 Sep 2010, 9:47 PM
Jep,

Thanks for the quick response. I've removed the layout:'fit', but to no avail. Item details still overlapping.

Cheers,
Jac

jep
30 Sep 2010, 9:49 PM
Can you post a trimmed down example that shows JUST the List an the problem data? I'd try it out and see if I could figure it out. (Probably tomorrow, though.)

jacstofberg
30 Sep 2010, 10:01 PM
List definition:



MyNamespace.views.MainMenuList = Ext.extend(Ext.List, {
tpl: '<tpl for="."><div class="menuitem"><table><td width="105"><img src="./resources/images/{image}" width="90" /></td><td>{title}</td></table></div></tpl>',
itemSelector: 'div.menuitem',
singleSelect: true,
scroll:true,
initComponent: function() {
//Assign data store for this list
this.store = Nmi.stores.MainMenuItems;
//Call initialization of this class
Nmi.views.MainMenuList.superclass.initComponent.call(this);
}
});


Main Menu Item Store and Data:



Ext.regModel('MainMenuItems', {
fields: [
//fields
'title',
'image'
]
});

MyNamespace.stores.MainMenuItems = new Ext.data.Store({
model: 'MainMenuItems',
data : [
{title: 'Episodes', image: 'menu_episodes.gif'},
{title: 'Videos', image: 'menu_videos.gif'},
{title: 'Facebook', image: 'menu_facebook.gif'},
{title: 'Search Media', image: 'menu_search.gif'}
]
});


Declaration of list in extended panel:



MyNamespace.views.StartScreen = Ext.extend(Ext.Panel, {
cls: 'start-screen',
layout: 'card',
activeItem: 0,
titleTpl: new Ext.Template('<strong>My Application</strong>'),

//Initialize this Class
//---------------------
initComponent: function() { ...

....
....

//Main Menu List
this.list = new MyNamespace.views.MainMenuList();

//Add list as main container
this.items = [this.list];

//Add list tap handler
this.list.on('itemtap', this.onMainMenuItemTap, this);

...
}

Is this enough code for you?

Cheers,
Jac

jacstofberg
30 Sep 2010, 10:05 PM
Jep,

Oh, and just assume MyNamespace and Nmi are the same thing:) My mistake in copy and pasting to get a trimmed example for you.

Thanks,
Jac

jep
30 Sep 2010, 10:21 PM
No, post a fully working example, like I did here:

http://www.sencha.com/forum/showthread.php?111250-getting-1-for-index-on-List-itemtap

Trim out everything you possibly can, and make it so we can just save it as a single html file and load it. It both helps us and helps you. I often find when I isolate a problem like this, I figure out the issue without actually having to post it!

evant
30 Sep 2010, 10:26 PM
You might as well post a code sample that demonstrates the issue, there's not really much point in posting small unrelated snippets.

jacstofberg
30 Sep 2010, 10:27 PM
Jep,

I am calling it a day. Your advice is sound. I'll cut down to a bare minimum and isolate the problem. If I don't find the problem, I'll post a working example for you.

Thanks for offering to help.

Kind regards,
Jac

blessan
30 Sep 2010, 11:06 PM
I just put height:auto in the outer div of the tpl. And things came ok.

jacstofberg
1 Oct 2010, 9:16 AM
Hi guys,

Here is a working example of my list template problem. Would be great if you could check it out for me.



<html>
<head>
<title>Example - List Template Problem</title>
<link rel="stylesheet" href="../lib/sencha0.96/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../lib/sencha0.96/ext-touch.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.setup({
icon: 'icon.png',
tabletIcon: 'icon.png',
phoneIcon: 'icon.png',
glossOnIcon: true,

onReady: function() {

Ext.Msg.alert('Message','Enterered OnReady Function!');

Ext.regModel('MainMenuItems', {
fields: [
'title',
'image'
]
});

var store = new Ext.data.JsonStore({
model: 'MainMenuItems',
data : [
{title: 'Twitter', image: 'http://www.boisestate.edu/news/grfx/Twitter_128x128.png'},
{title: 'Facebook', image: 'http://www.ccsu.edu/uploaded/FaceBook-128x128.png'},
{title: 'Youtube', image: 'http://www.socialrevitalizer.com/social-rss/images/youtube.png'}
]
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="menuitem"><table><td width="105"><img src="{image}" width="90" /></td><td>{title}</td></table></div></tpl>',
itemSelector: 'div.menuitem',
singleSelect: true,
scroll:true,
store: store,

floating : true,
width : 350,
height : 370,
centered : true,
modal : true,
hideOnMaskTap: false
});

list.show();
}
});
</script>

</body>
</html>


Thanks in advance,
Jac

jep
1 Oct 2010, 9:40 AM
Okay, Jac, good example. I think I see the problem. I actually trimmed your template down even further, so my explanation will go off of that:



tpl: [
'<tpl for=".">',
'<div class="menuitem"><img src="{image}" width="90"/></div>',
'</tpl>'
],


I also changed your ext-touch.css to ext-touch-debug.css for this next part.

Using Safari's dev tools, I can inspect the menuitem div. I see that it gets a height of 2.5em from line 1766 of resources/css/ext-touch.css:


/* line 35, ../themes/stylesheets/sencha-touch/default/widgets/_list.scss */
.x-list .x-list-group-items > *, .x-list.x-list-flat .x-list-parent > * {
position: relative;
color: black;
padding: 0.6em 0.8em;
height: 2.5em;
border-bottom: 1px solid #dedede;
border-top: 1px solid white;
}


So it's going to force those list item lines to only 2.5em, which is no good for your tall images.

I'm not 100% sure of the BEST way to fix it, but I know of some possibilities. One way is that you could specify a CSS styling on the menuitem div that sets a specific height in pixels. This might be best, given that you know the height of your logos. Another way that I've found seems to let it auto-calculate is to set a style on menuitem for "height: inherit". This appears to override the 2.5em one without hardcoding it to something else.

Play with this and see if that helps.

jacstofberg
1 Oct 2010, 12:11 PM
Jep,

Great piece of detective work on your part. You have helped me in more ways than just to fix my problem. I have adapted my debugging methodology as well:)

My fix entailed just overriding the Sencha library list style. I changed "height: 2.5em" to "height:auto". This way all my list items will auto-resize according to fir their contents.

I am curious about the development teams reason for hard-coding list item height this way. Height was not specified in 0.95 for list items.

Thanks again for helping.

Cheers,
Jac

jep
1 Oct 2010, 12:18 PM
You're welcome! I know what you mean about methodology. The whole "make a simple isolated example" is a standard principle of programming. But I have had to use it FAR more often here than I usually do. I'm still trying to get a good grasp on Sencha Touch, and the javascript aspect doesn't help much. It's much easier to catch mistakes in a strongly typed language that does compile time checking (though it wouldn't have for this one). I wish I had some sort of "lint" for Sencha Touch that could inspect my code and say "hmmm, you seem to be using both a tpl and the layout config. Those things don't go together!" Otherwise, I struggle with all the conflicting properties and methods that are within the same component. Not only that, but there's the difference between "config properties" and "public properties." Just a lot of stuff to get tripped up on. On the plus side, it's seems like a really nice framework once you get some expertise in it.

But then you throw in complications of HTML and CSS, and the complexity and ease of screwing up really rises. There's not much Sencha Touch can do to alleviate that, I suppose. I have no idea about why they changed the height from 0.95 to 0.96.

Of course, one of the big helps is having someone else look at your code and having to explain it to them. I catch a lot of errors that way. Maybe next time, you'll be the one to help me. Good luck!