[FIXED-296] panel.getLayout() returns string, not object

[gcallaghan]

Sencha Touch version tested:

• 0.9 rev __4__

• only default ext-all.css
• custom css (include details)

Platform tested against:

• google chrome desktop

Description:

• when calling getLayout on a panel instance, the return value is a string, not a layout object

Test Case:

    /**
 * @author gcallaghan
 */
var MEDIA_URL = '/media/';
var HeaderBar = Ext.extend( Ext.Panel, {
    constructor: function(config) {
        var options = {
            leftButton:new Ext.Button({
                 text:"Back",
                 //hidden:true,
                 ui:"back",
                 handler:function(){
                    alert('Back');
                }
            }),
            rightButton:new Ext.Button({
                 text:"Edit",
                 ui:"action" 
            })
        };
        
        
        Ext.apply(options, config);
        
        var obj = this; 
        obj.ad_bar = new Ext.Panel({
            layout: 'card',
            activeItem:0,
            items:[
               {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/iFinancials_Logo_44x960_whitefill.png" width="960px" height="44px" /></div>'},
               {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_appliance.png" width="320px" height="44px" /></div>'},
               {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_doors.png" width="320px" height="44px" /></div>'},
               {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_homedepotlogo.png" width="320px" height="44px" /></div>'},
               {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_refrigerators.png" width="320px" height="44px" /></div>'},
            ],
            minHeight:44,
            cls:'ad-bar'
        });
        
        obj.buttons = [options.leftButton,options.rightButton];
        obj.toolbar_default_items = [
           obj.buttons[0],
           {xtype: 'spacer'},
           obj.buttons[1]
        ];
        obj.toolbar = new Ext.Toolbar({
            hidden:false,
            title:"iFinancials",
            items:obj.toolbar_default_items,
            maxHeight:44
        });
        obj.valid_sides=['left', 'right',];
        var options = {
                items:[obj.ad_bar,obj.toolbar],
                dock:"top"
        };
        HeaderBar.superclass.constructor.call(this, options);
        this.rotateAds();
    },
    rotateAds:function(){
        var obj = this;
        var delay = 2000;
        var duration = 1250;
        var next = function(){
            var l = obj.ad_bar.getLayout(); // !!! FIXME this is returning a string not a layout object
            l.next({type:'flip', duration:duration}, true);
            setTimeout(timed_next,delay);
        }
        var timed_next = function(){setTimeout(next,delay);}
        timed_next();
    },
    setTitle:function(title){
        this.toolbar.setTitle(title);
    },
    toggleToolbar:function(){
        if (this.toolbar.isVisible()){
            this.toolbar.hide();
        }
        else {this.toolbar.show();}
        
        this.toolbar.doComponentLayout();
        this.doComponentLayout();
    },
    setDefaultToolbarHandler:function(func){
        this.toolbar.items.get(0).setHandler(func);
    },
    replaceButton:function(side, new_button){
        
        if (this.valid_sides.indexOf(side) >=0){
            var old;
            if(side == this.valid_sides[0]){
                old = this.toolbar.items.get(0);
                this.toolbar.remove(old, false);
                this.toolbar.insert(0,new_button);
            }
            else {
                old = this.toolbar.items.get(2);
                
                this.toolbar.remove(old, false);
                this.toolbar.insert(2,new_button);
            }
            old.hide();
            new_button.show();
            this.toolbar.doComponentLayout();
            this.doComponentLayout();
        }
        
        //this.toolbar.doComponentLayout();
    },
    hideButton:function (side){
        if (this.valid_sides.indexOf(side) >=0){
            if(side == this.valid_sides[0]){
                this.toolbar.items.get(0).hide();
            } else {
                this.toolbar.items.get(2).hide();
            }
        }
    },
    resetToolBar:function(){
        for(var i = 0; i < this.valid_sides.length;i++){
            this.resetButton(this.valid_sides[i]);
        }
        this.toolbar.doComponentLayout();
        
    },
    resetButton:function(side){
        var button;
        if (this.valid_sides.indexOf(side) >=0){
            if(side == this.valid_sides[0]){button = this.buttons[0];}
            else {button = this.buttons[1];}
        }
        this.replaceButton(side,button);
        //this.toolbar.doComponentLayout();
    }
});



var headerbar = new HeaderBar({});
var tabpanel = new Ext.TabPanel({
    dockedItems: [
        headerbar
    ],
    items:[
        {
            xtype:'button',
            text:"Back",
            ui:"back",
            handler:function(){
                headerbar.replaceButton('left', new Ext.Button({text:'Hello'}));
            }
        },
        {
            xtype:'button',
            text:"Back",
            ui:"back",
            handler:function(){
                headerbar.replaceButton('right', new Ext.Button({text:'Hello'}));
            }
        }
    ]
});

See this URL : http://


Steps to reproduce the problem:

• open in browser
• use a javascript debugger to view the value of varl at line 65

The result that was expected:

• object ...

The result that occurs instead:

• 'card' ...

Screenshot or Video:

• attached

Debugging already done:

• none

Possible fix:

• not provided

[Jamie Avins]

Thank you for the report.

[TommyMaintz]

In the next release (RC1) getLayout will always return an instantiated layout.