1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    253
    Vote Rating
    0
    ci11111 is on a distinguished road

      0  

    Default Unanswered: Ext.data.JsonPStore example

    Unanswered: Ext.data.JsonPStore example


    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Answers
    3518
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What was the response? Is it valid for JsonP which requires JSON be wrapped int he callback function?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    253
    Vote Rating
    0
    ci11111 is on a distinguished road

      0  

    Default


    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>

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Answers
    3518
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    What was the response? Is it valid for JsonP which requires JSON be wrapped int he callback function?
    What are the answers ^^?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    253
    Vote Rating
    0
    ci11111 is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Answers
    3518
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It's not really the store, it's the response.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    253
    Vote Rating
    0
    ci11111 is on a distinguished road

      0  

    Default


    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 Participants: 1