Ext.data.JsonPStore example

**ci11111** · 19 Feb 2012, 2:47 AM

Hi
I would like to load the equivalent images of http://dev.sencha.com/deploy/touch-c...examples/Line/ but from a local file

so I need to replace

Code:

window.store1 = new Ext.data.JsonStore({
    fields: ['name', 'iphone', 'ipad'],
    data: data
});

with something like

Code:

window.store2 = new Ext.data.JsonPStore({
    // proxy configs
    url: 'http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/resources/shared/img/',
    // reader configs
    //root: 'images',
    fields: ['name', 'iphone', 'ipad'],
    data: data
});

I didn't got it working the JSONPStore
do you have any idea?

**mitchellsimoens** · 19 Feb 2012, 7:39 AM

What was the response? Is it valid for JsonP which requires JSON be wrapped int he callback function?

**ci11111** · 20 Feb 2012, 1:44 AM

for both methods, the images are not loaded, I have an http no-content error since it tried to load from my local computer
(iphone.png /home/ca/resources/shared/img GET (failed) undefined touch-charts.js:1 Script 13B 0B 16ms 0.0 days)
I have no images there but want to fetch the remote ones (http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/resources/shared/img/iphone.png ...) with jsonp if the first method fails with the cross domain thing, or to have a working example of jsonpstore

thanks for the help mitchell

file:

Code:


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="http://dev.sencha.com/deploy/touch-charts-1.0.0/resources/css/touch-charts-demo.css" type="text/css">


    <title>Line Chart</title>
    <script type="text/javascript" src="http://dev.sencha.com/deploy/touch-charts-1.0.0/sencha-touch.js"></script>
    <script type="text/javascript" src="http://dev.sencha.com/deploy/touch-charts-1.0.0/touch-charts.js"></script>
    <script type="text/javascript">
Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function() {
        window.generateData = function(n, floor) {
            var data = [],
                p = (Math.random() *  11) + 1,
                i;


            floor = 10;


            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Date.monthNames[i % 12],
                    iphone: Math.floor(Math.max((Math.random() * 100), floor)),
                    android: Math.floor(Math.max((Math.random() * 100), floor)),
                    ipad: Math.floor(Math.max((Math.random() * 100), floor))
                });
            }
            return data;
        };
        window.store1 = new Ext.data.JsonStore({
            fields: ['name', 'iphone', 'android', 'ipad'],
            data: generateData(5, 20)
        });
		window.store2 = new Ext.data.JsonPStore({
			// proxy configs
			url: 'http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/resources/shared/img/',
			// reader configs
			//root: 'images',
			fields: ['name', 'iphone', 'ipad'],
			data: generateData(5, 20)
		});


        var onRefreshTap = function() {
            window.store1.loadData(generateData(5, 20));
        };
        var onHelpTap = function() {
            new Ext.Panel({
                floating: true,
                modal: true,
                centered: true,
                width: 300,
                height: 250,
                styleHtmlContent: true,
                scroll: 'vertical',
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    title: 'Line Chart'
                }],
                stopMaskTapEvent: false,
                fullscreen: false,
                html: "Tapping a data point will bring up detailed information about it"
            }).show('pop');
        };
        new Ext.chart.Panel({
            title: 'Line Chart',
            fullscreen: true,
            dockedItems: [{
                xtype: 'button',
                iconCls: 'help',
                iconMask: true,
                ui: 'plain',
                handler: onHelpTap
            }, {
                xtype: 'button',
                iconCls: 'shuffle',
                iconMask: true,
                ui: 'plain',
                handler: onRefreshTap
            }],
            items: {
                cls: 'line1',
                theme: 'Demo',
                store: store2,
                animate: true,
                shadow: true,
                legend: {
                    position: 'right'
                },
               interactions: [{
                type: 'panzoom',
                    axes: {
                        left: {}
                    }
                }, {
                   type: 'iteminfo',
                   listeners: {
                       show: function(interaction, item, panel) {
                           var storeItem = item.storeItem;
                           panel.update(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + item.value[1]+ '</li></ul>'].join(''));
                       }
                   }
               }],
                axes: [{
                    type: 'Numeric',
                    minimum: 0,
                    maximum: 100,
                    position: 'left',
                    fields: ['iphone', 'android', 'ipad'],
                    title: 'Number of Hits',
                    minorTickSteps: 1
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'iphone',
                    title: 'iPhone'
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    smooth: true,
                    xField: 'name',
                    yField: 'android',
                    title: 'Android'
                }, {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    smooth: true,
                    xField: 'name',
                    yField: 'ipad',
                    title: 'iPad'
                }]
            }
        });
    }
});


	</script>
</head>
<body></body>
</html>

**mitchellsimoens** · 20 Feb 2012, 5:02 AM

Originally Posted by mitchellsimoens

What was the response? Is it valid for JsonP which requires JSON be wrapped int he callback function?

What are the answers ^^?

**ci11111** · 20 Feb 2012, 5:51 AM

I have no idea how to set up Jsonpstore
If you, please, have time and correct the example above

**mitchellsimoens** · 20 Feb 2012, 6:25 AM

It's not really the store, it's the response.

**ci11111** · 20 Feb 2012, 6:39 AM

If you try copy pasting the above code in #3
you will see it works exactly like sencha example, except the pictures that doesn't load, if you don't have created locally the folder resources/.../img and put pictures
I asked if it's possible and how to set up a Jsonpstore to fetch remote pictures to be displayed in the charts
thanks

Thread: Ext.data.JsonPStore example

Thread Tools

Search Thread

Display

Ext.data.JsonPStore example

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News