PDA

View Full Version : How to render single record from DataView on a Panel



b.zaiser
29 Dec 2010, 7:45 AM
Hi,
I'm new to ExtJs and I try to render a single record out of a DataView (which is connected to a Store) onto a Panel, but it won't work :-(

I have 12 panels, which are placeholders. Each placeholder has to hold (show) a record from the store using the DataView. (The placeholders should be filled via drag'n'drop operations and they also can be empty).

sortedProductView.getNode(i) doesn't work, because the elements array in the DataView is empty. I think, it will be filled, if the DataView has to be rendered, or?
But also while rendering the dataview to a hidden dom element it is not possible to show one record on each panel. What am I doing wrong?
Or how can the record - placeholder problem be solved?

Here is my code:


sortedProductView = new Ext.DataView({
cls: 'product-view',
tpl: '<tpl for=".">' +
'<div class="product product-select product-target"><table><tbody>' +
'<tr><td class="product-label">Image</td><td class="product-name"><img src="{image}" /></td></tr>' +
'<tr><td class="product-label">Name</td><td class="product-name">{title}</td></tr>' +
'<tr><td class="product-label">SKU</td><td class="product-name">{sku}</td></tr>' +
'<tr><td class="product-label">Designer</td><td class="product-name">{designer}</td></tr>' +
'</tbody></table></div>' +
'</tpl>',
itemSelector: 'div.product-select',
overClass: 'product-over',
selectedClass: 'product-selected',
singleSelect: true,
store: sortedProductStore,
});

var placeholders = new Array();
for(var i=0; i<12; i++){
placeholders.push({
xtype: 'panel',
title: 'placeholder',
width: 150,
height: 150,
cls: 'product-placeholder',
items:[{
xtype: 'tbbutton',
text: 'remove',
},
sortedProductView.getNode(i) //Dosn't work!
],
listeners: {
render: initProductDropZone
}
});
}

var sortedProductsPanel = new Ext.Panel({
title: 'Category View',
columnWidth: .5,
height: 400,
autoScroll: true,
items: placeholders,
layout: 'table',
layoutConfig: {
columns: 3
},
defaults: {
style:'margin: 20px',
},
});

Condor
29 Dec 2010, 7:55 AM
This looks like something for my ComponentDataView user extension (rendered components - like a Panel - inside a DataView).

b.zaiser
29 Dec 2010, 9:38 AM
I already tried to use your extension but it won't work either, because I also need empty placeholders which aren't 'connected' with a record...

Condor
29 Dec 2010, 10:31 AM
Do you really need a dataview? You could also build panels from the store data and add them to the container. The only thing you are missing then is the automatic update when the store changes.

b.zaiser
30 Dec 2010, 12:34 AM
oh, that sounds good. Please, can you give me a hint (or link) how to do that?

steffenk
30 Dec 2010, 1:58 AM
http://dev.sencha.com/deploy/dev/docs/?class=Ext.Panel

see properties: data, tpl

As Condor mentioned you could implement a method setData that updates the panel proper dynamically with different data.