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

    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
    582
    Vote Rating
    268
    Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of

      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
    582
    Vote Rating
    268
    Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of

      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
    582
    Vote Rating
    268
    Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of

      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