Question

我非常感谢您对以下问题的任何帮助：

我需要能够更改项目的内容（div或textfield），但问题是同一个窗口会有多个实例，所以我不能使用div ID。

我尝试了这个小例子：

var myBtnHandler = function(btn) {
    myPanel.items.items[0].html = "Changed by click!";
    myPanel.doLayout();
}

var fileBtn = new Ext.Button({
    text : 'Change',
    handler : myBtnHandler
});

var panel1 = {
    html : 'Original content.'
};

var myPanel = new Ext.Window({
    title : 'How to change it?',
    items : [
        panel1,
        fileBtn
    ]
});
myPanel.items.items[0].html = "Changed on load!";
myPanel.show();

通过myPanel.items.items [0]引用元素可以在加载时工作但在按钮处理程序中不起作用 - 它是否与范围相关的问题？如何引用没有ID的元素？

非常感谢，

小时。

Answer 1

问题与范围无关。第一次设置html属性时，组件尚未呈现，因此在初始渲染时，它将从组件中读取html属性。第二次，你只是在一个对象上设置一个属性，它不会以任何方式做出反应。

相反，您应该使用update（）方法。

Ext.require('*');

Ext.onReady(function() {
    var myBtnHandler = function(btn) {
        myPanel.items.first().update("Changed by click!");
    }
    var fileBtn = new Ext.Button({
        text: 'Change',
        handler: myBtnHandler
    });

    var panel1 = {
        html: 'Original content.'
    };

    var myPanel = new Ext.Window({
        title: 'How to change it?',
        items: [panel1, fileBtn]
    });
    myPanel.items.items[0].html = "Changed on load!";
    myPanel.show();
});

Answer 2

有几个函数遍历属于容器的元素。尝试使用例如down（）：

btn = panel.down('button');

其中'button'参数意味着'给我元素哪个类型等于'按钮'。查看Sencha doc以查询各种元素：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery

Answer 3

继Sha的回复之后。将你的建议与你的榜样结合起来。

var myBtnHandler = function(btn) {
    btn.up('window').down('panel').update('Changed by click!');
}

var fileBtn = new Ext.Button({
    text : 'Change',
    handler : myBtnHandler
});

var panel1 = {
    html : 'Original content.'
};

var myPanel = new Ext.Window({
    title : 'How to change it?',
    items : [
        panel1,
        fileBtn
    ]
});

myPanel.show();
myPanel.update('Changed on load!');

Ext JS 4 - 如何更改ID无法引用的项目的内容

3 个答案: