Вопрос по sencha-touch, json, extjs, charts – Невозможно получить jSon dataStore в диаграмму ExtJS (Sencha Touch): выдает ошибку «невозможно прочитать свойство« длина »из неопределенного»

1

EDITED Я использую образец сенсорных диаграмм Sencha для столбчатых диаграмм. Код как ниже

<code>new Ext.chart.Panel({
    fullscreen: true,
    title: 'Column Chart',
    dockedItems: [{
        xtype: 'button',
            iconCls: 'help',
            iconMask: true,
            ui: 'plain',
            handler: onHelpTap
        }, {
            xtype: 'button',
            iconCls: 'shuffle',
            iconMask: true,
            ui: 'plain',
            handler: onRefreshTap
        }],
        items: {
            cls: 'column1',
            animate: {
                easing: 'bounceOut',
                duration: 750
            },
            store: window.store1,
            shadow: false,
            gradients: [{
                'id': 'v-1',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(212, 40, 40)'
                    },
                    100: {
                        color: 'rgb(117, 14, 14)'
                    }
                }
            },
            {
                'id': 'v-2',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(180, 216, 42)'
                    },
                    100: {
                        color: 'rgb(94, 114, 13)'
                    }
                }
            },
            {
                'id': 'v-3',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(43, 221, 115)'
                    },
                    100: {
                        color: 'rgb(14, 117, 56)'
                    }
                }
            },
            {
                'id': 'v-4',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(45, 117, 226)'
                    },
                    100: {
                        color: 'rgb(14, 56, 117)'
                    }
                }
            },
            {
                'id': 'v-5',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(187, 45, 222)'
                    },
                    100: {
                        color: 'rgb(85, 10, 103)'
                    }
                }
            }],
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['wins'],
                minimum: 0,
                maximum: 10,
                label: {
                    renderer: function (v) {
                        return v.toFixed(0);
                    }
                },
                title: 'Wins'
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['School'],
                title: 'School'
            }],
            series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                renderer: function (sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % colors.length];
                    return barAttr;
                },
                label: {
                    field: 'wins'
                },
                xField: 'School',
                yField: 'wins'
            }],
            interactions: [{
                type: 'panzoom',
                axes: ['bottom']
            }]
        }
    });

}
</code>

EDITED: I am now able to load the json data when I check this in the debugger but my chart is still not getting displayed. Here is my updated code

<code>Ext.regModel('Details', { fields: [{ name: 'School' }, { name: 'wins'}] });

// create the Data Store
window.store1 = new Ext.data.Store({
    model: 'Details',
    proxy: {
        type: 'scripttag',
        url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset',
        reader: {
            root: 'data',
            type: 'json'
        }
    },
    autoLoad: true
});
</code>

признателен, если кто-нибудь может дать мне знать, если я делаю что-то не так.

OLD POST: I am using a json output to bind to my Sencha Column chart. My code is as belows -

<code>Ext.regModel('details', { idProperty: 'name', fields: ['School', 'wins'] });
// create the Data Store
window.store1 = new Ext.data.Store({
    model: 'details',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        method: 'POST',
        url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset',
        reader: {
            type: 'json',
            root: 'data'
        }
    },
    listeners: {
        load: function (obj, records) {
            Ext.each(records, function (rec) {
                console.log(rec.get('name'));
            });
        }
    } 
});
</code>

Это данные JSON, которые возвращаются из URL

<code>{
   data: [
       {School:'Dukes',wins:'3'},
       {School:'Emmaus',wins:'10'},
       {School:'Maryland',wins:'5'},
       {School:'Virginia',wins:'2'}
   ]
}
</code>

Но это не отображает график, вместо этого я получаю ошибку javascript & quot; Ошибка типа uncaught: невозможно прочитать длину свойства undefined & quot; в файле sencha-touch.js.

Если я жестко закодирую данные из вывода json напрямую, то это сработает

