Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   grid + store не отображаются данные (https://javascript.ru/forum/extjs/50044-grid-store-ne-otobrazhayutsya-dannye.html)

treasury 09.09.2014 11:56

grid + store не отображаются данные
 
Как ранее писалось на форуме: указывайте в сторе урлу, стора сама дергает эту урлу, сама парсит и сама заносит во вьюв. Теперь подскажите пожалуйста почему не подгружаются данные в мой грид.

Модель:
Ext.define('MyApp.model.Trailer', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String',
        'Ext.data.field.Number'
    ],

    fields: [
        {
            type: 'int',
            allowNull: true,
            name: 'trid',
            unique: true
        },
        {
            type: 'string',
            name: 'name'
        },
        {
            type: 'float',
            name: 'width'
        },
        {
            type: 'string',
            name: 'toe'
        },
        {
            type: 'string',
            name: 'towp'
        }
    ]
});


Store:
Ext.define('MyApp.store.Trailer', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Trailer'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoDestroy: false,
            storeId: 'Trailer',
            model: 'MyApp.model.Trailer',
            proxy: {
                type: 'ajax',
                url: 'http://localhost:3000/find/0/'+Ext.util.Cookies.get("ssid")
            }

        }, cfg)]);
    }
});


Окно с гридом:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToMoveEditor: 1,
                autoCancel: false
            });

            var win = new Ext.Window({
               
                modal: true,
                width:600,
                height:400,                
                title: 'Свойства объекта: '+record.data.nm,                
                layout:'fit',
                bodyStyle:{'background-color': '#FFFFFF'},

                items: [
                    {

                        xtype: 'gridpanel',
                        title: 'My Grid Panel',
                        itemId: 'Trail',
                        id: 'Trail',
                        header: false,
                        width: '100%',
                        store: 'Trailer',

                        columns: [
                            {
                                xtype: 'numbercolumn',
                                dataIndex: 'trid',
                                formatter: 'round(0)',
                                format: '0',
                                width: '10%',
                                text: 'Код',
                                editor: {                                    
                                    allowBlank: false,
                                    formatter: 'round(0)',
                                    blankText: 'Содержимое поля не может быть пустым'

                                }

                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'name',
                                width: '30%',
                                text: 'Наименование',
                                blankText: 'Содержимое поля не может быть пустым',
                                flex: 1,
                                editor: {
                                    allowBlank: false,
                                    blankText: 'Содержимое поля не может быть пустым'
                                }
                            },
                            {
                                xtype: 'numbercolumn',
                                dataIndex: 'width',
                                width: '10%',
                                format: '0.00м',
                                text: 'Ширина',
                                editor: {
                                    allowBlank: false,
                                    blankText: 'Содержимое поля не может быть пустым'
                                }

                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'toe',
                                width: '25%',
                                text: 'Тип оборудования',
                                blankText: 'Содержимое поля не может быть пустым',

                                editor: {
                                    allowBlank: false,
                                    blankText: 'Содержимое поля не может быть пустым'
                                }
                            },
                            {
                                xtype: 'gridcolumn',
                                dataIndex: 'towp',
                                width: '25%',
                                text: 'Тип выполняемых работ',
                                blankText: 'Содержимое поля не может быть пустым',

                                editor: {
                                    allowBlank: false,
                                    blankText: 'Содержимое поля не может быть пустым'
                                }
                            }

                        ],


                        tbar: [  // верхний тулбар с кнопками удаления и вставки

                            {

                                text: 'Добавить прицеп',
                                icon : 'image/add.jpg',

                                handler : function() {
                                    rowEditing.cancelEdit();

                                    // Create a model instance
                                    var r = Ext.create('MyApp.model.Trailer', {
                                        name: 'Новый прицеп',
                                        id: '0',
                                        width: '0.00'
                                    });

                                    store.insert(0, r);
                                    rowEditing.startEdit(0, 0);
                                }
                            },


                            {

                                itemId: 'removeTrail',
                                text: 'Удалить прицеп',
                                icon : 'image/delete-icon.png',

                                handler: function() {

                                    var sm = Ext.getCmp('Trail').getSelectionModel();
                                    rowEditing.cancelEdit();
                                    rec = sm.getSelection();

                                    Ext.Msg.confirm("Удаление", "Вы действительно хотите удалить прицеп<b> " + rec[0].data.name +'</b>?', function(button){

                                        if (button == 'yes') {

                                            store.remove(rec);

                                            if (store.getCount() > 0) {
                                                sm.select(0);
                                            }


                                        } else {
                                            return false;
                                        }
                                    });

                                },

                                disabled: true


                            }],

                        plugins: [rowEditing],
                        listeners: {
                            'selectionchange': function(view, records) {
                                Ext.getCmp('Trail').down('#removeTrail').setDisabled(!records.length);
                            }
                        }

                    }

                ]

            });

            win.show();

        }


Через браузер url который указан в store возвращает json:

[{"user_id":"540dc440237c493948cb5d94","trid":"1"," name":"1","width":"1","toe":"1","towp":"1","_id":" 540ea56cfa420570147a5344"},{"user_id":"540dc440237 c493948cb5d94","trid":"2","name":"2","width":"2"," toe":"2","towp":"2","_id":"540ea574fa420570147a534 5"}]

siber-biber 09.09.2014 17:48

у вас похоже каша в голове по поводу организации классов в эксте.. либо я чёто не понимаю в extjs5 (хотя вряд ли они такой прыжок вбок замутили после 4й версии).
Ext.define() - определяет класс (тип данных объектный).
Ext.create() - создает сам объект данного типа.

Так вот я нигде не вижу создания стора. Ну и демонстрация путаницы вот этот кусок:
Ext.define('MyApp.store.Trailer', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Trailer'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoDestroy: false,
            storeId: 'Trailer',
            model: 'MyApp.model.Trailer',
            proxy: {
                type: 'ajax',
                url: 'http://localhost:3000/find/0/'+Ext.util.Cookies.get("ssid")
            }

        }, cfg)]);
    }
});

Здесь вы определяете класс MyApp.store.Trailer. А в конструкторе класса вы каждому создаваемому экземпляру присваиваете один и тот же storeId (хотя он предполагает быть уникальным). Я понимаю что у вас наверно один экземпляр этого класса нужен, но должно выглядеть както так:
Ext.define('MyApp.store.Trailer', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.Trailer',
    proxy: {
        type: 'ajax',
        url: 'http://localhost:3000/find/0/'+Ext.util.Cookies.get("ssid")
    }
});

Ext.create('MyApp.store.Trailer', {
    storeId: 'Trailer'
});

siber-biber 09.09.2014 20:59

еще в описании модели вот эти строки не нужны:
requires: [
        'Ext.data.field.Integer',
        'Ext.data.field.String',
        'Ext.data.field.Number'
    ],


Часовой пояс GMT +3, время: 19:08.