Results 1 to 3 of 3

Thread: Setting property values of items in parent class

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Answers
    4
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      1  

    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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Answers
    4
    Vote Rating
    1
      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

Posting Permissions

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