2017-05-05 3 views
0

Ich habe am Sencha-Test gearbeitet und bin in der Lage, alle Attributwerte wie IDs, NAMEN usw. zu finden, um diese in meine Skripte einzufügen , um die Komponente darzustellen. Also, was ich dafür mache, ist gehen Sie auf die Webseite -> Rechtsklick-Komponente -> Inspizieren Sie Element -> und erhalten Sie dann genügend Komponentenattribute durch Bezugnahme auf den HTML-Code. Gibt es eine Möglichkeit, Attributwerte von Komponenten in einer HTML-Seite zu finden, außer sie zu überprüfen ???Bitte Beratung ..So finden Sie Attributwerte von Komponenten in einer anderen HTML-Seite als die Überprüfung

+0

Gibt es eine spezifische xtype auf diese Komponente? Ich meine, welches Feld oder welche Komponente? –

+0

Kein bestimmter Typ.Ich möchte Attributwerte von beliebigen Komponenten wie Textfelder, Combobox, Optionsfelder, Kontrollkästchen, Schaltflächen usw. erhalten. –

+0

* Ich habe an Sencha Test * gearbeitet - Sencha Test (oder) Sencha Touch? –

Antwort

1

Probieren Sie die App Inspector für Sencha Chrome-Erweiterung, die Ihnen hilft, ExtJS und Sencha Touch-Anwendungen viel einfacher zu debuggen.

Es hilft Ihnen auch, Ihre Komponentenstruktur, Datenspeicher, Ereignisse und Layouts zu überprüfen.

Sie können es aus der unten stehenden URL installieren,

App Inspector For Sencha

hoffe, das hilft!

+0

Auch https://www.sencha.com/products/inspector/ – pagep

0

Sie können Strg + u drücken, die Ihnen die Seitenquelle zeigt. Verwenden Sie Strg + F, um das gewünschte Element zu finden. Dies ist einfacher als Inspektionselement.

0

Gehen Sie zur Browserkonsole und führen Sie das folgende Skript aus, um die Liste der Attribute jedes Elements zu sammeln.

var parentEl = document.getElementById("container"); 
 
getElementsAndAttributes(parentEl); 
 

 
function getElementsAndAttributes(container) { 
 
    var all = container.getElementsByTagName("*"); 
 
    for (var i = 0, max = all.length; i < max; i++) { 
 
    console.log(all[i].tagName); 
 
    var attrs = all[i].attributes; 
 
    var keys = Object.keys(attrs); 
 
    for (var j = 0; j < keys.length; j++) { 
 
     var attr = attrs[keys[j]]; 
 
     console.log(attr.name + " -> " + attr.value); 
 
    } 
 
    } 
 
}
<body> 
 
    <div id="container"> 
 
    <span class="title" style="color:GREEN;">Phineas</span> 
 
    <img src="https://cdn.pastemagazine.com/www/blogs/lists/2010/05/12/phineas.jpg" width="104" height="142"> 
 
    </div> 
 
</body>

1

Werte von Komponentenelementen zu erhalten, um programmatisch Attribut:

Erstens die Komponente erhalten. Es gibt verschiedene Möglichkeiten, z. B .:

  • var component = Ext.getCmp(id) bekommt Sie die Komponente mit einer bestimmten ID.
  • var component = Ext.ComponentQuery.query(xtype) bekommt man ein Array aller Komponenten eines bestimmten xtype

Zweitens auf diese Komponente, rufen getEl() oder andere Elementselektoreinrichtung, zB:

  • var el = component.getEl()
  • var el = grid.getView().getEl()
  • var el = formfield.inputEl

Drittens auf dem el, rufen getAttributes:

var attributes = el.getAttributes()

Attribute werden nun ein Objekt wie folgt enthalten:

class:"x-grid-view x-grid-with-col-lines x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable" 
data-componentid:"tableview-1325" 
id:"tableview-1325" 
role:"rowgroup" 
style:"margin: 0px; overflow: auto; width: 317px; height: 664px;" 
tabindex:"0" 
Verwandte Themen