CODEWITHSUNDEEP
javascriptextjsextjs4extjs-mvc
hilarl
hilarl

Reputation: 6880

Regarding ExtJs4 MVC architecture

I have the following views defined:

LeftNavigation (Grid Panel)

Ext.define('Ray.view.StationsList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.LeftNavigation',

    store: 'LeftNavigation',
    title: 'Navigation',
    hideHeaders: true,

    initComponent: function () {
        this.columns = [{
            dataIndex: 'name',
            flex: 1
        }];

        this.callParent();
    }
});

Contents (Panel)

Ext.define('Ray.view.Contents', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Contents'
});

Forms (Form Panel)

Ext.define('Ray.view.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.Claim',

    title: 'ClaimForm',

    initComponent: function () {
        this.items = [{
            xtype: 'form',
            items: [{
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name'
            }, {
                xtype: 'textfield',
                name: 'email',
                fieldLabel: 'Email'
            }]
        }];

        this.buttons = [{
            text: 'Save',
            action: 'save'
        }];

        this.callParent(arguments);
    }

});

I am trying to use the grid panel as the navigation, the data for it would come from a json file which would have an 'id' and 'name' fields. where the id would serve as the link id and the name as the text to be shown for the link.

The 'Contents' would be the main area where all data are displayed. In this case i have several forms that i need to display here. so what i am trying to achieve here is, when the user clicks on a specific link on the navigation grid, i need to load the Form which corresponds to the 'id' of that link into the 'Contents' area.

i am trying to figure out how the controller or controllers need to be defined to achieve this?

thanks a lot, an appropriate answer would be much appreciated.

Upvotes: 0

Views: 826

Answers (2)

John Krull
John Krull

Reputation: 302

It sounds like you need to create a listener for the grid's itemclick event to determine which form you want to load.

There are many ways to access objects in ExtJS, so to follow my code examples you will need to assign an id or itemId to each of your components. Additionally, I have no idea how your files are structured, so you may need to modify this to get it working. However, it should provide a base for your controller to function.

Ext.define('Ray.controller.Stations', {
    extend: 'Ext.app.Controller',
    views: ['LeftNavigation', 'Contents', 'Claim'],
    init: function() {
        this.control({
            '#leftNavigationGrid': {
                itemclick: this.onItemClick
            }
        });
    },
    onItemClick: function(grid, record) {
        var id = record.data.id;
        var myForm = Ext.widget('Claim', { width: 400; height: 600; });

        Ext.ComponentQuery().query('#Contents')[0].add(myForm);
    }
});

The reason for the [0] after Ext.ComponentQuery().query() is that an array is always returned. Since we know exactly what we're (probably) getting is a single object with an id or itemId, we can just say we want the first object in the returned array.

It would really benefit you to read through the entire MVC tutorial that JordbaerHjelmen mentions, possibly starting in part 1.

Upvotes: 2

andreasnauta
andreasnauta

Reputation: 638

I am also learning this so a quick note: Have you looked at the two tutorials about the MVC pattern?

Part 3 of the 4 part MVC tutorial:

http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/

And a "stand-alone" tutorial:

http://www.sencha.com/learn/the-mvc-application-architecture/

Both of these gets the controller going. There is a complete project with source code in the first tutorial and in the latter you need to create it yourself, but it does not take a lot of time.

Best,

Andreas

Upvotes: 2

Related Questions