Meet the List component in Designer

[PhilMerrell]

I'm trying to follow Neil Drew's video, "Meet the List component" only I would like to build it in Sencha Designer, and I'm stuck on the controller portion of the tutorial. I cannot reproduce the following code in Designer:

config:{
        refs: {
            main: 'mainpanel'
        },
        control: {
            'presidentlist': {
                disclose: 'showDetail'
            }
        }
    },


    showDetail: function(list, record) {
        this.getMain().push({
            xtype: 'presidentdetail',
            title: record.fullName(),
            data: record.getData()
        })
}

I can list the refs, but not "control:".

I'm trying to learn something very basic. I want to go from a list view to a detail view and I'm having a hard time finding a tutorial that helps me accomplish this. If anyone can help talk through setting up a controller in Designer that takes me from a list view to a detail view would be very much appreciated.

-Phil

[aconran]

These are instructions for build 341. This will be changing in the future to be made more intuitive.

Add a Controller Action to your controller
Set the targetType to Ext.dataview.List
Set the name to disclose

Change the fn name to "showDetail"

Double click the node in the inspector

paste in your source code

[PhilMerrell]

Thanks, Aaron.

I'm getting closer:

Ext.define('Presidents.controller.Main', {
  extend: 'Ext.app.Controller',
  
  config: {
    refs: {
      id: 'presidentlist'
    },
    
    control: {
      "list": {
          disclose: 'onListDisclose'
        }
     }
  },
  onListDisclose: function(list, record, target, index, e, options) {
     alert('Touched!);
  }
});

Now when I touch on a list item it alerts touched. However when I change my onListDisclose function to:

this.getId().push({
   id: 'presidentDetail'
});

I get an error stating, "Object presidents-controller-main-1 has no method 'push'"

I'm obviously doing something fundamentally wrong. Thanks for the help.

[aconran]

id overlaps with a "real" method called "getId".

You are trying to call the method push on the string "presidents-controller-main-1".

[PhilMerrell]

I really appreciate the help, thank you.

My controller is working. I am successfully pushing a detail view onto the main navigation view, but the list record details don't seem to be pushed with it. When I tap the disclosure icon on the list, it seems to be pushing a new (or just blank) panel. Any hints to put me in the right direction? Does it have something to do with my controller or should I be looking elsewhere?

Ext.define('Presidents.controller.Main', {
  extend: 'Ext.app.Controller',
  
  config: {
    refs: {
      main: '#main'
      },
    control: {
      "list": {
        disclose: 'onListDisclose'
       }
    }
  },
  onListDisclose: function(list, record, target, index, e, options) {
    this.getMain().push({
      main: 'presidentDetail'
    });
  }
});

Thanks.

[aconran]

It should be:

    this.getMain().push({
      xtype: 'presidentdetail'
    });

Then make sure that you've added the proper userAlias ("presidentdetail") on the presidentDetail class.