PDA

View Full Version : Comment on a page/image



GertBoers
26 Aug 2011, 1:24 AM
Me again (i don't know if there's a limit to how many threads one can start at the same time, if there is one, please warn me and i'll share one problem at a time).

This is what i would like to achieve:

i've got a demo app: http://gertboers.be/forum/forumstart/
(http://gertboers.be/forum/forumstart/)if you go to the brandbook item, you'll see a nested list which eventually should look like this:

list with text items -> list with text items, but with thumbnail -> detailpage of an image

this is where i'm stuck already...

here's the code of my store:

ToolbarDemo.brandstore = new Ext.data.TreeStore({ model: 'ListItem',
root: {
items: [{
text: 'Kadanza',
items: [{
text: 'Essentials',
card: {xtype: 'essentialscard'},
leaf: true
},{
text: 'Inspiration',
leaf: true
},{
text: 'Libraries',
leaf: true
},{
text: 'My studio',
leaf: true
}]

},
{
text: 'Kan',
card: {xtype: 'kancard'},
items: [{
text: 'Essentials',
leaf: true
},{
text: 'Inspiration',
leaf: true
},{
text: 'Libraries',
leaf: true
},{
text: 'My studio',
leaf: true
}]
}],
},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});

how do i add thumbnails to the essentials, inspiration, etc... ?

I've created one detailpage (the essentialscard) and here i want to show a preview of an image (the same one as the thumbnail obviously).
So far:


ToolbarDemo.views.Essentialscard = Ext.extend(Ext.Panel, {
id: 'essentialscard',
styleHtmlContent: true,
html: 'Made from coffee'
});


Ext.reg('essentialscard', ToolbarDemo.views.Essentialscard);

I guess i should just put an <img src='{parameter}' ... /> in the html, but how do i assign a pic to the list items?

Next step: i would like users to be able to comment the picture when they are at the detailpage.
I'll try searching the forum some more and keep you posted.

Thx!

jcoenrae
27 Aug 2011, 8:02 AM
Hi,

You can indeed just place an img tag in the html for the panel.

For the list items you could use templates. Then you have to add an img field to your model which you use for each item in your list.


yourapp.views.listTemplate= new Ext.XTemplate(
'<img src="{img}" style="float:left; vertical-align: middle" />',
'{title}' );


You add it to your list with itemTpl.