Question

我在ExtJS中有两个组件。我正在分别创建一个类。

{
    xtype: 'component',
    id: 'myComponentId',
    listeners: {
        afterrender: function(me, eOpts) {
            var myObj = new SomeClass({
                "divID": this.id,
                "url": "data.json"
            });
        }
    }
}, {
    xtype: 'component',
    width: 30,
    style: {
        color: '#FFFFFF',
        backgroundColor: '#000000'
    }
}, {
    xtype: 'component',
    id: 'myComponentId2',
    listeners: {
        afterrender: function(me, eOpts) {
            var myObj = new SomeClass({
                "divID": this.id,
                "url": "data2.json"
            });
        }
    }
}

Afterrendering我正在创建该类的对象。

SomeClass = function(args) {
    var dataUrl = args.url;
    var divID = args.divID;
    var div = document.getElementById(divID);

    var myTable = '<input type="text" id="myInput"  list="myUL" myOpen = "openingList()" myOpen="openingList()" style="width:100% " >' +
        '<ul id="myUL" hidden=false>' + '<li>' + '<a href="#" ></a>' + '</li>' + '</ul>';
    div.innerHTML = myTable;

    function getData(callback) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', dataUrl, true);
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
                callback(httpRequest.responseText);
            }
        };
        httpRequest.send();
    }
    getData(function(data) {
        var jsonc = JSON.parse(data);
        var new_opt = "";
        for (i = 0; i < jsonc.length; i++) {
            new_opt += '<li><a href="#">' + jsonc[i]['VALUE'] + '</a></li>';
        }
        document.getElementById('myUL').innerHTML = new_opt;
    });
    myOpen = function() {
        var input, filter, ul, li, a, i;
        ul = document.getElementById("myUL");
        ul.hidden = false;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        var splitedVal = filter.split(";");
        filter = (splitedVal[splitedVal.length - 1]);
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";

            }
        }
    }
    return div;
}

现在我正在为两个不同的组件创建两个具有两个不同divID的对象。当我创建第二个对象时，数据（来自data.json）会丢失并出现第二个对象数据。此外，未显示第二个目标的ul标记。

任何人都可以帮我解决这个问题。或者解释一下我做错了什么。

Answer 1

您不能在可重用组件中使用ID，如下所示：

'<input type="text" id="myInput"

'<ul id="myUL"

document.getElementById('myUL')

document.getElementById("myInput")

整个页面的ID必须是全局的，因此您无法重复使用它们。

您可能想要做的是以非全局方式处理这些元素。不确定纯Javascript提供什么; IIRC，ExtJS down()方法仅适用于ExtJS对象。

或者您可以将母组件的ID添加到您使用的ID中，以使其唯一：

'<input type="text" id="myInput-'+divID+'"

'<ul id="myUL-'+divID+'"

document.getElementById('myUL-'+divID)

document.getElementById("myInput"+divID)

Answer 2

简要地查看您的代码后，您似乎正在加载数据并在2个组件中显示该数据。如果是这样，那么你可以大大简化这段代码。请看下面的例子。 http://examples.sencha.com/extjs/6.5.0/examples/classic/view/data-view.html

此示例显示如何通过Ajax加载数据，然后在组件中显示。虽然我知道你有两个组件，但概念是相似的（解耦数据和组件）。

如何从同一个类中获取不同对象的数据

2 个答案: