Доброго времени суток!
Нужна помощь 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>
Подскажите решение, второй день «об стену бьюсь».
