ExtJS mvc loading view after successfully logged in

Question

I am trying to develop an application in ExtJS using MVC. The aim of design application is something: 1. Create a log in page for authentication 2. after successful log in I have to show 3 grids in single page. These 3 grids have different stores and models.

I am able to design login page, but I am facing problem in going fwd to next view after logged in. =====> controller/Login.js

Ext.define('MyApp.controller.Login', {
    extend: 'Ext.app.Controller',


views: ['Login'],

    refs: [
        {
            ref: 'viewportmain',
            selector: 'viewportmain'
        }
      ],

    init: function () {
        this.control({
        'viewport > panel': {
                render: this.onPanelRendered
            },

            'button[action=submitLogin]': {
                click: this.submitLoginForm
            }
        });
    },

onPanelRendered: function() {
        console.log('The panel was rendered');
    },

    submitLoginForm: function (button) {
///// DO NOT BOTHER ABOUT LOGIN AUTHENTICATION PROCESS

        console.log('submitLoginForm function');
       // var view = Ext.create('MyApp.view.Order', {});

        var OrderController = this.getController('MyApp.controller.Order');
        OrderController.showNext(button);
// I HAVE TRIED CERTAIN WAYS IN COMMENTED SECTION
       // var view1 = OrderController.getOrderView();
       // var form = button.up('form').getForm();
        //var view1 = this.getOrder();
        var form = button.up('form').getForm();
        form.owner.up('viewport').getLayout().next();
        //this.getViewportmain();
    console.log('The ');

    }

});

======> controller/Order.js

Ext.define('MyApp.controller.Order', {
    extend: 'Ext.app.Controller',
    alias: 'controller.order',

    stores:['Order'],
    models:['Order'],
    views: ['Order'],
    init: function () {
        this.getOrderStore().load();

    },

    showNext: function(button) {

        var view = Ext.create('MyApp.view.Order');
        view.show();

    }

});

=======> view/viewport.js

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.viewportmain',

    requires: [
        'MyApp.view.Login',
        'MyApp.view.Order',
        'MyApp.view.DisplayGrids'
    ],

    layout: 'fit',

    items: [{
        xtype: 'login'
    }, {
        xtype: 'form',
        layout: 'fit',
        title: 'new form'
    }]
});

=======> app.js

Ext.Loader.setConfig({enabled:true});

Ext.application({
    name: 'MyApp',

    appFolder: 'App',

    models:['Order'],
    stores:['Order'],
   controllers: [
        'Login'//, 'Order'
    ],

    autoCreateViewport: true
});

I am trying to make these grids combine in the commoon panel ========> view/DispalyGrid.js

Ext.define('MyApp.view.DisplayGrids' ,{
    extend: 'Ext.form.Panel',

    alias: 'widget.displaygrids',


    layout: 'fit',

    items: [{
      xtype: 'order'
    }]
});

I have tried to call Order from DisplayGrid which eventually gives errors so I tried to go directly with the view/Order.

Please guide me this I was trying this thing from long time and I am doing something really wrong. I have tried this but every time it gave me error

Cannot read property 'buffered' of undefined

Thanks in advance. :D

Please have a look at [this answer](http://stackoverflow.com/questions/14810340/load-new-view-after-the-loginin-extjs-4-mvc/14812218#14812218) and let me know if it helps with your question in any way. — Izhaki, Mar 03 '13 at 16:46

score 0 · Accepted Answer · answered Mar 02 '13 at 19:03

Well, one problem is that you are using layout: 'fit' but then trying to put two items in on the viewport. layout: 'fit' is for containing a single component that should 'fit' to the body of the parent. If your login form is a window component, it does not need to be a child item of the viewport. Use your application's init template method to instantiate your login form and attach a callback to the form window's close event. In the callback, you will want to load() your stores and show() your 'DisplayGrids' view. You need to set your store to autoload: false so that it won't try and load until you are logged in.

Better yet: don't tackle this whole thing as one task. Break it down. Work on creating a viewport with a login form that, when closed, reveals a panel with some plain text. After you get that working, then you can starting messing with your stores and grids -- otherwise, you may well run into multiple distractions that detract from your ability to get things done efficiently (like the cannot read property 'buffered' error message.)

and @ tuespetre @ Izhaki Thanks both for your suggestion I am able to get this work. — aksdch11, Mar 05 '13 at 23:58

ExtJS mvc loading view after successfully logged in

1 Answers1