I am a beginner in Ext JS and I have created a basic grid panel but it is not displaying anything in the browser and I am also unable to understand the concept of creating Ext.application() in the app.js file and how to start from the basic app.js file by creating Ext.application(). I am a beginner at this so anybody please help with the code.
Here is my folder structure
---js
-----app
--------model
---------StudentDetailsGridModel.js
--------view
----------MainView.js
--------store
---------StudentDetailsGridStore.js
--------app.js
---index.html
Here is my app.js file and the name of the application is SE.
Ext.application({
name: 'SE',
requires: [
'SE.view.MainView'
],
views: [
'SE.view.MainView'
],
models: [
'StudentDetailsGridModel'
],
stores: [
'StudentDetailsGridStore'
],
launch: function(){
Ext.onReady(function(){
Ext.create('Ext.Viewport',{
layout: 'fit',
});
});
}
}) ;
Here is my view/MainView.js
Ext.onReady(function(){
Ext.define('SE.view.MainView',{
extend: 'Ext.grid.Panel',
id: 'StudentDetailsGrid',
store: 'StudentDetailsGridStore',
layout:'auto',
title: 'Basic Grid',
width: 600,
renderTo: Ext.getBody(),
columns:[{
header: 'StudentName',
dataIndex: 'firstName'
},
{
header: 'Age',
dataIndex: 'age'
},
{
header: 'Marks',
dataIndex: 'marks'
}]
});
});
Here is my model/StudentDetailsGridModel.js
Ext.define('SE.model.StudentDetailsGridModel', {
extend: 'Ext.data.Model',
fields: [
{name: "firstName", type: "string", mapping: "firstName"},
{name: "age", type: "string", mapping: "age"},
{name: "marks", type: "string", mapping: "marks"}
]
});
Here is my store/StudentDetailsGridStore.js
Ext.define('SE.store.StudentDetailsGridStore', {
extend: 'Ext.data.Store',
model: 'SE.model.StudentDetailsGridModel',
data: [
{ firstName : "Asha", age : "16", marks : "90" },
{ firstName : "Vinit", age : "18", marks : "95" },
{ firstName : "Anand", age : "20", marks : "68" },
{ firstName : "Niharika", age : "21", marks : "86" },
{ firstName : "Manali", age : "22", marks : "57" }
]
});
and here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel = "stylesheet" type = "text/css"
href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" />
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
</head>
<body>
<script src='/js/app.js'>
</script>
</body>
</html>
In Mainview you are just defining something, no need to be ready.
In Ext.application you are trying to create non-existing Ext.Viewport. Replace it with your Mainview and you r good to go.