Problem with MVC

[floraoma2000-extjs]

Hi all,
now I have some experience in ExtJs - so I decided to make a project with MVC.

I've studied the documentation and startet programming.
So far so good.

I've selected the border-layout with a noth south west east region.
Noth an south region are easy to handle.
My westregion is a selectionList, where I select which formular is loaded in the centerregion.

- and that's the point.
If I select sth in my selectionList, my selectionListcontroller tells me in the console output what I've selected. OK
For each selection there shoud be loaded onother formular in my centerregion - the view called 'workspace'.
But I don't know how to fire, start or call my fomular in the workspace (centerregion). Instead of console-output I want
a formular.
Please help me. Thanks in advance.

My Contrller Code

Ext.define('app.controller.AuswahlListe', {
    extend: 'Ext.app.Controller',
    refs: [{
        ref: 'AuswahlListe',
        selector: 'auswahlliste' 
    }],
    stores: [
        'AuswahlListe'
    ],
     init: function() {
        this.control({
            'auswahlliste' : {
                selectionchange: this.onAuswahlListeSelect
            }
        })
    },

    onLaunch: function() {
        var auswahllisteStore = this.getAuswahlListeStore();   
        auswahllisteStore.load({
            callback: this.onAuswahlListeLoad,
            scope: this
        });
    },
    onAuswahlListeLoad : function() {
        var auswahlliste = this.getAuswahlListe();
        auswahlliste.getSelectionModel().select(0);
    },
    
    onAuswahlListeSelect: function(selModel, selection) {
        switch ((selection[0].data['id'])) {
          case "0":
            console.log(selection[0].data['name']);
            break;
          case "1":
            console.log(selection[0].data['name']);
            break;
          case "2":
            console.log(selection[0].data['name']);
             break;
        }
    }
    
}); 

[scottmartin]

So you want to add a form to your center region on select?

Something like:
workspace.add(newForm)

Are you wanting to emulate something like this?
http://dev.sencha.com/deploy/ext-4.1...ed-viewer.html

Scott.

[a.premkumar]

If the parameter 'selection' that is used in the switch block is actually the selectionList of west region, then you may get hold of its parent by using,

var parent = selection.ownerCt

then you could get the component 'workspace' by using parent because both selection and workspace are children of same parent.(assumed from what you said ahead)

var workspace = parent.getComponent('workspaceId')

then you could remove the component that was already added to 'workspace' and add your new component as

workspace.removeAll();
var newPanel = Ext.create('Nameof thePanel');
workspace.add(newPanel);

If this does not work, give some more details so that I can help you.

Regards,
Premkumar. A

[floraoma2000-extjs]

Hi all,
Thanks for your answers. I studied the example "feed viewer" and thought about the second answer by a.premkumar. But I couldn't solve the problem so far.

On the left side of my layout there is a selection box to select the form I want to show and fill in in the center region.
My Controller Code

Ext.define('Simple.controller.SelListe', {
    extend: 'Ext.app.Controller',
    refs: [{
        ref: 'SelListe',
        selector: 'selliste',
    }, {    
        ref: 'WorkingSpace',
        selector: 'workingspace'
    }],
    stores: [
        'SelListe'
    ],

    init: function() {
        this.control({
            'selliste' : {
                selectionchange: this.onSelListeSelect
            }
        })
    },

    onLaunch: function() {
        var sellisteStore = this.getSelListeStore();   
        sellisteStore.load({
            callback: this.onSelListeLoad,
            scope: this
        });
    },
    
    onSelListeLoad : function() {
        var selliste = this.getSelListe();
        selliste.getSelectionModel().select(0);
    },
     
    onSelListeSelect: function(selModel, selection) {        
            this.getWorkingSpace().update(selection[0]);
    }
});

If I´ve selected an element of the controller - the view "WorkingSpace.js" is called and now my output is like the following.

Ext.define('Simple.view.WorkingSpace', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.workingspace',
     
    initComponent: function() {
         this.dockedItems = [{
            xtype: 'container',
            items: [{
                xtype: 'component',
                width: 200,
                itemId: 'description',
                tpl: '<h2>{name}</h2><h1>{name}</h1><h2>{id}</h2>'
            }]
        }];
        this.callParent();
    },
    
    update: function(record) {
        var data = record ? record.data : {};
        this.down('#description').update(data);
        this.callParent([data]);
    }
});

In my View called "WorkingSpace" I have the output of different text now. But there should be total different forms - once I want to add a new User to a database, once I'll show
some news for the users(Data from a database)

My question : In o n e view called "WorkingSpace" I want to show different forms in dependency of my Selection in the "SelListe" (Controller)
I dont't have any more idea!!

Please help !! Thanks in advance!

[a.premkumar]

Hi,

Do you want to update the tpl of 'workingspace' with selected record on 'selliste'? I am a bit confused here. Please state clearly what you need. Want to load another panel at center region or want to update the tpl values that are shown on workingspace panel?

Regards,
Premkumar. A

[floraoma2000-extjs]

Hi sorry for my bad english,

Want to load another form panel at center region - thats my problem

Thanks

[a.premkumar]

Well I have worked on your code. Finally I came up with this. I have made some additions in your controller code. They are marked by arrows. It is not much but it works though. Give it a try.

//--------------------------->var me=null;
Ext.define('Simple.controller.SelListe', {
    extend: 'Ext.app.Controller',
    refs: [{
        ref: 'SelListe',
        selector: 'selliste',
    }, {    
        ref: 'WorkingSpace',
        selector: 'workingspace'
    }],
    stores: [
        'SelListe'
    ],


    init: function() {
        this.control({
            'selliste' : {
                selectionchange: this.onSelListeSelect
            }
        })
    },


    onLaunch: function() {
        //--------------------------->me = this;
        var sellisteStore = this.getSelListeStore();   
        sellisteStore.load({
            callback: this.onSelListeLoad,
            scope: this
        });
    },
    
    onSelListeLoad : function() {
        var selliste = this.getSelListe();
        selliste.getSelectionModel().select(0);
    },
     
    onSelListeSelect: function(selModel, selection) 
    {        
            this.getWorkingSpace().update(selection[0]);
            //--------------------------->
            
            /*var workspace = me.getWorkingSpace();
            var parent = workspace.ownerCt;
            var index = parent.items.indexOf(workspace);
            var newPanel = Ext.create('Simple.view.Sample');
            parent.remove(workspace,false);
            parent.insert(index,newPanel);*/
            
            //--------------------------->
    }
});

On selection, the center region is loaded with what ever view you create in 'newPanel'. I have tested and it works ok. Goodluck.

Regards,
Premkumar. A

[floraoma2000-extjs]

Hello,

thank you very much for your kind help.
It was exactly the solution for my problem.
Now I was able to finish the intended functionality.

The next step is to integrate forms into the center region of my layout.
The forms work already separately however the integration could cause
further "challenges".
Hope that I could count on your further support...

Regards to India

[a.premkumar]

If its within my knowledge, sure you can count on me.