Форум

frying · #1 (**permalink**) 22.12.2014, 17:24

Есть модель девайсов, среди прочих полей в ней указан массив, хранящий девайсы (будем называть их внутренними), из которых состоит основная запись.

{
    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

siber-biber · #2 (**permalink**) 22.12.2014, 19:05

то что вы описываете укладывется в дерево (Ext.data.TreeStore):
https://fiddle.sencha.com/#fiddle/fei

но можно и ассоциациями сделать ..на вкус и цвет как говорится.

frying · #3 (**permalink**) 23.12.2014, 09:29

Нужно именно отдельной гридой.

skrudjmakdak · #4 (**permalink**) 24.12.2014, 13:10

оно?

<!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>

Форум

Справочник

Discord чат

Курсы javascript