[ExtJS 4] Rowexpander и Grid. Раскрыть заданный пункт.
 

Доброго времени суток!

Нужна помощь ExtJS 4.
Есть ComboBox. Есть Grid. К Grid'y подключен плагин rowexpander.
ComboBox и Grid берут данные из одного массива.

Цель скрипта: после выбора элемента в ComboBox'e открыть соответствующий rowexpander в табличке.
Т.е. Пользователь в ComboBox'e выбирает «Alcoa Inc» и поле этого в Grid'e в строке с именем компании «Alcoa Inc» rowexplander становится раскрытым.

Проблема: Не могу обратится к записи в таблице и вызвать событие expandbody/collapsebody

После выбора в ComboBox'e я получаю id выбранного пункта, который соответствует id записи в Grid'e, но как его использовать, что б обратится – не могу понять.

grid.getView().getNode(0)

— получилось обратится так, но это не то, что мне поможет.

PS Пока что переменные объявлены window.grid и window.simpleCombo для упрощения отладки

Сам скрипт:

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../examples/ux');

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.ux.RowExpander',
    'Ext.selection.CheckboxModel',
    'Ext.tip.QuickTipManager',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.toolbar.Paging',
    'Ext.ux.SlidingPager',
    'Ext.form.field.ComboBox',
    'Ext.form.FieldSet'
]);

Ext.onReady(function(){
    
    Ext.tip.QuickTipManager.init();

    var myData = [
        ['0','3m Co',71.72,'9/1 12:00am'],
        ['1','Alcoa Inc',29.01,'9/1 12:00am'],
        ['2','Altria Group Inc',83.81,'9/1 12:00am'],
        ['3','American Express Company',52.55,'9/1 12:00am'],
        ['4','American International Group, Inc.',64.13,'9/1 12:00am'],
        ['5','AT&T Inc.',31.61,'9/1 12:00am'],
        ['6','Boeing Co.',75.43,'9/1 12:00am'],
        ['7','Caterpillar Inc.',67.27,'9/1 12:00am'],
        ['8','Citigroup, Inc.',49.37,'9/1 12:00am']
    ];

    Ext.define('Company', {
        extend: 'Ext.data.Model',
        idProperty: 'company',
        fields: [
           {name: 'id', type: 'int'},
           {name: 'company', type: 'string'},
           {name: 'price', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]        
    });

    Ext.define('State', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'int', name: 'id'},
        {type: 'string', name: 'name'}
    ]
});
    
    var store = Ext.create('Ext.data.Store', {
        model: 'Company',
        remoteSort: true,
        pageSize: 3,
        proxy: {
            type: 'pagingmemory',
            data: myData,
            reader: {
                type: 'array'
            }
        }
    });
    
    // create the data store for combobox
	function createStore() {
    return Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'State',
        data: myData
    });
}

    // create the Grid
    window.grid = Ext.createWidget('gridpanel', {
        title:'Sliding Pager',
        store: store,
        columns: [ {
                id:'company',
                text: 'Company',
                sortable: true,
                dataIndex: 'company',
                flex: 1
            },{
                text: 'Price',
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price',
                width: 75
            },{
                text: 'Last Updated',
                sortable: true,
                dataIndex: 'lastChange',
                width: 75
            }],
        stripeRows: true,
        height:320,
        minHeight: 160,
        width:700,
        frame:true, //+ 
        plugins: [{
            ptype: 'rowexpander',
	    id: 'atata',
            rowBodyTpl : [
                '<p>Company: <b>{company}</b></p>',
                '<p><b>$ {price}</b></p>'
            ]
        }],
        collapsible: true,
        animCollapse: false, // end +
        resizable: {
            handles: 's'  
        },
        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 3,
            store: store,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.SlidingPager', {})
        })
    });

    grid.render('grid-example');

    function open_some_plus(val) {
	
	alert(grid.getView().getNode(val));

	}

	// Simple ComboBox using the data store
   window.simpleCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        renderTo: 'simpleCombo',
        displayField: 'name',
        width: 700,
        labelWidth: 400,
        store: createStore(),
        queryMode: 'local',
        typeAhead: true
    });

simpleCombo.on('select', function() {
	var v = simpleCombo.getValue();
	var record = simpleCombo.findRecord(simpleCombo.valueField || simpleCombo.displayField, v);
	var index = simpleCombo.store.indexOf(record);
	open_some_plus(index);
});
    store.load();

});

и html (на всякий случай):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sliding Pager Extension Example</title>

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="shared/example.css" />

    <style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(../shared/icons/fam/grid.png) !important;
        }
        .add {
            background-image:url(../shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(../shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(../shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(../shared/icons/save.gif) !important;
        }
    </style>

    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="app2.js"></script>
</head>
<body>
 <div id="simpleCombo"></div>
 <div id="mydiv_id"></div>
<br/>
<div id="grid-example"></div>
</body>
</html>

Подскажите решение, второй день «об стену бьюсь».:help: