RomAZE
RomAZE

Reputation: 27

Ext JS application blank page

my app.js

Ext.application( {
    name: 'rgpd',
    appFolder: 'app',
    controllers: [
        'cMain'
    ],
    autoCreateViewport: true,
    init: function() {
    },
    launch: function(){
    }
});

here is my viewport (autoCreateViewport is set on true) (view/Viewport.js)

Ext.define('rgpd.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    items: [
        {
            xtype: 'tabpanel',
            id: 'Rgpd',
            region: 'center',
            tabPosition: 'left',
            titleRotation: 0,
            tabRotation: 0,
            padding:0,
            margin:0,
            split: true,
            header: {
                layout: {
                    //align: 'stretchmax'
                },
                title: {
                    text: 'RGPD',
                    flex: 0
                },
                glyph: 124,
                items: [
                ]
            },
            items: [
                {
                    xtype: 'exemple',
                    textAlign: 'right',
                    flex: 1,
                },
            ]
        }
    ]
});

finally here is my exemple view (view/Exemple/View.js)

Ext.define('rgpd.view.Exemple.View', {
    extend: 'Ext.Panel',
    xtype: 'exemple',
    id: "exemple",
    title: "Exemple",
    layout: {
        type: 'border',
        pack: 'stretch',
        align: 'stretch'
    },
    padding:20,
    items: [
        {
            title: 'Hello Ext',
            html: 'Hello! Welcome to Ext JS.'
        }
    ]
});

but I get a blank page. The final goal is to display a grid containing all the content of a database table but i can't even display HTML. Is there a mistake somewhere?

edit

here is my controller. Then thanks to help the problem comes from there but i've all my models, stores and views in the controller how can i fix it ?

Ext.define('rgpd.controller.cMain', {
    extend: 'Ext.app.Controller',
    models: [
        'mExemple',
        'mCorpsMetier',
        'mUtilisateur'
    ],
    stores: [
        'sExemple',
        'sCorpsMetier',
        'sUtilisateur'
    ],
    views: [
        'Exemple.View',
        'CorpsMetier.View'
    ],
    init: function() {
        this.control({
        });
    },
    onLaunch: function() {
    },
});

Upvotes: 0

Views: 466

Answers (1)

Vy Do
Vy Do

Reputation: 52508

File app.js should like

Ext.application({

    name: 'rgpd',
    appFolder: 'app',

    requires: [
        'rgpd.*'
    ],

    mainView: 'rgpd.view.Viewport',

    controllers: [
        'cMain'
    ],

    autoCreateViewport: true,

    init: function () {

    },

    launch: function () {

    }
});

(Add requires and mainView)

Upvotes: 1

Related Questions