1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    8
    Vote Rating
    0
    trcampion is on a distinguished road

      0  

    Question Unanswered: Need an example MVC check box selection in tree panel

    Unanswered: Need an example MVC check box selection in tree panel


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,346
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    8
    Vote Rating
    0
    trcampion is on a distinguished road

      0  

    Question can you show me an example?

    can you show me an example?


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

    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Posts
    8
    Vote Rating
    0
    trcampion is on a distinguished road

      0  

    Default still need help

    still need help


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

Thread Participants: 1

Tags for this Thread