PDA

View Full Version : DataView is not working with ArrayStore



titu
23 Jul 2010, 11:46 AM
Hi,

I'am developing a DataView with ArrayStore with some local data in Sencha Touch framework. But it doesn't work (no data is populating in the XTemplate). I tried with same code in the ExtJS framework and it is working fine. Can anybody please help me?

My code:


var store = new Ext.data.ArrayStore({
proxy : new Ext.data.MemoryProxy(),
fields : ['id', 'url', 'displayText', 'tooltipText']
});

store.loadData([['images/img (1).jpg', '1', '1'],
['2', 'images/img (2).jpg', '2', '2'],
['3', 'images/img (3).jpg', '3', '3'],
['4', 'images/img (4).jpg', '4', '4'],
['5', 'images/img (5).jpg', '5', '5'],
['6', 'images/img (6).jpg', '6', '6'],
['7', 'images/img (7).jpg', '7', '7'],
['8', 'images/img (8).jpg', '8', '8'],
['9', 'images/img (9).jpg', '9', '9'],
['10', 'images/img (10).jpg', '10', '10'],
['11', 'images/img (11).jpg', '11', '11'],
['12', 'images/img (12).jpg', '12', '12'],
['13', 'images/img (13).jpg', '13', '13'],
['14', 'images/img (14).jpg', '14', '14'],
['15', 'images/img (15).jpg', '15', '15'],
['16', 'images/img (16).jpg', '16', '16'],
['17', 'images/img (17).jpg', '17', '17'],
['18', 'images/img (18).jpg', '18', '18'],
['19', 'images/img (19).jpg', '19', '19'],
['20', 'images/img (20).jpg', '20', '20'],
['21', 'images/img (21).jpg', '21', '21'],
['22', 'images/img (22).jpg', '22', '22'],
['23', 'images/img (23).jpg', '23', '23'],
['24', 'images/img (24).jpg', '24', '24']]);

And the DataView is:


new Ext.DataView({
store : store,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="wrap-{id}">',
'<div class="thumb"><img id="thumb-{id}" src="{url}" title="{tooltipText}"></div>',
'<span class="x-editable">{displayText}</span></div>',
'</tpl>', '<div class="x-clear"></div>'),
multiSelect : true,
overClass : 'x-view-over',
itemSelector : 'div.thumb-wrap',
emptyText : 'No images to display'
})

Mis63
5 Aug 2010, 1:19 AM
I have the same problem : my DataView display nothing (no item, and no emptyText) when it's bound to an ArrayStore.
What is the tip ?

evant
5 Aug 2010, 1:22 AM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {
var store = new Ext.data.ArrayStore({
proxy : new Ext.data.MemoryProxy(),
fields : ['id', 'url', 'displayText', 'tooltipText']
});

store.loadData([['images/img (1).jpg', '1', '1'],
['2', 'images/img (2).jpg', '2', '2'],
['3', 'images/img (3).jpg', '3', '3'],
['4', 'images/img (4).jpg', '4', '4'],
['5', 'images/img (5).jpg', '5', '5'],
['6', 'images/img (6).jpg', '6', '6'],
['7', 'images/img (7).jpg', '7', '7'],
['8', 'images/img (8).jpg', '8', '8'],
['9', 'images/img (9).jpg', '9', '9'],
['10', 'images/img (10).jpg', '10', '10'],
['11', 'images/img (11).jpg', '11', '11'],
['12', 'images/img (12).jpg', '12', '12'],
['13', 'images/img (13).jpg', '13', '13'],
['14', 'images/img (14).jpg', '14', '14'],
['15', 'images/img (15).jpg', '15', '15'],
['16', 'images/img (16).jpg', '16', '16'],
['17', 'images/img (17).jpg', '17', '17'],
['18', 'images/img (18).jpg', '18', '18'],
['19', 'images/img (19).jpg', '19', '19'],
['20', 'images/img (20).jpg', '20', '20'],
['21', 'images/img (21).jpg', '21', '21'],
['22', 'images/img (22).jpg', '22', '22'],
['23', 'images/img (23).jpg', '23', '23'],
['24', 'images/img (24).jpg', '24', '24']]);

new Ext.DataView({
store : store,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="wrap-{id}">',
'<div class="thumb"><img id="thumb-{id}" src="{url}" title="{tooltipText}"></div>',
'<span class="x-editable">{displayText}</span></div>',
'</tpl>', '<div class="x-clear"></div>'),
multiSelect : true,
overClass : 'x-view-over',
itemSelector : 'div.thumb-wrap',
emptyText : 'No images to display'
}).show();
}
});

Mis63
5 Aug 2010, 1:46 AM
Hi evant

Thanks for the response.
I tried your example, but it doesn't work. The DataView display for each record, a broken link for the image and nothing else.
So I changed the template as it :


tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="wrap-{id}">',
'<div class="thumb">',
'<img id="thumb-{id}" src="{url}" title="{tooltipText}"/>...',
'</div>',
'<span class="x-editable">{displayText}</span></div>',
'</tpl>', '<div class="x-clear"></div>')

For each record, I have a broken image and the ...
So it seems that the variables {url}, {tooltipText} ... have no value when the template is executed.

evant
5 Aug 2010, 1:54 AM
Well, the broken image just means the image path isn't correct, so just fix up the data in your store...

Mis63
5 Aug 2010, 2:03 AM
I changed the image path with a path that is correct for my page. But there is no image, no tooltipText, no displayText....
The template don't retrieve properties of records that is process.
Only things that appear in the template, are hard coded strings.

Mis63
5 Aug 2010, 2:10 AM
I adapted the store as it :


store.loadData([
['1', 'images/16/earth.png', '1', '1'],
['2', 'images/16/earth.png', '2', '2'],
['3', 'images/16/earth.png', '3', '3'],
....
]);



If I do as below, the image is displayed as broken :


new Ext.DataView({
store : store,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="wrap-{id}">',
'<div class="thumb">',
'<img id="thumb-{id}" src="{url}" title="{tooltipText}"/>...',
'</div>',
'<span class="x-editable">*{displayText}*</span></div>',
'</tpl>', '<div class="x-clear"></div>'),
...
}).show();



But if I do as below (replace {url} by hard coded path), the image appears (the same for each record of course) :


new Ext.DataView({
store : store,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="wrap-{id}">',
'<div class="thumb">',
'<img id="thumb-{id}" src="images/16/earth.png" title="{tooltipText}"/>...',
'</div>',
'<span class="x-editable">*{displayText}*</span></div>',
'</tpl>', '<div class="x-clear"></div>'),
...
}).show();


The problem is that the {url} variable used in the template is empty for each record.

evant
5 Aug 2010, 2:20 AM
You haven't shown your store or model definition, so it's difficult to say.

Mis63
5 Aug 2010, 3:22 AM
For the rest it's as your example.
Here is my complete code (this is a simple html page) :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="resources/js/ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {
var store = new Ext.data.ArrayStore({
proxy : new Ext.data.MemoryProxy(),
fields : ['id', 'url', 'displayText', 'tooltipText']
});
store.loadData([
['1', 'images/16/earth.png', '1', '1'],
['2', 'images/16/earth.png', '2', '2'],
['3', 'images/img (3).jpg', '3', '3'],
['4', 'images/img (4).jpg', '4', '4'],
['5', 'images/img (5).jpg', '5', '5'],
['6', 'images/img (6).jpg', '6', '6'],
['7', 'images/img (7).jpg', '7', '7'],
['8', 'images/img (8).jpg', '8', '8'],
['9', 'images/img (9).jpg', '9', '9'],
['10', 'images/img (10).jpg', '10', '10'],
['11', 'images/img (11).jpg', '11', '11'],
['12', 'images/img (12).jpg', '12', '12'],
['13', 'images/img (13).jpg', '13', '13'],
['14', 'images/img (14).jpg', '14', '14'],
['15', 'images/img (15).jpg', '15', '15'],
['16', 'images/img (16).jpg', '16', '16'],
['17', 'images/img (17).jpg', '17', '17'],
['18', 'images/img (18).jpg', '18', '18'],
['19', 'images/img (19).jpg', '19', '19'],
['20', 'images/img (20).jpg', '20', '20'],
['21', 'images/img (21).jpg', '21', '21'],
['22', 'images/img (22).jpg', '22', '22'],
['23', 'images/img (23).jpg', '23', '23'],
['24', 'images/img (24).jpg', '24', '24']]);

new Ext.DataView({
store : store,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="wrap-{id}">',
'<div class="thumb">',
'<img id="thumb-{id}" src="{url}" title="{tooltipText}"/>...',
'</div>',
'<span class="x-editable">*{displayText}*{.}*</span></div>',
'</tpl>', '<div class="x-clear"></div>'),
multiSelect : true,
overClass : 'x-view-over',
itemSelector : 'div.thumb-wrap',
emptyText : 'No images to display'
}).show();
}
});
</script>
</head>

<body>

</body>
</html>

Mis63
5 Aug 2010, 7:37 AM
I changed the previous example, by remplacing the ArrayStore by a JsonStore, and that worked fine.
It seems that there is a bug in the ArrayStore.

titu
5 Aug 2010, 8:07 PM
Yes, I also think that the ArrayStore is not working properly. I also used the JsonStore and found it working nice!

evant
5 Aug 2010, 8:12 PM
To clarify, the loadData method accepts data in the format:



loadData([{
field: val
},{
field: val
}]);


The readers are now only used when receiving data from a remote data source.

Mis63
5 Aug 2010, 10:42 PM
Evant : yes, that way it works !!

This code doesn't work :


store.loadData([
['1', 'images/16/earth.png', 'earth', 'earth']
]);


You should use :


store.loadData([
{id: '1', url: 'images/16/earth.png', displayText: 'earth', tooltipText: 'earth'}
]);


In fact; the ArrayStore doesn't load arrays (?) but objects.

May be the documenttation should be updated because it misled :


This store is configured to consume a returned object of the form:

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

An object literal of this form could also be used as the data config option.

evant
5 Aug 2010, 10:44 PM
The reader is only used when the data is coming from a remote source.