Поместите набор значений из строки json в форму, используя модель представления в extjs5

Я работаю над своим первым приложением extjs (5), и у меня есть два основных вопроса: один о структуре, а другой - технический вопрос. Мое приложение представляет собой панель администратора. У меня есть таблица базы данных с парами ключ-значение с такими настройками, как имя сайта, ключевые слова, мета-описание и так далее. Теперь я хочу создать форму, в которой пользователь может редактировать эти параметры. Моя проблема в том, что я не могу отобразить эти параметры в форме.

Вот модель для вариантов:

Ext.define('Wp.model.Option', {
    extend: 'Wp.model.Base',
    idProperty: 'name',

    fields: [
        {name: 'name', type: 'string'},
        {name: 'value', type: 'string'}
    ]
});

У меня есть следующая точка зрения:

Ext.define('Wp.view.settings.BasicSettings', {
    extend: 'Ext.form.Panel',
    xtype: 'wp-basic-settings',
    defaultType: 'textfield',
    title: 'Grundeinstellungen',
    cls: 'content-container',

    requires: [
        'Wp.view.settings.BasicSettingsModel'
    ],

    viewModel: 'basic-settings',

    fieldDefaults: {
        labelWidth: 250,
        width: '100%'
    },

    items: [{
        bind: '{siteName}',
        fieldLabel: 'Name',
        allowBlank: false

    },{
        bind: '{lang}',
        fieldLabel: 'Lokalisierung',
        allowBlank: false

    }],
    buttons: [{
        text: 'Speichern',
        formBind: true,
        listeners: {
        }
    }]
});

Если я правильно понимаю MVVC, правильным решением будет создание модели представления, которая будет получать набор опций типа Wp.model.Option и «передавать» ее представлению.

Я пробовал разные модели просмотра, но не могу заставить их работать.

Ext.define('Wp.view.settings.BasicSettingsModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.basic-settings',

    requires: [
        'Wp.model.Option'
    ],

    stores: {
        data: {
            model: 'Wp.model.Option',
            proxy: {
                type: 'rest',
                url: 'BasicSettings.json'
            },
            reader: {
                type: 'json'
            },
            autoLoad: true
        }
    },

    formulas: {
        siteName: function (get) {
            return get('data')[0].value;
        },

        lang: function (get) {
            return get('data')[1].value;
        }
    }
});

Ответ, который я получаю от сервера, примерно такой:

{"data":[{"name":"siteName","value":"Some site name"},{"name":"lang","value":"en"}]}

(пробовал разные версии, с корневым элементом и rootProperty, без него, со свойством успеха, формат менять могу - не проблема).

Результат всегда один и тот же: пустые поля. Проблема, похоже, в асинхронном запросе, потому что он отлично работает с хранилищем в памяти. Но я не знаю, как я могу «ждать» запроса и затем получать значения из json, где я могу поместить что-то вроде «загрузить» прослушиватель.

Я также пробовал «ссылки:» и «ссылка» вместо «магазины:», но тогда я получаю [object Object] в полях и не знаю, что я могу с этим сделать.

Является ли моя попытка решить мою проблему по крайней мере правильной? Как я могу добиться правильного отображения материала из строки json в моей форме?

PS: за эти два дня я прочитал много материала с похожими вопросами на StackOverflow и на форуме sencha, но я не мог использовать предложенные решения для моей проблемы, так что извините, если я что-то не понимаю. Спасибо.


extjs extjs5
person belka    schedule 03.01.2015    source источник
comment
Возможно, у вас тоже есть свойство RecordProperty. В противном случае он предполагает записи вместо данных. Итак, RecordProperty: данные   -  person Johan Van de Merwe    schedule 29.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

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

Чтобы иметь возможность загружать данные в форму и редактировать/сохранять их, было бы намного проще, если бы ваш JSON был в таком формате:

{
   "siteName": "some sites name",
   "lang": "en" 
}

Для работы с данными в формате, который вы предоставили выше, я думаю, что редактируемая сетка будет более подходящей и простой в использовании:

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.define('WpOption', {
            extend: 'Ext.data.Model',
            idProperty: 'name',

            fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},
                {name: 'value', type: 'string'}
            ]
        });

        var store = new Ext.data.JsonStore({
            // store configs
            storeId: 'myStore',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: '/data/data5.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            },

            model: "WpOption",
            listeners: {
                "load": function() {
                    console.log(this.getCount());
                }
            }

        });

        Ext.create('Ext.grid.Panel', {
            title: 'Testing',
            store: store,
            columns: [
                { text: 'Name',  dataIndex: 'name', flex: 1 },
                { text: 'Phone', dataIndex: 'value', flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }
            ],
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

// data/data5.json - I added an ID field, which would be needed for editing

{
    "data": [
        {
            "id": 1,
            "name": "siteName",
            "value": "Some site name"
        },
        {
            "id": 2,
            "name": "lang",
            "value": "en"
        }
    ]
}

Приведенные ниже ссылки должны быть хорошим чтением для вашего вопроса:

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

person Scriptable    schedule 07.01.2015
comment
Спасибо. Я не полностью принял ваше решение, но благодаря вашему ответу я обнаружил, что extjs предоставляет свойствоGrid, и это то, что я действительно искал. Мне понадобятся формы для других вещей, таких как редактирование пользователей. Посмотрим, избавлюсь ли я тогда от форм. - person belka; 09.01.2015