Как построить базовую сетку панели с моделью, просмотром, хранением только в Ext JS 6? - PullRequest
Новая
       51

Как построить базовую сетку панели с моделью, просмотром, хранением только в Ext JS 6?

0 голосов
/ 21 января 2019

Я новичок в 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',

            });
        });
    }
}) ;

Вот мой взгляд / 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 Ответ

0 голосов
/ 26 января 2019

В 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',

            });
        });
    }
}) ;
...