PDA

View Full Version : DataView problems (load mask shows, but never loads)



dehydratedH2O
1 Mar 2013, 12:20 PM
(extjs v4.0.7)

I'm trying to make a DataView that will sit inside of a Panel and display all of the pictures in a certain directory on my server. Using several examples (http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html), I've gotten to the point where I have a php backend that properly displays the filenames of the directory in json format, and I've got the DataView displaying the load mask in the panel, but even once I hook the two together, the DataView just displays the load mask forever. There are no error messages in Chrome's Javascript console. Can anyone help me out? I've been trying to figure this out for two days now...

(btw, I know that these files probably aren't organized in the best way, and I think that could be contributing to my problem. So for now I'm using absolute web paths until I get around to refactoring/reorganizing everything).
The main html is at /var/www/project/extjs. It includes /var/www/project/extjs/app/app.js -- the main javascript file that includes everything else in /var/www/projects/extjs/app/view, etc.

/var/www/project/extjs/app/view/handle.php (makes json formatted file listing):


0 <?php
1 class image {
2 var $filename;
3 }
4
5 $handler = opendir("/var/www/project/extjs/app/view/images");
6 $images = array();
7
8 while ($file = readdir($handler)) {
9 if ($file != '.' && $file != '..') {
10
11 $image = new image();
12 $image -> filename = $file;
13
14 $images[] = $image;
15 }
16 }
17 closedir($handler);
18
19 echo json_encode($images);
20 ?>


output from handle.php


[{"filename":"6.jpg"},{"filename":"3.jpg"},{"filename":"5.jpg"},{"filename":"2.jpg"},{"filename":"4.jpg"},{"filename":"7.jpg"},{"filename":"8.jpg"},{"filename":"9.jpg"},{"filename":"1.jpg"}]


/var/www/project/extjs/app/view/PicView.js (included as an xtype in the main viewer elsewhere)


0 Ext.define('MyProject.view.PicView', {
1 extend: 'Ext.panel.Panel',
2 alias: 'widget.picview',
3 layout: 'fit',
4 id: 'picview',
5 initComponent: function() {
6 this.callParent();
7
8 Ext.onReady(function() {
9 var imageModel = Ext.define('ImageModel', {
10 extend: 'Ext.data.Model',
11 fields: [{name: 'filename'}]
12 });
13
14 var imageStore = Ext.create('Ext.data.Store', {
15 storeId: 'imageStore',
16 model: 'ImageModel',
17 proxy: {
18 type: 'jsonp', //I use jsonp here because I'm using the full url instead of a relative path. not sure that I need to, though
19 url: 'http://myip/project/extjs/app/view/handle.php',
20 reader: {
21 type: 'json'
22 }
23 },
24 });
25 imageStore.load();
26
27 //var imageDView = Ext.create('Ext.view.View', {
28 this.items = Ext.create('Ext.view.View', {
29 id: 'imageDView',
30 renderTo: 'picview',
31 store: imageStore,
32 tpl: [
33 '<tpl for="."><img class="image" src="http://myip/project/extjs/app/view/images/{filename}" /></tpl>'
34 ],
35 itemSelector:'img.image',
36 singleSelect: true
37 });
38 });
39 },
40 });

slemmon
1 Mar 2013, 8:20 PM
What if you change your proxy type to just 'json'? jsonp will require you wrap your json string in a callback function (usefull when calling data down from a foreign domain - provided the response is the json string wrapped in a function). Check out the jsonp proxy (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.proxy.JsonP) if you think you do need to pass back a jsonp response. Otherwise I'd think the proxy type is just json.

dehydratedH2O
4 Mar 2013, 10:16 AM
thanks for the reply. unfortunately, changing from 'jsonp' to 'json' breaks it with a javascript error in ext-all.js. I think this is because there's not actually a 'json' proxy type. I really don't think the callback is necessary, though, because I'm not getting any errors.
I've changed the proxy to ajax and moved to relative addressing, but I get the following warning in the Javascript console:
[CODE]Resource interpreted as Image but transferred with MIME type text/html: "http://myip/project/extjs/app/view/images/ (http://10.20.140.65/androidmonitor/extjs/app/view/images/)". [CODE]
I have also changed the handle.php and PicView.js to have a root. again, no errors, but it's not fixing my problem. any more ideas? I've got to demo this thing on Wednesday and I'm pulling my hair out.

new handle.php

0 <?php
1 class image {
2 var $filename;
3 }
4
5 $handler = opendir("images");
6 $images = array();
7
8 while ($file = readdir($handler)) {
9 if ($file != '.' && $file != '..') {
10
11 $image = new image();
12 $image -> filename = $file;
13
14 $images[] = $image;
15 }
16 }
17 closedir($handler);
18
19 $fns = json_encode($images);
20 $response = "
21 [{
22 \"success\": true,
23 \"filenames\": $fns
24 }]";
25 echo $response;
26 ?>


new PicView.js

0 Ext.define(MyApp.view.PicView', {
1 extend: 'Ext.panel.Panel',
2 alias: 'widget.picview',
3 layout: 'fit',
4 id: 'picview',
5 initComponent: function() {
6 this.callParent();
7
8 Ext.onReady(function() {
9 var imageModel = Ext.define('ImageModel', {
10 extend: 'Ext.data.Model',
11 fields: [{name: 'filename'}]
12 });
13
14 var imageStore = Ext.create('Ext.data.Store', {
15 storeId: 'imageStore',
16 model: 'ImageModel',
17 proxy: {
18 type: 'ajax',
19 url: 'app/view/handle.php',
20 reader: {
21 type: 'json',
22 root: 'filenames'
23 }
24 },
25 });
26 imageStore.load();
27
28 //var imageDView = Ext.create('Ext.view.View', {
29 this.items = Ext.create('Ext.view.View', {
30 id: 'imageDView',
31 renderTo: 'picview',
32 store: imageStore,
33 tpl: [
34 '<tpl for="."><img class="image" src="app/view/images/{filename}" /></tpl>'
35 ],
36 itemSelector:'img.image',
37 singleSelect: true
38 });
39 });
40 },
41 });

dehydratedH2O
4 Mar 2013, 10:31 AM
apparently my first reply was lost when I tried to edit it. *anger*

anyway, thanks for the reply. I tried changing the proxy to 'json' but it didn't work. it just gave an error -- I think because 'json' isn't actually an available proxy type? so then, I tried to change it to ajax and use relative addressing. it works (no errors), but still nothing shows up. there's also no loading mask anymore. in addition, I get the following warning in the Javascript console:
Resource interpreted as Image but transferred with MIME type text/html: "http://myip/project/extjs/app/view/images/ (http://10.20.140.65/androidmonitor/extjs/app/view/images/)".
at the suggestion of a coworker, I also modified the JSON to have a root, but it hasn't changed my results at all.

any more ideas? I've got to demo this thing on Wednesday and I'm pulling my hair out.

mitchellsimoens
4 Mar 2013, 10:32 AM
apparently my first reply was lost when I tried to edit it. *anger*

Nope, just marked as moderated

dehydratedH2O
4 Mar 2013, 10:33 AM
oh, sorry. my apologies.

dehydratedH2O
4 Mar 2013, 3:27 PM
so I've figured a way to make it work, but I still think I'm doing something wrong. if I change renderTo: to 'picview-body' instead of 'picview', it works. I only found this out because when I inspected the element in Chrome, I could see that the "picview-body" div was full of empty space, therefore pushing the actual photos down below renderable area. however, even when I get the photos displaying in picview-body, they will only display vertically, even if I change their size in the img tag to be very small. any more ideas?