extjs4 - DataView с удаленным (ajax) хранилищем не работает - PullRequest
Новая
       2

extjs4 - DataView с удаленным (ajax) хранилищем не работает

1 голос
/ 18 сентября 2011

Я пытался заставить DataView (он же Ext.view.View) некоторое время работать с удаленным хранилищем, но я не могу заставить его работать.

Поэтому я вернулся к чертежной доске и попытался построить простую на основе компонента dataview документа Sencha ( с этой страницы ).

Когда я запускаю код с примером удаленного хранилища по умолчанию, он работает нормально. Как только я превращаю хранилище в хранилище данных ajax, оно перестает работать.

Вот код, который у меня есть: 

Ext.define("Admin.TestDataView",{

    extend : 'Ext.DataView'

    ,initComponent: function()
    {

        Ext.regModel('Image', {
            Fields: [
                {name:'src', type:'string'},
                {name:'caption', type:'string'}
            ]
        });

        this.thestore = Ext.create('Ext.data.Store', {
            id:'imagesStore',
            model: 'Image',

            // data commented out and replaced with a proxy:
            /* 
            data: [
                {src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
                {src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
                {src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
                {src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
            ],
            */      
            proxy: {
                type: 'ajax',
                url : '/test/somedata',
                reader: {
                    type: 'json',
                    root: 'results'
                }
            },
            autoLoad:true
        });



        var imageTpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div style="thumb-wrap">',
                  '<img src="{src}" />',
                  '<br/><span>{caption}</span>',
                '</div>',
            '</tpl>'
        );

        Ext.apply(this, {
            store: Ext.data.StoreManager.lookup('imagesStore'),
            tpl: imageTpl,
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images available',
            renderTo: Ext.getBody()
        });

        this.callParent(arguments);

    }
});

Как вы можете видеть, это, по сути, пример кода из документа с удаленным хранилищем вместо встроенных данных.

URL / test / somedata - это простой метод контроллера кодигинитера, подобный следующему: 

function somedata()
{
    $data =array(
        'success'=>true,
        'results'=> array(
                array('src'=>'http://www.sencha.com/img/20110215-feat-drawing.png', 'caption'=>'Drawing & Charts'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-data.png', 'caption'=>'Advanced Data'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-html5.png', 'caption'=>'Overhauled Theme'),
                array('src'=>'http://www.sencha.com/img/20110215-feat-perf.png', 'caption'=>'Performance Tuned')
        ));
    echo(json_encode($data));   

}

Все вроде нормально. Консоль Firebug показывает правильный запрос, и данные возвращаются правильно (у меня есть много других контроллеров, возвращающих данные для других вещей, и они отлично работают) ..

За исключением того, что представление пусто.

Интересно, если я добавлю метод prepareData в подкласс dataview следующим образом: 

,prepareData: function(data)
{
    console.log("prepareData(%o)",data);    
    return data;
}

Со встроенными данными firebug показывает это: With

В магазине ajax firebugs показывает это: Without

Один интересный момент заключается в том, что метод prepareData вызывается 4 раза, что указывает на то, что в обоих случаях загружаются 4 записи, но в удаленном хранилище данные записей пусты ..

Есть идеи? Что я делаю не так?

1 Ответ

1 голос
/ 18 сентября 2011

После поиска в различных объектах, созданных с помощью firebug, с моделью что-то выглядело странно.

Оказывается, в Ext doc есть опечатка.

В модели в документе есть поля [...], которые должны быть полями 

    Ext.regModel('Image', {
        fields: [  // <-- here
            {name:'src', type:'string'},
            {name:'caption', type:'string'}
        ]
    });

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

...