1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    Zotop is on a distinguished road

      0  

    Default Answered: Referencing a list inside a panel

    Answered: Referencing a list inside a panel


    Hi all,

    I have a view MemosContainer.js that displays a toolbar with title and a button followed by a list below :

    Code:
    Ext.define('Memos.view.MemosContainer', {
        extend: 'Ext.Panel',
        requires: ['Memos.view.MemosList'],
        xtype: 'memoscontainer',
        
        config: {
            title: 'MemosContainer',
            layout: 'fit',     
                items: [{
                    xtype: "toolbar",
                    
                    docked: "top",
                    title: "Memos",
                    
                    items: [{
                        xtype: "spacer"
                    }, {
                        xtype: "button",
                        text: "New",
                        ui: "action",
                        id:"new-note-btn"
                    }]
                },
                {
                    xtype: 'list',
                    itemTpl: '<div class="name">{name}</div>',
                    store: {
                        fields: ['name'],
                        data: [
                            {name:'one'},
                            {name: 'two'}
                        ]
                    }
                }
                
                    
                ]
        }
    });
    I want to define the list in another view, I've been trying different things (getCmp, alias,...) ...

    How can I replace

    Code:
    {
                    xtype: 'list',
                    itemTpl: '<div class="name">{name}</div>',
                    store: {
                        fields: ['name'],
                        data: [
                            {name:'one'},
                            {name: 'two'}
                        ]
                    }
                }
    by a reference to another view (ext.define...) ?

    Many thanks.

  2. First you need to use the config object there but that's a simple change.

    You include it via the xtype you gave it just like if you were to include a container or panel.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Resolving components depends on your application. In your instance you can reference it because of it's parent.

    Code:
    Ext.ComponentQuery.query('memoscontainer list')[0];
    That is a global way but it depends on your application and where you need to get the list like on a tap of a button.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    Zotop is on a distinguished road

      0  

    Default


    Hi,

    Thanks for the quick reply, but I am lost ...

    Lets say I have another view MemosList.js :

    Code:
    Ext.define('Memos.view.MemosList', {    extend: "Ext.dataview.List'',
        xtype : 'memoslist',
        
        itemTpl: '<div class="name">{name}</div>',
        store: {
            fields: ['name'],
            data: [
                {name:'one'},
                {name: 'two'}
            ]
        }
    
    
    });
    How can I include this view as an item in the panel declared in MemosContainer.js ?

    I don't see how to use component query in this case...

    thanks

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    First you need to use the config object there but that's a simple change.

    You include it via the xtype you gave it just like if you were to include a container or panel.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    3
    Vote Rating
    0
    Zotop is on a distinguished road

      0  

    Default


    Oooo nice. I tried with xtype before but without the config. Lesson learned.

    Thanks a lot

Thread Participants: 1