Results 1 to 8 of 8

Thread: Panel subclassing problem (Default Config and Hardcoded Config)

  1. #1

    Default Panel subclassing problem (Default Config and Hardcoded Config)

    Hi,

    I create a Panel with 3 top bar. This panel will be used frequently.
    So I decided to extend Ext.Panel and create tbar and make sure I can add/subtract buttons to tbar from the child classes.

    Code:
    // Parent-Class
    Ext.ns('App.Core');
    App.Core.Panel = Ext.extend(Ext.Panel, {
    	tbarItems: [
    		{text:'Latest Tasks', handler: this.latestTask}
    		,{text:'Pending Tasks'}
    		,{text:'All Tasks'}
    	]
        ,initComponent:function() {
            var config = {tbar: this.tbarItems}; 
    		
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            App.Core.Panel.superclass.initComponent.apply(this, arguments);
        }
    	,latestTask: function(){
    		Ext.Msg.alert('Latest Tasks', 'Display today tasks only.');
    	}
        ,onRender:function() {
     		App.Core.Panel.superclass.onRender.apply(this, arguments);
    	}
    });
    Code:
    // Child-Class
    Ext.ns('App.Core');
    App.Core.TaskPanel = Ext.extend(App.Core.Panel, {
    	initComponent: function(){
    		this.title = 'Study Result';
    		this.tbarItems.push('-',{text:'Finished Tasks', handler: this.finishedTask});
    		var config = {};
    
            Ext.apply(this, Ext.apply(this.initialConfig, config));
    		App.Core.TaskPanel.superclass.initComponent.call(this);
        }
    	,latestTask: function(){
    		Ext.Msg.alert('Latest Tasks', 'Display this week tasks.');
    	}
    	,finishedTask: function(){
    		Ext.Msg.alert('Finished Tasks', 'Display Finished Tasks only.');
    	}
    	,onRender: function(ct, position){
            App.Core.TaskPanel.superclass.onRender.apply(this, arguments);
        }
    });
    The problem is, 'Latest Tasks' buttons from Parent-Class is not working (doesn't execute the base function), but
    'Finished Tasks' button from Child-Class is correct, and 'Latest Tasks' button also not working (doesn't execute the overriden function).

    I change Parent Class to this:
    Code:
    Ext.ns('App.Core');
    App.Core.Panel = Ext.extend(Ext.Panel, {
    	tbarItems: [] //add this to avoid error: this.tbarItems is undefined
    	,initComponent:function() {
    		this.tbarItems = [
    			{text:'Latest Tasks', handler: this.latestTask}
    			,{text:'Pending Tasks'}
    			,{text:'All Tasks'}
    		];
            var config = {tbar: this.tbarItems}; 
    		
            Ext.apply(this, Ext.apply(this.initialConfig, config));
            App.Core.Panel.superclass.initComponent.apply(this, arguments);
        }
    	,latestTask: function(){
    		Ext.Msg.alert('Latest Tasks', 'Display today tasks only.');
    	}
        ,onRender:function() {
     		App.Core.Panel.superclass.onRender.apply(this, arguments);
    	}
    });
    Now the 'Latest Tasks' button works, by executing overriden function, but the 'Finished Tasks' button is missing...

    Thx for any helps.

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    do you understand what the following line is doing: ?
    App.Core.TaskPanel.superclass.initComponent.call(this); ?

  3. #3

    Default

    Well, I'm not really sure, but I think it's the same with .apply.......??
    (need corrections for this)

    anyway, I changed the Child-Class to this:
    Code:
    Ext.ns('App.Core');
    App.Core.TaskPanel = Ext.extend(App.Core.Panel, {
    	initComponent: function(){
    		this.title = 'Study Result';
    		App.Core.TaskPanel.superclass.initComponent.call(this);
    		
        }
    	,latestTask: function(){
    		Ext.Msg.alert('Latest Tasks', 'Display this week tasks.');
    	}
    	,finishedTask: function(){
    		Ext.Msg.alert('Finished Tasks', 'Display Finished Tasks only.');
    	}
    	,onRender: function(ct, position){
            App.Core.TaskPanel.superclass.onRender.apply(this, arguments);
    		this.getTopToolbar().add('-',{text:'Finished Tasks', handler: this.finishedTask});
        }
    });
    And It works, four buttons displayed with correct actions, (but, I still have no idea if I want to remove some buttons from Parent-Class though...)....

  4. #4

    Default

    Quote Originally Posted by [email protected] View Post
    do you understand what the following line is doing: ?
    App.Core.TaskPanel.superclass.initComponent.call(this); ?
    Well, I'm not sure (actually pretty confused), but I think it's the same with apply.... (need correction for this)

    anyway, I modified Child-Class into:
    Code:
    Ext.ns('App.Core');
    App.Core.TaskPanel = Ext.extend(App.Core.Panel, {
    	initComponent: function(){
    		this.title = 'Study Result';
    		App.Core.TaskPanel.superclass.initComponent.call(this);
    		
        }
    	,latestTask: function(){
    		Ext.Msg.alert('Latest Tasks', 'Display this week tasks.');
    	}
    	,finishedTask: function(){
    		Ext.Msg.alert('Finished Tasks', 'Display Finished Tasks only.');
    	}
    	,onRender: function(ct, position){
            App.Core.TaskPanel.superclass.onRender.apply(this, arguments);
    		this.getTopToolbar().add('-',{text:'Finished Tasks', handler: this.finishedTask});
        }
    });
    And it works, four buttons displayed with correct actions. But, I still have no idea about removing buttons from Parent-Class.

  5. #5

    Default

    well, I'm not really sure, but I think it's the same with ...apply... (need correction please....)

    anyway, I modified Child-Class into
    Code:
    Ext.ns('App.Core');
    App.Core.TaskPanel = Ext.extend(App.Core.Panel, {
    	initComponent: function(){
    		this.title = 'Study Result';
    		App.Core.TaskPanel.superclass.initComponent.call(this);
    		
        }
    	,latestTask: function(){
    		Ext.Msg.alert('Latest Tasks', 'Display this week tasks.');
    	}
    	,finishedTask: function(){
    		Ext.Msg.alert('Finished Tasks', 'Display Finished Tasks only.');
    	}
    	,onRender: function(ct, position){
            App.Core.TaskPanel.superclass.onRender.apply(this, arguments);
    		this.getTopToolbar().add('-',{text:'Finished Tasks', handler: this.finishedTask});
        }
    });
    and it works, four buttons displayed with correct actions. But, I still haven't got idea about how to remove buttons of Parent-Class from Child-Class though...

  6. #6
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    App.Core.TaskPanel.superclass.initComponent.call(this); ? is calling the parent class' initComponent method with the scope of this.

    That said, you need to step through your code, it will give you insight into what's going on.

    Are you familiar with how to use firebug?

  7. #7

    Default

    Quote Originally Posted by jgar[email protected] View Post
    App.Core.TaskPanel.superclass.initComponent.call(this); ? is calling the parent class' initComponent method with the scope of this.

    That said, you need to step through your code, it will give you insight into what's going on.

    Are you familiar with how to use firebug?
    just watched your screencast-002..

    I rarely use firebug to trace javascript code. but now I think I need to practice it more...

    btw, what's the difference between apply and call?

  8. #8
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    call allows you to execute (call) a method, with a specfic context, but you *must* specify all of the arguments.

    someFn.call(someScope, arg1, arg2, arg3);

    apply will allow you to "call" a method, with a specfic context (scope), but allows you to use the 'arguments' array, making it much more dynamic.


    see:http://www.webreference.com/js/column26/apply.html

Posting Permissions

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