1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Boise, Idaho
    Posts
    84
    Vote Rating
    13
    PhilMerrell will become famous soon enough

      0  

    Default Meet the List component in Designer

    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:

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

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    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
    Aaron Conran
    @aconran

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Boise, Idaho
    Posts
    84
    Vote Rating
    13
    PhilMerrell will become famous soon enough

      0  

    Default

    Thanks, Aaron.

    I'm getting closer:

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

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

  4. #4
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

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

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

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Boise, Idaho
    Posts
    84
    Vote Rating
    13
    PhilMerrell will become famous soon enough

      0  

    Default

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

  6. #6
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    It should be:
    Code:
        this.getMain().push({
          xtype: 'presidentdetail'
        });
    Then make sure that you've added the proper userAlias ("presidentdetail") on the presidentDetail class.
    Aaron Conran
    @aconran

Thread Participants: 1

Tags for this Thread