1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Vote Rating
    0
    Answers
    4
    clarose is on a distinguished road

      0  

    Default Answered: Setting property values of items in parent class

    Answered: Setting property values of items in parent class


    Hi,

    I have a Sencha touch class which extends Ext.Panel (let's call it: FilteredList). This class has a list component and a titlebar with a search field. The idea is to create a reusable list component with a header and a search field to filter the list.
    I want to reuse this component around different apps by extending it. Now, I would like for a given child class to be able to set the title of my titlebar component (which is an item of my parent class FilteredList).

    Is there a way I can do this while I'm defining my child class ?

    Here is the code for the parent component:
    Parent component
    Code:
    Ext.define('App.view.common.FilteredList' ,{
        extend: 'Ext.Panel',
        alias: 'widget.filteredList',
    
    
        config: {
            items: [
                {
                    xtype: 'titlebar',
                    id: 'navBar',
                    //title: '',
                    docked: 'top',
                    items: [
                        {
                            xtype: 'textfield',
                            placeHolder: 'Search...',
                            id: 'searchText'
                        }
                    ]
                },
                {
                    xtype: 'list',
                    id: 'fList',
                    flex: 1
                }
            ]
        }
    });
    Thanks in advance for your help,
    Christian

  2. First, I made some modifications of your abstract class:

    Code:
    Ext.define('App.view.common.FilteredList' ,{
        extend : 'Ext.Panel',
        alias  : 'widget.filteredList',
    
        requires : [
            'Ext.TitleBar',
            'Ext.field.Text',
            'Ext.dataview.List'
        ],
    
        config: {
            title  : null,
            layout : 'fit',
            items  : [
                {
                    xtype  : 'titlebar',
                    docked : 'top',
                    items  : [
                        {
                            xtype       : 'textfield',
                            placeHolder : 'Search...'
                        }
                    ]
                },
                {
                    xtype : 'list'
                }
            ]
        },
    
        updateTitle : function(title) {
            var titlebar = this.down('titlebar');
    
            titlebar.setTitle(title);
        }
    });
    I added the requires array which will tell Ext.Loader to load those files before this class is created and when you use SDK Tools, it will tell the build tool to have those required classes in the build before this class. I would get in the habit of this. Next I added layout : 'fit' so your list will be sized properly and added the title to null so that the setTitle, getTitle, applyTitle, and updateTitle are used. You can see the updateTitle gets the titlebar instance and does the setTitle on it.

    So next is what if you want to extend this class just to change the title, it's as simple as this:


    Code:
    Ext.define('App.view.UserList', {
        extend : 'App.view.common.FilteredList',
        alias  : 'widget.userlist',
    
        config : {
            title : 'Test Title'
        }
    });
    When a class is extended, the config objects are merged with the class that is extending another config object taking priority so the items are kept but the title is replaced by the one from UserList.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,545
    Vote Rating
    873
    Answers
    3566
    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, I made some modifications of your abstract class:

    Code:
    Ext.define('App.view.common.FilteredList' ,{
        extend : 'Ext.Panel',
        alias  : 'widget.filteredList',
    
        requires : [
            'Ext.TitleBar',
            'Ext.field.Text',
            'Ext.dataview.List'
        ],
    
        config: {
            title  : null,
            layout : 'fit',
            items  : [
                {
                    xtype  : 'titlebar',
                    docked : 'top',
                    items  : [
                        {
                            xtype       : 'textfield',
                            placeHolder : 'Search...'
                        }
                    ]
                },
                {
                    xtype : 'list'
                }
            ]
        },
    
        updateTitle : function(title) {
            var titlebar = this.down('titlebar');
    
            titlebar.setTitle(title);
        }
    });
    I added the requires array which will tell Ext.Loader to load those files before this class is created and when you use SDK Tools, it will tell the build tool to have those required classes in the build before this class. I would get in the habit of this. Next I added layout : 'fit' so your list will be sized properly and added the title to null so that the setTitle, getTitle, applyTitle, and updateTitle are used. You can see the updateTitle gets the titlebar instance and does the setTitle on it.

    So next is what if you want to extend this class just to change the title, it's as simple as this:


    Code:
    Ext.define('App.view.UserList', {
        extend : 'App.view.common.FilteredList',
        alias  : 'widget.userlist',
    
        config : {
            title : 'Test Title'
        }
    });
    When a class is extended, the config objects are merged with the class that is extending another config object taking priority so the items are kept but the title is replaced by the one from UserList.
    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
    Dec 2011
    Posts
    56
    Vote Rating
    0
    Answers
    4
    clarose is on a distinguished road

      0  

    Default


    Thanks a lot for the very detailed answer !
    I was thinking that config parameters could be overriden, but was not aware of this updateXXX method, which in the end allows us to update child components.

    Christian

Thread Participants: 1