<code>window.store1 = new Ext.data.JsonStore({
    root: 'data',
    fields: ['School', 'wins'],
    autoLoad: true,
    data: [
        {School:'Dukes',wins:'3'},
        {School:'Emmaus',wins:'10'},
        {School:'Maryland',wins:'5'},
        {School:'Virginia',wins:'2'}
    ]
});
</code>

Также, когда я загружаю jsonStore из ExtDesigner, он работает нормально. Когда я копирую тот же код в свой файл Secha charts index.js, он не работает.

Может кто-нибудь, пожалуйста, дайте мне знать, что я делаю неправильно в моем коде?

"имя", вашidProperty, нет в списке полей! Замените его на «школа». Erich Kitzmueller
Это моя модель - Ext.regModel («детали», {idProperty: «имя», поля: [«школа», «выигрывает»]); Shazia
Да, даже после замены idProperty он по-прежнему показывает ошибку javascript в файле sencha-touch.js. Shazia
Как выглядит ваша модель? Erich Kitzmueller
Привет, это немного срочно. Спасибо, если кто-то может помочь мне в этом как можно скорее. Shazia

Ваш Ответ

2   ответа
0

но это похоже на проблему, с которой я сталкивался раньше. Я считаю, что проблема с прокси. Пытаться:

proxy: {
    type: 'rest',
    url: 'http://localhost:2650/AjaxWCFService.svc/GetDataset', 
    reader: {
        root: 'data'
    }

},

Теперь вам нужно определить функцию обратного вызова для прокси. Существует элегантный способ с некоторыми настройками, но я, честно говоря, не знаю, как это сделать, поэтому в то время я нашел другое решение, сложный способ, заключающийся в том, чтобы обернуть JSON, который возвращает ваш сервис ( как они делаютВот):

Ext.data.JsonP.callback1();

Если ничего из этого не работает, также рассмотрите возможность добавления следующего в свой прокси-сервер и выдачи «итогового». как часть вашего ответа JSON.

totalProperty: 'total'

Но имейте в виду, что я действительно не думаю, что это сильно поможет, и что я просто выкидываю эти идеи на основе имеющегося у меня рабочего образца.

Попробуйте прочитатьэтот а такжеэтот, И, прежде всего, удачи, вот и вся моя голова, приятель. Также посмотрите наэтот сообщение.

Я надеюсь, что это указывает на правильное направление. Как я уже сказал, я не уверен, это мое лучшее предположение. Я, наверное, ошибаюсь.

ура rivanov

Пожалуйста, обратитесь к моему посту, который я отредактировал, чтобы включить код для привязки моего хранилища данных к столбчатой диаграмме. Shazia
Пожалуйста, дайте некоторое представление о том, как вы собираетесь отображать диаграмму.
спасибо за предложение. Теперь я могу загрузить данные JSON, но моя диаграмма все еще не отображается. Вот модифицированный код - Ext.regModel («детали», {поля: [{имя: «школа»}, {имя: «выиграл»}]}); // создаем хранилище данных window.store1 = new Ext.data.Store ({model: & apos; Details & apos ;, proxy: {type: & apos; scripttag & apos ;, url: & apos;localhost:2650/AjaxWCFService.svc/GetDataset«читатель: {root:« данные », тип:« json »; }}, autoLoad: true}); Пожалуйста, дайте мне знать, если я что-то упустил Shazia
1

run the sample on a web server as loading JSON files from the file system can sometimes cause problems.

Structure the json data as below

{
    "data": [
        {
            "School": "Dukes",
            "wins": "3"
        },
        {
            "School": "Emmaus",
            "wins": "10"
        },
        {
            "School": "Maryland",
            "wins": "5"
        },
        {
            "School": "Virginia",
            "wins": "2"
        }
    ]
}

Use the below data store

window.store1 = new Ext.data.Store({
    model: 'Details',
    proxy: {
        type: 'ajax',
        url: 'GetDataset.json',
        reader: {
            root: 'data',
            type: 'json'
        }
    },
    autoLoad: true
});

Похожие вопросы