1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
    reverdin is on a distinguished road

      0  

    Default Unanswered: Simple List/Detail MVC with Sencha 2.0

    Unanswered: Simple List/Detail MVC with Sencha 2.0


    Hello,

    Tried in the Kitchen Sink and other examples but couldn't find a simple MVC example with a list/detail taken from a store with a JSON proxy reader.

    Managed to populate the list and get the record clicked but could'nt understand how to populate the detail page with the right record and to display it.

    If somebody knows a good example to download (not too complicated as I am new to MVC) it would be very helpful.

    Thanks in advance

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Vote Rating
    1
    Answers
    2
    testvogel is on a distinguished road

      0  

    Default


    Hi,

    just use the select or itemtap event of the list and then do anything you want (for example redirect to a new view):


    in your controller:

    Code:
     this.control({
                '#yourList':{
                    select: this.onItemSelect
                },
           });
    In the handler you can do the following (example for single selection) :

    Code:
    onItemSelect: function(selection){
            var myItem = selection.getSelection()[0]);
    // do whatever you want. have a look at myItem.
    }

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
    reverdin is on a distinguished road

      0  

    Default


    Thanks,

    I already understood the controller part, I have the following (into the init function):
    Code:
    this.control({
          '#session-list': {
            select: this.onViewItemTap
          }
        });
    And the following handler:
    Code:
    onViewItemTap: function (c, b) {
           console.log("Tapped");
            var a = c.getStore().getAt(b);
            this.application.fireEvent("navigate", {
                view: "sessions.SessionDetail",
                record: b
            });
            console.log(b);
        }
    In my console I have the "Tapped" logged and an object containing the selected record. But the SessionDetail view doesn't appear. I think there is an error in my view so that is why I was looking for a simple example.

    Thanks for your answer and your time.

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    Answers
    93
    rdougan will become famous soon enough

      0  

    Default


    The kiva example does this, though the view it is display is floating.

    Some arbitrary code (look at the inline code):

    Code:
    onItemTap: function(view, index, item, e) {
        //get the record from the views store, using the passed index
        var record = view.getStore().getAt(index);
    
        /**
         * the.getDetail should be defined in the refs block in your controller:
         *
         *     refs:
         *         //your list
         *         'list': {
         *             xtype: 'list'
         *         },
         *         //your detail view
         *         'detail': {
         *             xtype: 'detail'
         *         },
         *         //the main view, your container
         *         'main': {
         *             xtype: 'main'
         *         }
         *     }
         * 
         * And the view must be loaded into the controller also
         *     
         *     views: ['MyApp.view.Main', 'MyApp.view.List', 'MyApp.view.Detail']
         */
        this.getDetail().bindRecord(record);
        this.getMain().setActiveItem(this.getDetail());
    }
    If you have not already added the 'detail' view as a child to your main container view, then you must add it dynamically:

    Code:
    onItemTap: function(view, index, item, e) {
        //get the record from the views store, using the passed index
        var record = view.getStore().getAt(index);
    
        //check if it can find the detail, which it wont (because you havent added it as an item anywhere)
        if (!this.getDetail()) {
            //use the getDetailView method (which returns the class, not an instance) and create a new
            //instance of it, and add it to the main view
            this.getMain().add(this.getDetailView().create());
        }
    
        //bind the record as normal
        this.getDetail().bindRecord(record);
        this.getMain().setActiveItem(this.getDetail());
    }
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
    reverdin is on a distinguished road

      0  

    Default


    Thanks.

    I think my problem is more in the construction of my list details. Everything seems right in my controller (references to components, views, stores). My list displays correctly but the itemtap throw an error on the following line:
    Code:
    this.getMain().add(this.getView('sessions.SessionDetail').create());
    The error is the following:
    Code:
    Error: [ERROR][Ext.Container#doAdd] Adding a card to a tab container without specifying any tab configuration
    My MainView is a tab panel and I think this is the reason. The code try to add the SessionDetail into the tabpanel and I should create it inside the panel where the list is created.

    I am continuing my testing and learning and thanks again for your help and time.

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    23
    Vote Rating
    1
    p_nutz is on a distinguished road

      0  

    Default


    I've got the same error trying the same thing: Navigation view inside of a tab panel. Unlike your case my app now doesnt even start up anymore... crap