如何从同一类中为不同的对象获取数据答案

【问题标题】：How to fetch data from same class for different objects如何从同一类中为不同的对象获取数据
【发布时间】：2017-07-06 09:06:05
【问题描述】：

我在 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"
            });
        }
    }
}

渲染后我正在创建该类的对象。

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 标签。

谁能帮我解决这个问题。或者向我解释我做错了什么。

【问题讨论】：

标签： javascript html object extjs

【解决方案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)

【讨论】：

我可以用class代替ID吗？

【解决方案2】：

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

这个例子展示了如何通过 Ajax 加载数据，然后在组件中显示。虽然我知道您在这里有 2 个组件，但概念是相似的（解耦数据和组件）。

【讨论】：