PDA

View Full Version : Grid with RowExpander



luca.santaniello
26 Nov 2009, 6:39 AM
Hi,

I want extend my grid using row expand... but i don't understand...

My code is



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

Help me please

Thanks :((