如何使用模型，视图和仅在Ext JS 6中存储来构建基本的网格面板？
[英]How to build a basic grid panel with model, view, store only in Ext JS 6?
问题描述
我是Ext JS的初学者，已经创建了一个基本的网格面板，但是它没有在浏览器中显示任何内容，而且我也无法理解在app.js文件中创建Ext.application()的概念以及如何启动通过创建Ext.application()从基本app.js文件中Ext.application() 。 我是一个初学者，所以任何人都可以帮助代码。
这是我的文件夹结构
---js
-----app
--------model
---------StudentDetailsGridModel.js
--------view
----------MainView.js
--------store
---------StudentDetailsGridStore.js
--------app.js
---index.html
这是我的app.js文件，应用程序的名称为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',
});
});
}
}) ;
这是我的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'
}]
});
});
这是我的模型/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"}
]
});
这是我的商店/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" }
]
});
这是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>
1 个解决方案
解决方案1
0 2019-01-26 17:38:23
在Mainview中，您只需要定义一些内容，而无需准备。
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'
}]
});
在Ext.application中，您尝试创建不存在的Ext.Viewport。 用Mainview替换它，您就可以开始了。
Ext.application({
name: 'SE',
requires: [
'SE.view.MainView'
],
views: [
'SE.view.MainView'
],
models: [
'StudentDetailsGridModel'
],
stores: [
'StudentDetailsGridStore'
],
launch: function(){
Ext.onReady(function(){
Ext.create('SE.view.MainView',{
layout: 'fit',
});
});
}
}) ;
网格面板无法在ext js 6.0.0中呈现存储
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.