Setting property values of items in parent class

[clarose]

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

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

[mitchellsimoens]

First, I made some modifications of your abstract class:

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:

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.

[clarose]

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