Wie man einfache Extjs 6 Komponente in HTML zeigt?

Mein Ziel ist es, eine einfache Komponente mit EXTJS 6 (Grid zum Beispiel) zu erstellen und sie in einem HTML-Div anzuzeigen, aber ich weiß nicht, welche Ressourcen ich dafür benötige. Dies ist mein Code:Wie man einfache Extjs 6 Komponente in HTML zeigt?

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-  thymeleaf-spring3-3.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<link rel="stylesheet" type="text/css" th:href="@{/js/ext-6/classic/theme-triton/resources/theme-triton-all.css}" /> 
<link rel="stylesheet" type="text/css" th:href="@{/js/ext-6/packages/charts/classic/triton/resources/charts-all.css}" /> 
<link rel="stylesheet" type="text/css" th:href="@{/js/ext-6/packages/ux/classic/triton/resources/ux-all.css}" /> 

<script type="text/javascript" th:src="@{/js/ext-6/ext-all.js}" src="../../../js/ext-6/ext-all.js" > </script> 
<script type="text/javascript" th:src="@{/js/ext-6/classic/theme-triton/theme-triton.js}" src="../../../js/ext-6/classic/theme-triton/theme-triton.js"></script> 
<script type="text/javascript" th:src="@{/js/ext-6/packages/charts/classic/charts.js}" src="../../../js/ext-6/packages/charts/classic/charts.js"></script>  
<script type="text/javascript" th:src="@{/js/ext-6/packages/ux/classic/ux.js}" src="../../../js/ext-6/packages/ux/classic/ux.js"></script> 

<title>Ext6 </title> 
</head> 
<body> 
<script th:inline="javascript"> 
    /*<![CDATA[*/ 

Ext.onReady(function() { 
var store = Ext.create('Ext.data.Store', { 
    fields: ['name', 'email', 'phone'], 
    data: [ 
     { 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" } 
    ] 
}); 

Ext.create('Ext.grid.Grid', { 
    title: 'Simpsons', 
    renderTo : Ext.get("grid"), 
    store: store, 

    columns: [ 
     { text: 'Name', dataIndex: 'name', width: 200 }, 
     { text: 'Email', dataIndex: 'email', width: 250 }, 
     { text: 'Phone', dataIndex: 'phone', width: 120 } 
    ], 

    height: 200, 
    layout: 'fit', 
    fullscreen: true 
}); 
}); 
/*]]>*/ 
</script> 

<div id="grid"> 
</div> 
</body> 
</html>

Dieses einfache Beispiel wird mir helfen, meine alte Anwendung erstellt von ExtJS 4.

Quelle

2016-04-11 Wakrim

und ich bin so sory für mein schlechtes Englisch :) – Wakrim

Was ist das Problem, es zeigt nicht das Raster? Gibt es Fehler in der Konsole? – serg

div erstellen, document.getElementById verwenden, um div zu erhalten. Holen Sie sich das Grid-Element durch Zuweisung in der a-Variablen myGrid = Ext.create ('Ext.grid.Grid ... und fügen Sie ein Kind an das Div. – aviram83

Ext.grid.Grid ist keine gültige Klasse in ExtJS zu aktualisieren. Die richtige Klasse für ein Raster ist Ext.grid.Panel.

Versuchen Sie Folgendes:

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    renderTo : Ext.get("grid"), 
    store: store, 

    columns: [ 
     { text: 'Name', dataIndex: 'name', width: 200 }, 
     { text: 'Email', dataIndex: 'email', width: 250 }, 
     { text: 'Phone', dataIndex: 'phone', width: 120 } 
    ], 

    height: 200, 
    layout: 'fit', 
    fullscreen: true 
});

es jetzt Funktioniert?

Quelle

2016-04-12 09:03:01 ASP

ja tanken Sie @ASP – Wakrim

Wie man einfache Extjs 6 Komponente in HTML zeigt?

Antwort

Verwandte Themen