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

    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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    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
    Sencha Architect Development Team

  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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    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
    Sencha Architect Development Team

  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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    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
    Sencha Architect Development Team

Thread Participants: 1

Tags for this Thread