This is exactly what I need for my project, but I can't get toolbars to work within the panels. I am assuming they are not supported or is this a bug?
Code:
new Ext.ux.grid.RowPanelExpander({
createExpandingRowPanelItems: function(record, rowIndex) {
var panelItems = [
new Ext.Panel({
height: 200,
autoScroll: true,
record: record,
tbar: new Ext.Toolbar({
items: [
{
xtype: 'tbbutton',
text: 'Edit',
icon: './resources/icons/page_white_edit.png'
}
]
}),
html: record.data.desc
})
]
return panelItems;
}
});
Fixed this problem by adding the toolbar after the panel is created. Here is my code...
Code:
var mdlDescExpander = new Ext.ux.grid.RowPanelExpander({
createExpandingRowPanelItems: function(record, rowIndex) {
var text = record.data.desc;
var desc = new Ext.Panel({
layout: 'fit',
autoScroll: true,
maxHeight: 200,
items: new Ext.Panel({
border: false,
frame: false,
autoHeight: true,
autoWidth: true,
autoScroll: true,
html: '<div style="padding:10px" class="clean_style">' + record.data.desc + '</div>'
})
});
desc.elements += ',tbar';
desc.topToolbar = new Ext.Toolbar({
items: [
{
xtype: 'tbtext',
text: 'Description'
},
{
xtype: 'tbtext',
text: '<img src="./resources/icons/line_break.png" />'
},
{
text: 'Open Editor',
icon: './resources/icons/page_white_edit.png',
handler: function() {
openTinyMCE('Model Description Editor', text);
}
}
]
});
var panelItems = [desc]
return panelItems;
}
});