how to make a “MVC Application” with extjs 4.0 beta 3?

问题

Is there someone here who made a MVC application using EXTJS 4 BETA 3? and works fine?? please help me how?, ..

I have followed step by step here .. and @Abdel Olakara help

but there is still an error ... here my firebug

[Ext.Loader] Synchronously loading 'AM.controller.Users'; consider adding  
Ext.require('AM.controller.Users') above Ext.onReady  

[Ext.Loader] Synchronously loading 'AM.store.Users'; consider adding  
Ext.require('AM.store.Users') above Ext.onReady

this.getView('Viewport') is null

When i read this at the forum ... there are still some bug with MVC guide ...

so, if you ever make it works.. how?

this is my Application.js :

Ext.Loader.setConfig({enabled:true}); 
Ext.create('Ext.app.Application', {
    name: 'AM',

    controllers: [
        'Users'
    ],

    views: [
        'user.List'
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'
            }
        });
    }
});

i'm trying to learn MVC in Extjs... sorry if my english bad..

回答1:

Well, I think I should take back my words! I had some success after going through sencha blog. And finally, got my MVC "Skeleton" running!

Here is the working code:

Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
    name: 'AM',
    autoCreateViewport: false,
    controllers: [],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

Please note that, the code is very minimal and have removed the common errors reported in forums and here. The next step would be to start playing with this code and add controllers, views etc onto it!

I will keep updating this answer going forward.

Update: The first two error mentioned are not actually errors. They are warnings and application works fine even if they display these warnings. The third error you mentioned is a stopper!

Solution to Viewport problem Here are two ways to solve it.

Use the autoCreateViewport: false, property and define your viewport (I see that you have defined your viewport in launch method)
Create a Viewport.js and save it in view folder. In this case, I felt my launch method empty and moved the viewport code to Viewport.js file. But I do get an error:

Uncaught TypeError: Cannot call method 'create' of null

回答2:

I do use ExtJS 4.1.

In my code [Ext.Loader] Synchronously loading 'OOO.store.News'; consider adding Ext.require('OOO.store.News') above Ext.onReady warning message was invoked if I place

stores: [
    'News',
],

in my app/Application.js file instead of app/controller/OOO.js file.

So put stores:[], in controller file.

来源：https://stackoverflow.com/questions/5713364/how-to-make-a-mvc-application-with-extjs-4-0-beta-3

标签

extjs

extjs4