Не удается получить внешние данные в диаграмму ExtJS (Sencha Touch) - PullRequest
1 голос
/ 17 августа 2011

РЕДАКТИРОВАТЬ: ОТВЕТИТЬ Сработало. Публикация в Stack Overflow фактически указала мне на ответ!

Похоже, что в Ext.data.JsonStore есть что-то смешное с Sencha Touch. Возможно, некоторые из значений по умолчанию не совсем так, как ожидалось. Переименовал файл в test.json (не уверен, что это было необходимо)

Следующий код из Как разобрать этот формат XML-данных? сработало,

Ext.regModel('tester', {
         idProperty: 'name',
         fields: ['name', 'data1', 'data2', 'data3']
     });
      var store = new Ext.data.Store({
         model: 'tester',
         autoLoad: true,
         proxy: {
             type: 'ajax',
             method: 'GET',
             url: 'test.json',
             reader: {
                 type: 'json',
                 root: 'test'
             }
         },
         listeners: {
             load: function(obj, records){
                 Ext.each(records, function(rec){
                     console.log(rec.get('name'));
                 });
             }
         }
     }); 

ОРИГИНАЛЬНЫЙ ВОПРОС

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

Ниже приведен код моего магазина, который не работает.

    window.store1 = new Ext.data.JsonStore({
         autoload: true,
         url: 'test.php',
      root: 'test',
         idProperty: 'name',     
         fields: ['name', 'data1', 'data2', 'data3']
     });

, где

test.php =

{ "test" : {
        "data": [
          { "name": "Mon", "data1":47.5, "data2":20,    "data3":10},
                { "name": "Tue", "data1":30, "data2":30, "data3":30},
                { "name": "Wed", "data1":31.1, "data2":40, "data3":20},
                { "name": "Thu", "data1":21.1, "data2":20, "data3":30},
                { "name": "Fri", "data1":20.7, "data2":20, "data3":10},
                { "name": "Sat", "data1":22.4, "data2":30, "data3":30},
                { "name": "Sun", "data1":28.3, "data2":40, "data3":20}


        ]
    }
    }

Если я от руки кодирую, данные, как показано ниже, серии графиков отображаются правильно.

 window.store1 = new Ext.data.JsonStore({

            fields: ['name', 'data1', 'data2', 'data3'],
            data: [
            { "name": "Mon", "data1":47.5, "data2":20, "data3":10},
            { "name": "Tue", "data1":30, "data2":30, "data3":30},
            { "name": "Wed", "data1":31.1, "data2":40, "data3":20},
            { "name": "Thu", "data1":21.1, "data2":20, "data3":30},
            { "name": "Fri", "data1":20.7, "data2":20, "data3":10},
            { "name": "Sat", "data1":22.4, "data2":30, "data3":30},
            { "name": "Sun", "data1":28.3, "data2":40, "data3":20}
            ]
        });

Демоверсии диаграмм (новые сенсорные диаграммы Sencha) генерируют массив данных с примерами, подобными этим, и я не могу найти пример для заполнения через простой источник JSON.

window.generateData = function(n, floor) {
            var data = [],
                p = (Math.random() * 11) + 1,
                i;

            floor = (!floor && floor !== 0) ? 20 : floor;

            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Date.monthNames[i % 12],
                    2008: Math.floor(Math.max((Math.random() * 100), floor)),
                    2009: Math.floor(Math.max((Math.random() * 100), floor)),
                    2010: Math.floor(Math.max((Math.random() * 100), floor)),
                    data1: Math.floor(Math.max((Math.random() * 100), floor)),
                    data2: Math.floor(Math.max((Math.random() * 100), floor)),
                    data3: Math.floor(Math.max((Math.random() * 100), floor)),
                    data4: Math.floor(Math.max((Math.random() * 100), floor)),
                    data5: Math.floor(Math.max((Math.random() * 100), floor)),
                    data6: Math.floor(Math.max((Math.random() * 100), floor)),
                    data7: Math.floor(Math.max((Math.random() * 100), floor)),
                    data8: Math.floor(Math.max((Math.random() * 100), floor)),
                    data9: Math.floor(Math.max((Math.random() * 100), floor)),
                    time: Math.floor(Math.max((Math.random() * 100), floor)),
                    registrations: Math.floor(Math.max((Math.random() * 100), floor)),
                    hours: Math.floor(Math.max((Math.random() * 100), floor)),
                    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() * 1000), floor))
                });
            }
            return data;
        };

 window.store2 = new Ext.data.JsonStore({
            fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9'],
            data: generateData(6, 20)
        });

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

Ответы [ 3 ]

2 голосов
/ 15 ноября 2011
window.generateData = function() {
        var data = [{name:"January", iphone:43, android:70, blackberry:20}, {name:"February", iphone:23, android:10,  blackberry:20}, {name:"March", iphone:64, android:47, ipad:66,  blackberry:20}, {name:"April", iphone:12, android:29, ipad:67,  blackberry:20}, {name:"May", iphone:62, android:97, ipad:94,  blackberry:20}];
        return data;        
        };
0 голосов
/ 17 августа 2011

Используйте модель, правильно настройте прокси с ридером. Я считаю, что ваш корень должен быть test.data

0 голосов
/ 17 августа 2011

Я предполагаю, что у вас правильный путь к test.php, и вы не пытаетесь открыть его с другого сайта. Ваш JSON действителен? Можете ли вы проверить (с чем-то вроде FireBug), что test.php загружен нормально?

Я бы тоже заключил числовые значения в кавычки ("), чтобы быть в безопасности.

...