Question

我是Ext JS的初学者，已经创建了一个基本的网格面板，但是它没有在浏览器中显示任何内容，而且我也无法理解在Ext.application()中创建app.js的概念文件以及如何通过创建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>

Answer 1

在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中存储来构建基本的网格面板？

1 个答案: