I've looked and looked, but can't see how to do this. It
must be easy, but I can't see how:
I have a simple requirement to have a grid on the left which, when a row is clicked, a panel on the right displays various, changing pieces of information, formatted in HTML-type, rich formatting (different font sizes, types etc.).
The question is - what is the best way to realise the right-hand panel? I tried using HTML tags, but I can't get the right-hand panel to refresh/update.
I have added code to capture the selection change event in the left-hand grid and call a function that I want to use to update the details. The function is firing and the value changes, but nothing changes in the HTML that is displayed on screen.
Where am I going wrong with this approach, or is there a better approach?
Code:
var detailText = 'Plan Name';
function updateDetailsPanel() {
detailsPanel.update();
}
var planList = Ext.create('Ext.grid.Panel', {
store: 'planStore',
columns: [{
text: 'Name',
dataIndex: 'Name',
flex: 1
}],
listeners: {
selectionchange: function (grid, selected, eOpts) {
detailText = selected[0].get('Name');
updateDetailsPanel();
}
}
});
var detailsPanel = Ext.create('Ext.panel.Panel', {
items: [{
html: '<h1>' + detailText + '</h1>'
}, {
html: '<p>Created: 12th March 2014</p>'
}]
});
This works fine on loading - the correct text (in this case "Plan Name") gets displayed in large, bold text in the right-hand panel. But when the function fires, and the contents of 'detailText' change (and they do - I checked with an alert), nothing changes in the HTML in the details panel.
I have tried various other methods on the right-hand Panel, including doLayout and updateLayout, but have had no success there either.
Help!!
Novice help displaying data as simple text
