Results 1 to 5 of 5

Thread: I cannot pass data from controller to a view in Sencha Touch 2.4.2

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    130
    Answers
    4

    Default Answered: I cannot pass data from controller to a view in Sencha Touch 2.4.2

    I have tried some different things but I was unable to pass data from controller to view (to a component inside a container).

    Here I have the view PersonDetail.js:

    Code:
    Ext.define('Asistan.view.personDetail', {
        extend: 'Ext.Container',
        xtype: 'personDetail',
        config: {
            layout: 'fit',
            items : [
                {
                    xclass : 'Asistan.view.PeopleToolbar'
                },
                {
                    // "data: {}" is needed to work. I try to pass data from controller to here
                    xtype: 'component',
                    tpl: Ext.create('Ext.XTemplate','{GIVEN_NAME} jkjk')
                }
            ]
        }
    });
    And here is my controller People.js which I thought that it should work. But it doesn't pass the data:

    Code:
    Ext.define('Asistan.controller.People', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                people: 'peopleNavigationView peopleContainer list',
            },
            control: {
                people: {
                    itemdoubletap: 'showPerson'
                }
            }
        },
        showPerson: function(item, index, e, eOpts) {
            this.people = Ext.widget('personDetail');
            this.people.config.items[1].data = eOpts.data; // <- Here! It doesn't work. console.log shows that the data is there but in the browser the data doesn't show up.
            console.log(this.people.config.items[1].data); // I can see my data here, right before the push
            item.up('peopleNavigationView').push(this.people);
        }
    });
    What I am missing?

  2. Here is how I solved the issue:

    Code:
    {
        id: 'humanBeing',
        xtype: 'component',
        tpl: Ext.create('Ext.XTemplate','{GIVEN_NAME} jkjk')
    }
    and

    Code:
    showPerson: function(item, index, target, record, e, eOpts) {
        this.people = Ext.widget('personDetail');
        item.up('peopleNavigationView').push(this.people);
        Ext.getCmp('humanBeing').setData(record.data);
    }
    Basically, I gave an ID to the item where tpl is located and then in the method I get this component with its ID, then I've set the data.

  3. #2
    Sencha Premium Member
    Join Date
    Jun 2011
    Posts
    46
    Answers
    5

    Default

    Try modifying your showPerson() method to look like this:

    Code:
    showPerson: function(item, index, target, record, e, eOpts) {
        var personCmp = Ext.widget('personDetail', {
            data: record.getData() // If you want your app to be "lighter"
            // record: record // If you want to support data binding
        });
    
        item.up('peopleNavigationView').push(personCmp);
    }

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    130
    Answers
    4

    Default

    Quote Originally Posted by enagic View Post
    Try modifying your showPerson() method to look like this:

    Code:
    showPerson: function(item, index, target, record, e, eOpts) {
        var personCmp = Ext.widget('personDetail', {
            data: record.getData() // If you want your app to be "lighter"
            // record: record // If you want to support data binding
        });
    
        item.up('peopleNavigationView').push(personCmp);
    }
    Bu this passes the data to the parent of tpl, not to the tpl itself. So, tpl does not receive the data.

    l2oPBSy.png

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    130
    Answers
    4

    Default

    Here is how I solved the issue:

    Code:
    {
        id: 'humanBeing',
        xtype: 'component',
        tpl: Ext.create('Ext.XTemplate','{GIVEN_NAME} jkjk')
    }
    and

    Code:
    showPerson: function(item, index, target, record, e, eOpts) {
        this.people = Ext.widget('personDetail');
        item.up('peopleNavigationView').push(this.people);
        Ext.getCmp('humanBeing').setData(record.data);
    }
    Basically, I gave an ID to the item where tpl is located and then in the method I get this component with its ID, then I've set the data.

  6. #5
    Sencha Premium Member
    Join Date
    Jun 2011
    Posts
    46
    Answers
    5

    Default

    I'm glad you found a solution. I hadn't read through your code in enough detail. ;-)


    But two things I want to warn you against concerning your solution; (1) Setting an id parameter is usually okay as long as you are SURE there is only going to be one instance of it at a time. But then again, I'd ask the question as to what the reason might be concerning it because (2) Using Ext.getCmp() will iterate through all the registered components to find a match--meaning, if your app is going to get more complex, the framework going to have more work to do.

    One way to remedy both of these problems would be to "traverse" up or down to find what you're looking for. So if you had the following view:

    Code:
    Ext.define('Asistan.view.personDetail', {
        extend: 'Ext.Container',
        xtype: 'personDetail',
        config: {
            layout: 'fit',
            items : [
                {
                    xclass : 'Asistan.view.PeopleToolbar'
                },
                {
                    // "data: {}" is needed to work. I try to pass data from controller to here
    
                    xtype: 'component',
                    itemId: 'humanBeing',  // Usually always a better idea compared to "id"
                    tpl: Ext.create('Ext.XTemplate','{GIVEN_NAME} jkjk')
                }
            ]
        }
    });
    Your controller code can look like this:

    Code:
    showPerson: function(item, index, target, record, e, eOpts) {
        var personCmp = Ext.widget('personDetail'), // Instantiates your personDetail
            cmpWithTpl = personCmp.down('#humanBeing'); // Traverse down to get humanBeing
    
        cmpWithTpl.setData(record.getData());
        // cmpWithTpl.setRecord(record); // Maintains data binding
    
    
        item.up('peopleNavigationView').push(personCmp);
    }

Similar Threads

  1. Pass data from 1 view to another via controller
    By GouravS in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 30 Jan 2014, 2:50 PM
  2. How to pass data between two controllers in sencha touch 2.0?
    By himanshu19890 in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 8 Jun 2013, 5:10 PM
  3. Pass data from controller using setActiveItem to change card view
    By paulh1971 in forum Sencha Touch 2.x: Q&A
    Replies: 13
    Last Post: 19 Nov 2012, 4:03 PM
  4. How to pass data like parameters in Sencha Touch 2.0
    By divya_singh in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 9 Mar 2012, 6:09 AM
  5. Replies: 12
    Last Post: 21 Dec 2011, 5:42 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •