Форум

isqad88 · #1 (**permalink**) 26.01.2012, 12:56

[ExtJs 4]

Подскажите, как отобразить след. json код в gridpanel

[
  {
    "id":1,"name":"Andrew",
    "orders":[{
      "id":1,"name":"foo"
    },{
      "id":2,"name":"bar"
    }]
  }
]

Мне необходима таблица след .вида:

id | name     | orders
---+----------+---------
1  |  Andrew  | foo
   |          | bar
---+----------+---------

Возможно ли такое в Extjs?

nekto_O · #2 (**permalink**) 26.01.2012, 13:12

Сообщение от isqad88

Возможно ли такое в Extjs?

возможно, самое простое это метод renderer переопределить
http://docs.sencha.com/ext-js/4-0/#!...n-cfg-renderer

isqad88 · #3 (**permalink**) 26.01.2012, 19:06

Ok, а каким образом сделать модель и store для хранения такой структуры и передать ее в grid panel? Я пробовал в модели использовать mapper:

Ext.define('User', {
  extend: 'Ext.data.Model',
  fields: [{
    name: 'id', type: 'int'
  },{
    name: 'name', type: 'string'
  },{
    name: 'orders_name', mapping: 'orders.name'
  }]
});

Но в grid в поле ассоциировым с orders_name (dataIndex: 'orders_name') ничего не выводится.
Подскажите, в каком направлении копать.

nekto_O · #4 (**permalink**) 27.01.2012, 11:06

Сообщение от isqad88

Подскажите, в каком направлении копать.

ну пост выше читайте, переопределить метод renderer у колонки как один из вариантов (скорее всего не самый лучший, но самый быстрый наверное)
по дефолту он возвращает orders как массив из объектов, ну вот, пробегите по массиву и вытащите данные.

isqad88 · #5 (**permalink**) 27.01.2012, 13:36

Спасибо Большое!
Мне нужно на это поле вешать еще editor (Ext.grid.plugin.RowEditing) думаю combobox с multiSelect (так как несколько orders на одного юзера), данные, которые выделены по-умолчанию для этого combobox`а получается брать через ajax?

nekto_O · #6 (**permalink**) 27.01.2012, 14:08

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>пример</title>
<script type='text/javascript' src='http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js'></script>
<link rel="stylesheet" type="text/css" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css">
<script>
Ext.onReady(function() {
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

var combo = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    labelAlign: 'right',
    store: states,
    queryMode: 'local',
    multiSelect: true,
    listeners: {
        select: function(c) {
            if( c.getValue().length>0 )
                Ext.Msg.alert('мессага', 'Выбранные в комбо значения: '+c.getValue());
            else
                Ext.Msg.alert('мессага', 'Выбранных значений нет');
        }
    },
    displayField: 'name',
    valueField: 'abbr'
});

var botton = Ext.create('Ext.button.Button', {
    text: 'Узнать выбранные значения',
    style: 'margin-left: 5px;',
    handler: function() {
       combo.fireEvent('select', combo);
    }
});
Ext.create('Ext.panel.Panel', {
    border: false,
    layout: 'column',
    renderTo: Ext.getBody(),
    items: [
        combo, botton
    ]
});
});
</script>
<body>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript