1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Location
    UK
    Posts
    56
    Vote Rating
    0
    jmls is on a distinguished road

      0  

    Default MVC question

    MVC question


    Capture.JPG
    given the above mockup, I have the following requirements

    1) clicking on button 1 will dhow the grid in the center region
    2) clicking on button 2 will dhow the calendar in the center region
    3) ... you should know the pattern by now

    So, I have a couple of questions ...

    if the data for the grid, calendar and chart come from different sources (and are not related at all) , I assume that the ExtJS 4.1 "way" is to create a mvc structure for each "source" . So, I have a controller for panel 1 which handles each of the buttons.

    1) How do I get the appropriate grid/calendar/chart to display in the center region - do I need to "up" to get to the viewport and then "down" to get to the center region, or could I find it using componentsearch ?

    2) User clicks on button1 - grid is shown. User clicks on button2 - do I need to destroy the grid before I show the calendar, or can I overlay it ? If overlay, when the user clicks back on button1, how do I show the original grid without creating a new one ?

    thanks

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    537
    Vote Rating
    71
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    For the content section I would have a container with a card layout. A card layout allows you to switch between child items. You wouldn't have to destroy them, just set them to be the active card.

    http://docs.sencha.com/ext-js/4-1/#!...container.Card

    You wouldn't need to up and down to get your container that holds the grid/calendar/chart (though technically you could). I think it would be simplest to use the refs property in your controller to create a getter for it.

    http://docs.sencha.com/ext-js/4-1/#!...oller-cfg-refs

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2010
    Location
    UK
    Posts
    56
    Vote Rating
    0
    jmls is on a distinguished road

      0  

    Default


    thanks for the tips - really useful. However, how does the panel controller know what the content panel instance is ?

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    537
    Vote Rating
    71
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    You mean getting the reference? Check out the second link in my previous post. It gives a good example on setting up refs. Basically you have an arbitrary name defined for a componentQuery and it creates a getter for the component in your controller.

    or are you asking something else?

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2010
    Location
    UK
    Posts
    56
    Vote Rating
    0
    jmls is on a distinguished road

      0  

    Default


    heh, forgive my ignorance. I am learning, but slowly I am a javascript and ExtsJS noob.

    I perhaps don't understand the nomenclature properly just yet.

    The way I see it, the viewport creates the panel controller and the content panel. The panel controller handles the panel view, and calls a function to show the appropriate component (grid / chart etc) when a button is clicked.

    But how does the panel controller know the reference to the content panel in order to instruct it to display card foo ?

    really appreciate the help here, thanks.

  6. #6
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    537
    Vote Rating
    71
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    So lets say you have the following setup
    Code:
    Ext.define( 'yourApp.view.Viewport', {
    extend: 'Ext.container.Viewport', layout: 'border', initComponent: function() {
    this.items = [
    {
    xtype: 'yourButtonView', region: 'west'
    }, {
    xtype: 'mainContentArea', region: 'center'
    }
    ]; this.callParent();
    }
    } );
    In your controller you would do something like this
    Code:
    Ext.define( 'yourApp.controller.YourButtonView', {
    extend: 'Ext.app.Controller', refs: [
    {
    ref: 'mainContentArea', selector: 'mainContentArea'
    }
    ], init: function() {
    this.control( {
    'yourButtonView button': {
    click: this.buttonClicked
    }
    } );
    }, //Assumes your buttons have a property defined with content items itemId. SetActiveItem can take indexes/ids/itemIds buttonClicked: function( btn ) {
    this.getMainContentArea().getLayout().setActiveItem( btn.contentItemId );
    }
    } );
    This code is not tested and is just to give you an idea of how to go about it

Thread Participants: 1