How do i change my layout text dynamically? - html

Question

i'm trying to change the Text on the BUTTON dynamically which is in the panel:
the initial text i've given is: var gost = "HPCL Jan 20 Put,40 cents ..";
var bottomdetail = new Ext.Panel({
flex:1,
padding: 1,
layout : {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
stretchX: true,
items:[{
xtype: 'button',
flex: 1,
baseCls: 'round',
html: '<table border="0" height="100%" width="100%"><tr><td width="100%" style="color:#fff; padding-left:5px;" valign="middle">'+ gost + '</td><td valign="middle" align="right" style="padding-right:5px;"><img src="resources/Images/rightarrow.png"></img></td></tr></table>',
handler: function(){window.location='DetailsPanel.html';}
}]
});
here is the piont where i use it to change the text :
var shakepanel = new Ext.Panel({
layout : {
type: 'hbox',
pack: 'center',
align: 'stretch'
},
stretchX: true,
flex:1,
disable: true,
items: [{
xtype: 'button',
disable: true,
layout: 'fit',
ui: 'decline',
text: 'SHAKE',
flex:1,
handler: function(){
gost="ola i changed it";
alert(bottomdetail.getText());
}
}]
});
when i click on the button "SHAKE" the value of the "gost" is updated but how to apply the updated gost text to the bottomdetail panel which has the button in it.............

Answer 1

Ext.Button objects have a .setText(newText) method. So something like (highly paraphrased):
var button = new Ext.Button({
title: 'Text1',
});
var bottomdetail = new Ext.Panel({
items:[button]
});
var shakepanel = new Ext.Panel({
items: [{
xtype: 'button',
handler: function() {
button.setText('Text2');
}
}]
});
...
I am not entirely sure why you are placing a whole HTML table inside a button, but... hopefully you get the idea.
If you are trying to bind changing data to a component (like a button or a panel), perhaps inside arbitrary HTML like this, you might explore the tpl option, which creates a template which you can then .update()

Answer 2

What is not top off bottomdetail and shakepanel ? - should be PAPA ( newer talk to brother always to PAPA )....
In shakepanel -> button -> handler : fireEvent ( 'gostChanged', gost )
Tell PAPA to listen to it ( in listener or .on method )
When catched PAPA will change html on bottomdetail -> button ( it will be nice to have ref: there for easier access instead Ext.getComp or other search )

Answer 3

Add an id to the TD with your dynamic text in your layout table, say 'id=titleCell'.
Then call this function after you have updated your text, to remove the existing text node in this cell and add your new one.
function updateTitle() {
var titleCell = document.getElementById('titleCell');
var updatedTitleText = document.createTextNode(gost);
titleCell.removeChild(titleCell.firstChild);
titleCell.appendChild(updatedTitleText);
}
You can call it directly after you update your gost var