Отображение значений в сетке ext, где значения соответствуют строкам в другой таблице / модели - PullRequest
3 голосов
/ 02 июля 2011

Я учу себя ExtJS, создавая действительно простое приложение для отслеживания разработки. В настоящее время я отображаю «Бэклог» в виде панели сетки, которая отображает свойства карты (история пользователя).

Card.js (модель карты)

Ext.define('AM.model.Card', {
    extend: 'Ext.data.Model',
    fields: [
                'id',
                'name',
                'priority_id',
                ...
            ]
});

Priority.js (Приоритетная модель)

Ext.define('AM.model.Priority', {
    extend: 'Ext.data.Model',
    fields: [
                'id',
                'name',
                'short_name'
            ]
});

Таким образом, данные для карты будут выглядеть примерно так:

backlogcards.json (данные)

{
    success: true,
    backlogcards: [
        {
            id: 1, 
            name: 'ONEs',
            priority_id: 2,
            ...
        },
        {
            id: 2, 
            name: 'TWOs',
            priority_id: 3,
            ...
        }
    ]
}

А приоритеты выглядят так:

priority.json (данные)

{
    success: true,
    priorities: [
        {
            id              : 1, 
            name            : "High",
            short_name      : "H"
        },
        {
            id              : 2, 
            name            : "Medium",
            short_name      : "M"
        },
            {
            id              : 3, 
            name            : "Low",
            short_name      : "L"
        }
    ]
}

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

BacklogList.js (просмотр)

Ext.define('AM.view.card.BacklogList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.backlogcardlist',

    title: 'Backlog',
    store: 'BacklogCards',

    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],

    columns: [
        { header: 'ID', dataIndex: 'id' },
        { header: 'Name', dataIndex: 'name', field: 'textfield' },
        {
            header: 'Priority',
            dataIndex: 'priority_id',
            width: 130,
            field: {
                xtype: 'combobox',
                typeAhead: true,
                store: 'Priorities',
                displayField: 'name',
                valueField: 'id',
                listClass: 'x-combo-list-small'
            }
        }
    ]

});

Так что я знаю, что свойство dataIndex - это то, что мне нужно изменить, чтобы изменить отображение, но я не уверен, как связать эти два хранилища вместе.

Row Editing

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

Это ситуация, когда мне нужно использовать ассоциации? (Я знаю только их) Документы Сенчи

Спасибо!

РЕДАКТИРОВАТЬ1: О, я понимаю, что мог бы «жестко закодировать» свойство средства визуализации, которое делает это изменение, но я хотел бы избежать этого и вместо этого использовать значения из хранилища приоритетов.

    renderer: function(value){
        if (value==3)
        {
            return "L";
        }
        else if (value==2)
        {
            return "M";
        }
        else
        {
            return "H";
        }
    },

EDIT2 для Эвана: Магазин приоритетов

Ext.define('AM.store.Priorities', {
    extend: 'Ext.data.Store',
    model: 'AM.model.Priority',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'app/data/priorities.json',
            update: 'app/data/updateUsers.json'
        },
        reader: {
            type: 'json',
            root: 'priorities',
            successProperty: 'success'
        }
    }
});

store.each ссылается на этот магазин, верно? Если да, то как мне выполнить каждую операцию с ним?

Я попытался изменить строку объявления на:

var test = Ext.define('AM.store.Priorities', {

А затем попытался изменить свой код на test.each, но безуспешно.

Еще раз спасибо!

1 Ответ

4 голосов
/ 02 июля 2011

Вам нужно использовать средство рендеринга, однако ничто не мешает вам перебирать значения в хранилище приоритетов и проверять что-то вроде:

renderer: function(value) {
    var display = '';
    store.each(function(rec){
        if (rec.get('id') === value) {
            display = rec.get('name');
            return false;
        }
    });
    return display;
}
...