PDA

View Full Version : DataView questions



cripkd
10 Aug 2009, 11:55 PM
I have 2 DataViews in a border layout, one with region center, one with east.
The center one loads a bunch of images and when you click one, it loads a biggger version, plus some other info in the other dataView.

I got the first part running pretty easily, but I'm at a loss concerning some config options and clicking the items in the first dataView.



var view = new Ext.DataView({
itemSelector: 'table.image_list',
style:'overflow:auto',
multiSelect: true,
store: new Ext.data.JsonStore({
url: '/admin/getimages/cat/8',
autoLoad: true,
root: 'images',
id:'image_id',
fields:[
'image_caption', 'image_path','image_id','image_status'
]
}),
tpl: new Ext.XTemplate(
'<table class="image_list" cellspacing="3" id="{image_id}">',
'<tr>',
'<tpl for=".">',
'<td align="center" class="thumb"><img src="/pictures/{image_path}" class="thumb-img"></td>',
'{[xindex % 3 === 0 ? "</tr><tr>" : ""]}',

'</tpl>',
'</tr>',
'</table>'
)
}
});
The second dataView is pretty much the same with diff url, diff store root and diff template, cos it's not a loop, its just one item.

The reason I used this template, knowing that tables suck, was because the images can be landscape or portrait, and using floated div's can cause some rows to mess up when there are some higher images (hard to explain, but whoever did some xhtml layouts with items of various heights displaied in a grid fashion knows what I'm talking about, you either need a container div for every row, or some way of assuring all divs on a row are the same height, otherwise a simple float left doesn't cut it in terms of "gridding").

When I click an item now, in this dataview, the whole table looks selected, and the index of item clicked is 0 all the time. I'm guessing its a combination of a badly thought template (meaning that maybe clicking on td's doesn't work) and not knowgin what exactly some config options need to be, namely itemSelector and id inside of the store object.
The doc sais that the "id" property is deprecated in favour of storeId, used for registering with storeMgr, no idea what that is and how to use it :)
Also, in the examples in the api docs there seems to be an idProperty option, which i'm guessing it should be whatever i'm deciding that functions as a record id inside my json ?
And itemSelector, how important is that, i've read the docs but its not pretty clear what that is for. But i'm guessing thats why clicking is weird in my dataView.

Any pointers?
Sorry for the VERY long question, but I don;t know how to explain it otherwise.

Animal
11 Aug 2009, 12:30 AM
It's your itemSelector

If you read about it, it's a DomQuery selector used to identify selectable elements within the DataView.

Yours specifies that the whole image list is selectable.

Other than that, well done on figuring the complex template out. I agree that you might have to use a table to get alignment when the images are different heights and sizes.

But the alternative is to fix a height/width for a wrapper div for images which can encapsulate both landscape and portrait oriented images without deforming. You could float these.

This is what I did here:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/contextmenunoselection.jpg

cripkd
11 Aug 2009, 1:25 AM
Thanks.
Actually, as ususall, I already figured it out, regardint itemSelector :)
And now i have a much simpler template (yeah, took a while to figure out the whole xindex stuff, I understood what it did and how to use that instead of basic math, which lacked %, but I struggled to get it generate proper html) cos i did exactly what you said :)
Realised i can use fixed height div's, with float left and now they all sit next to each other and behave the way they should.
Any ideas why some of the images report having an id of 0 when clicking them? Also, now i can click images but they don't highlight, i mean some css magic that was going on before stopped working now, and I know i'm clciking, but visually nothing happens. How is that handled?

PS. Your layout looks a bit like mine, but i used a grid instead of trees cos I only have one level and i can edit the category names and other stuff right there :)

Animal
11 Aug 2009, 1:29 AM
Post the code and the JSON which is used to populate the Store.

Animal
11 Aug 2009, 1:30 AM
BTW, tree nodes are editable using a TreeEditor. We can rename catalogs.

cripkd
11 Aug 2009, 1:35 AM
As usual, I jump to quickly to conclusions.
Only the first item returns 0, and that's because the click event returns the index, and that is 0-based. I know what to do, get the store and get the element at that index.

Regarding the visual selection after clicking, i'll dig the css bits I added, maybe its there, otherwise I'll post the code :). Thanks again.

PS. I know about tree items beeing editable, but I also need an active checkbox (yes, i know about trees with checkboxes), a parent Id and so on. Ok, you caught me, the whole row edit grid looked very nice :)

cripkd
11 Aug 2009, 5:13 AM
Ok, clicking the first DataView works, but altough loading the image in the second one is handled in the same way i handle loading the images in the first DW (by clicking the grid item), it doesn't work, the div that is supposed to hold the image is empty.

This is the dataView supposed to load an individual image:


var viewimage = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
style:'overflow:auto',
store: new Ext.data.JsonStore({
url: '/admin/getimage/image/1',
autoLoad: true,
root: 'rimage',
id:'image_id',
fields:[
'image_caption', 'image_path','image_id','image_status'
]
}),
tpl: new Ext.XTemplate(

'<tpl for=".">',
'<div class="thumb-wrap" id="{image_id}">',
'<div class="thumb"><img style="margin:4px auto;" width="590" src="/pictures/{image_path}" title="{image_caption}"></div>',
'<span class="x-editable">{image_caption}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'

)
});

This is the bit that handled the click of an item in the first DV:


listeners:{
click:function(v,rowIdx,h,e){
console.log(rowIdx);
var imagePath = store2.getAt(rowIdx).json.image_path;
console.log(store2.getAt(rowIdx));
viewimage.bindStore(
new Ext.data.JsonStore({
url: '/pictures/'+imagePath,
autoLoad: true,
root: 'rimage',
id:'image_id',
fields:[
'image_caption', 'image_path','image_id','image_status'
]
})
);
}
}
Thanks.

Animal
11 Aug 2009, 5:16 AM
I'm lost. Displaying one image in a DataView? That's not a job for a DataView, but a BoxComponent with one <img> in it.

cripkd
11 Aug 2009, 5:22 AM
Actually, what I expalined above is completly stupid, i was passing an image URL as a json url, so nevermind, it works.

As for the DV vs boxComponent... i guess you're right. I got carried away into using fancy stuff and i figured that between editing a panel's content (only thing i could think about, didn;t know about the boxComponent) and using something that already worked, just that for more than one image, i chose the dataView again.
I'll try the boxComponent now :)
Thanks

Animal
11 Aug 2009, 5:34 AM
Or a special subclass of BoxComponent which manages an image element within itself, fires a load event when the image has loaded, allows setting the src of its managed image, centers the image both horizontally and vertically inside itself....

Quite a fun little project there.

cripkd
11 Aug 2009, 5:43 AM
I switched the click code to this:


var imagePath = view.getStore().getAt(rowIdx).json.image_path;
imageinfo.removeAll();
imageinfo.add(
new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: '/'+imagePath
}
})
);


Doesn't work.

cripkd
11 Aug 2009, 5:57 AM
Hmm, how about adding a boxComponent, with img as its autoEl tag instead of the second DV, when the app initializes, with a default image, than on clicking the first DV's items I do:


imagebox.getEl().dom.src = 'http://www.constantinopris.com/v2/pictures/'+imagePath;

This seems to work. Any gotcha's here?