Question

我正在尝试动态更改面板中的BUTTON上的文字：

我给出的初始文字是：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';}
           }]
});

这是我使用它来改变文本的piont：

    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());
                                            }
                                     }]
                        });

当我点击“SHAKE”按钮时，“gost”的值会更新，但如何将更新的gost文本应用到底部的面板中，其中有按钮........... ..

Answer 1

使用布局表格中的动态文字为道具添加ID，例如'id = titleCell'。

在更新文本后调用此函数，删除此单元格中的现有文本节点并添加新文本节点。

function updateTitle() {
  var titleCell = document.getElementById('titleCell');
  var updatedTitleText = document.createTextNode(gost);

  titleCell.removeChild(titleCell.firstChild);
  titleCell.appendChild(updatedTitleText);
}

您可以在更新gost var

后直接调用它

Answer 2

什么不是topdetail和shakepanel？ - 应该是PAPA（与兄弟一起向PAPA更新的谈话）....

在shakepanel中 - ＆gt;按钮 - ＆gt; handler：fireEvent（'gostChanged'，gost）
告诉PAPA听（以听众或.on方式）
当捕获PAPA将更改底部的html - ＆gt;按钮（最好有参考：更容易访问，而不是Ext.getComp或其他搜索）

Answer 3

Ext.Button对象有一个.setText（newText）方法。所以像（高度释义）：

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');
        }
    }]
});     

...

我不完全确定你为什么要将一个完整的HTML表格放在一个按钮中，但是......希望你能得到这个想法。

如果您尝试将更改数据绑定到组件（如按钮或面板），也许在这样的任意HTML内部，您可以探索tpl选项，它创建一个模板，然后您可以.update（）< / p>

如何动态更改布局文本？

3 个答案: