Code:
MyPanel = Ext.extend(Ext.FormPanel,
{
myProperty: 10,
layout: 'column',
table: null,
constructor: function(config)
{
var cp = new Ext.state.CookieProvider({
path: "/",
expires: new Date(new Date().getTime()+(1000*60*60*24*3650))
})
Ext.state.Manager.setProvider(cp);
var store = new Ext.data.JsonStore({
fields: [
{name: 'server', type: 'string'},
{name: 'nome', type: 'string'}
]
});
var columnModel = new Ext.grid.ColumnModel([
{header: 'server', sortable: true, dataIndex: 'server'},
{header: 'nome', sortable: true, dataIndex: 'nome'}
]);
// row expander
var templateRow = new Ext.Template(
'<p><b>server:</b> {server}<br>',
'<p><b>nome:</b> {nome}</p>'
);
var expander = new Ext.grid.RowExpander({
id: 'expander',
tpl : templateRow
});
this.table = new Ext.grid.GridPanel({
store: store,
cm: columnModel,
autoScroll: true,
autoHeight: true,
title: 'Array Grid',
plugin: expander,
expander: expander,
enableRowBody:true,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true,
template: templateRow
}
});
this.table.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
});
var myButton = new Ext.Button({
text:'My Button',
handler: function(b, e)
{
//alert ("Adesso popolo la tabella... vediamo se funziona :S");
var myData = [
{server: 'aaa1', nome: 'aaaqN'},
{server: 'aaa3', nome: 'aaarN'},
{server: 'aaa2', nome: 'aaawN'},
{server: 'aaa5', nome: 'aaasN'}
];
store.loadData(myData);
}
});
var selectButton = new Ext.Button({
text:'Selezionato',
handler: function(b, e)
{
alert(this.ownerCt.table.getSelectionModel().getSelected().get('server'));
}
});
Ext.apply(this,
{
items : [this.table, myButton, selectButton]
});
MyPanel.superclass.constructor.apply(this, arguments);
}
}
);
Example run correcty but row expander icon don't appaer...