Need an example MVC check box selection in tree panel

[trcampion]

I'm trying to get my head around how to do things the mvc way with extjs-4 and am not able to pull the pieces together.

I'm not sure where to put everything. I have a basic layout in app.js using a viewport container and would like to use a tree panel with check box to display come customer data. Initially I thought I would try to mock this up using static data and once that was sorted I would move to pulling the data from a database.

I cant seem to get a tree control to appear in the panel where I would like it or at all for that matter. The API examples display at http://docs.sencha.com/ext-js/4-0/#!...heck-tree.html looks like what im after but its not in MVC. Obviously I want to take advantage of all the goodness which comes with mvc but it seems the vast majority of examples in the API docs are not examples using mvc approach. or am I missing something? How do I translate the API examples into something I can cobble together for my app.

Any training pointers or examples. If its not already obvious I'm new to extjs so any help is greatly appreciated.

[mitchellsimoens]

MVC is just a means of listening to events and acting upon them. Everything else is the same as if you were doing it within classes and not using MVC. You can either have your tree as an item of your viewport or you can add it as an item.

[trcampion]

Thanks for the reply, but can you show me as an example? I have this in app.js

Ext.application({
    name: 'NEAT',
    
    appFolder: 'app',
    


    launch: function() {
        Ext.create('Ext.container.Viewport', {
            width: 500,
            height: 400,
            title: 'Border Layout',
            layout: 'border',
            items: [
            {
                //title: 'North Region is resizable',
                region: 'north',     // position for region
                id: 'my_north',
                xtype: 'panel',
                contentEl: 'north',
                height: 75,
                autoEl: {
                    tag: 'div',
                }
                //split: true,         // enable resizing
                //margins: '0 5 5 5'
            },{
                title: 'South Region is resizable',
                region: 'south',     // position for region
                xtype: 'panel',
                height: 100,
                collapsible: true,   // make collapsible
                collapsed : true,
                split: true,         // enable resizing
                margins: '0 5 5 5'
            },{
                // xtype: 'panel' implied by default
                title: 'Customer Details',
                region:'west',
                xtype: 'panel',
                margins: '5 0 0 5',
                width: 200,
                collapsible: true,   // make collapsible
                split: true,         // enable resizing
                id: 'west-region-container',
                //layout: 'fit',
                items: [
                    {
                            //title: 'North Region is resizable',
                            title: 'Select Customers',
                            height:300,
                            //store: customer,
                            //split: true,         // enable resizing
                            //margins: '0 5 5 5'
                    }]
            },{
                // xtype: 'panel' implied by default
                title: 'east Region is collapsible',
                region:'east',
                xtype: 'panel',
                margins: '5 5 0 0', // t r b l
                width: 200,
                collapsible: true,   // make collapsible
                collapsed : true,
                split: true,         // enable resizing
                id: 'east-region-container',
                layout: 'fit'
            },{
                //title: 'Center Region',
                region: 'center',     // center region is required, no width/height specified
                title: 'Network Information',
                layout: 'fit',
                tbar    : toolbar,
                xtype: 'panel',
                margins: '5 0 0 0',
                items: [{
                    //region: 'center',
                    xtype: 'tabpanel',
                    tabPosition: 'bottom',
                    items: [{
                        title: 'Main',
                        html: 'this is the main tab'
                    }, {
                        title: 'Device',
                        html: 'this is the device tab'
                    }
                    }]
                }]                
            }],


            renderTo: Ext.getBody()


        })
    }
    
});

I would like the tree to appear in the west panel. what do I put in app.js? a controller at the top and then alias it in the west panel items. How about the data? Im assuming it goes in model, with a reference to a view, and somehow identified in the controller.

Im a little confused at how to glue it all together.

[trcampion]

Can anyone point me in the direction of crash course for extjs? mvc ideally?