Отношения в моделях на примере гриды.
Есть модель девайсов, среди прочих полей в ней указан массив, хранящий девайсы (будем называть их внутренними), из которых состоит основная запись.
{ data: { deviceId: '12345', name: 'Joystick', devices: [{ deviceId: '1', name: 'button1' }, { deviceId: '2', name: 'button2' }] } } Есть соответствующий стор и грида, которая показывает параметры девайса, кроме внутренних девайсов, нужно сделать так, чтобы при клике на кнопку у гриды появлялся ещё один грид, который уже будет отображать внутренние девайсы. Вот ссылка на пример: https://fiddle.sencha.com/#fiddle/feb Собственно, как сделать, чтобы уже полученные нами данные могли отобразиться во второй гриде? Нужно использовать эти же модели и сторы или нужны другие или они вообще не нужны? Возможно, здесь нужно описать отношения в модели (один ко многим), я их не очень хорошо понимаю, поэтому буду рад пояснениям и по этому вопросу тоже. P.S.: ExtJS 5.1.0 |
то что вы описываете укладывется в дерево (Ext.data.TreeStore):
https://fiddle.sencha.com/#fiddle/fei но можно и ассоциациями сделать ..на вкус и цвет как говорится. |
Нужно именно отдельной гридой.
|
оно?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <link href="http://docs.sencha.com/extjs/4.2.2/extjs-build/resources/css/ext-all-gray-debug.css" rel="stylesheet"/> <script src="http://docs.sencha.com/extjs/4.2.2/extjs-build/ext-all.js"></script> <script> Ext.onReady(function () { var dev = Ext.create('Ext.data.Store', { fields:['deviceId', 'name'], data: [], proxy: { type: 'memory', reader: { type: 'json' } } }); Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'phone', 'obj'], data:{'items':[ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", "obj": [{ deviceId: '1', name: 'button1'}, { deviceId: '2', name: 'button2'}] }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", "obj": [{ deviceId: '1', name: 'button3'}, { deviceId: '2', name: 'button5'}] }, { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244", "obj": [{ deviceId: '1', name: 'button4'}, { deviceId: '2', name: 'button7'}] }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", "obj": [{ deviceId: '1', name: 'button5'}, { deviceId: '2', name: 'button9'}] } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody(), listeners: { select: function (ths, record, index, eOpts) { obj = record.get('obj'); dev.loadData(obj); Ext.create('Ext.window.Window', { title: 'Hello', autoShow: true, height: 200, width: 400, layout: 'fit', items: [{ xtype: 'grid', store: dev, columns: [ { text: 'dev', dataIndex: 'deviceId' }, { text: 'name', dataIndex: 'name', flex: 1 } ] }] }); } } }); }); </script> </head> <body></body> </html> |
Часовой пояс GMT +3, время: 08:41. |