Problem with ref option in Toolbars

**Tawez** · 28 Jul 2010 6:53 AM

We are switching from ext3.0.0 to ext3.2.1
and there is not so small problem with ref option in Toolbars.

The code is as follows:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>renderer test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/lib/ext321/resources/css/ext-all.css" />
    <script type="text/javascript" src="/lib/ext321/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="/lib/ext321/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/lib/ext321/resources/images/default/s.gif';

Ext.onReady(function () {
    var Test = new Ext.Panel({
        renderTo: 'panelHolder',
        title: 'Panel with toolbars',
        height: 200,
        width: 600,
        tbar: new Ext.Toolbar({
            ref: 'TopToolbarRef',
            items: [{
                text: 'Top Button 1',
                ref: '../TopToolbarButton1Ref'
            }, {
                text: 'Top Button 2',
                ref: 'TopToolbarButton2Ref'
            }]
        }),
        bbar: {
            xtype: 'toolbar',
            ref: 'BottomToolbarRef',
            items: [{
                text: 'Bottom Button 1',
                ref: '../BottomToolbarButton1Ref'
            }, {
                text: 'Bottom Button 2',
                ref: 'BottomToolbarButton2Ref'
            }]
        }
    });
}); //end onReady
</script>
</head>

<body>
    <div id="panelHolder"></div>
</body>
</html>

Then let's do a few tests:

Code:

console.log(typeof Test.TopToolbarRef);
=> undefined

console.log(typeof Test.TopToolbarButton1Ref);
=> undefined

console.log(typeof Test.topToolbar.TopToolbarButton2Ref);
=> object

console.log(typeof Test.BottomToolbarRef);
=>  undefined

console.log(typeof Test.BottomToolbarButton1Ref);
=> object

console.log(typeof Test.bottomToolbar.BottomToolbarButton2Ref);
=>  object

Is there something we have missed, or is it a bug?

**Animal** · 28 Jul 2010 7:26 AM

It's a bug in Panel.

Code should be

Code:

        this.toolbars = [];
        // shortcuts
        if(this.tbar){
            this.elements += ',tbar';
            this.topToolbar = this.createToolbar(this.tbar, {
                ownerCt: this
            });
            this.tbar = null;

        }
        if(this.bbar){
            this.elements += ',bbar';
            this.bottomToolbar = this.createToolbar(this.bbar, {
                ownerCt: this
            });
            this.bbar = null;
        }

        if(this.header === true){
            this.elements += ',header';
            this.header = null;
        }else if(this.headerCfg || (this.title && this.header !== false)){
            this.elements += ',header';
        }

        if(this.footerCfg || this.footer === true){
            this.elements += ',footer';
            this.footer = null;
        }

        if(this.buttons){
            this.fbar = this.buttons;
            this.buttons = null;
        }
        if(this.fbar){
            this.createFbar(this.fbar);
        }
        if(this.autoLoad){
            this.on('render', this.doAutoLoad, this, {delay:10});
        }
    },

    // private
    createFbar : function(fbar){
        var min = this.minButtonWidth;
        this.elements += ',footer';
        this.fbar = this.createToolbar(fbar, {
            ownerCt: this,
            buttonAlign: this.buttonAlign,
            toolbarCls: 'x-panel-fbar',
            enableOverflow: false,
            defaults: function(c){
                return {
                    minWidth: c.minWidth || min
                };
            }
        });

**Animal** · 28 Jul 2010 7:29 AM

or, simpler:

Code:

    createToolbar: function(tb, options){
        var result;
        // Convert array to proper toolbar config
        if(Ext.isArray(tb)){
            tb = {
                items: tb
            };
        }
        result = tb.events ? Ext.apply(tb, options) : this.createComponent(Ext.apply({}, tb, Ext.apply(options||{}, {ownerCt: this})), 'toolbar');
        this.toolbars.push(result);
        return result;
    },

**Tawez** · 29 Jul 2010 3:06 AM

I'm afraid, that it is not the solution...

Current test code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>renderer test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/lib/ext321/resources/css/ext-all.css" />
    <script type="text/javascript" src="/lib/ext321/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="/lib/ext321/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/lib/ext321/resources/images/default/s.gif';

Ext.onReady(function () {
    var TestPanel = [
        new Ext.Panel({
            renderTo: 'panel1Holder',
            title: 'Panel 1',
            height: 200,
            width: 600,
            tbar: new Ext.Toolbar({
                ref: 'TBarRef',
                items: [{
                    text: 'Button 1',
                    ref: '../TBarBtn1Ref'
                }, {
                    text: 'Button 2',
                    ref: 'TBarBtn2Ref'
                }]
            })
        }),
        new Ext.Panel({
            renderTo: 'panel2Holder',
            title: 'Panel 2',
            height: 200,
            width: 600,
            tbar: {
                xtype: 'toolbar',
                ref: 'TBarRef',
                items: [{
                    text: 'Button 1',
                    ref: '../TBarBtn1Ref'
                }, {
                    text: 'Button 2',
                    ref: 'TBarBtn2Ref'
                }]
            }
        }),
        new Ext.Panel({
            renderTo: 'panel3Holder',
            title: 'Panel 3',
            height: 200,
            width: 600,
            tbar: [{
                text: 'Button 1',
                ref: '../TBarBtn1Ref'
            }, {
                text: 'Button 2',
                ref: 'TBarBtn2Ref'
            }]
        })
    ];

    for (var i = 0; i < TestPanel.length; i++) {
        console.group('TestPanel ' + (i + 1));
        console.log(typeof TestPanel[i].TBarRef);
        console.log(typeof TestPanel[i].TBarBtn1Ref);
        console.log(typeof TestPanel[i].topToolbar.TBarBtn2Ref);
        console.groupEnd();
    }
}); //end onReady
</script>

</head>

<body>
    <div id="panel1Holder"></div>
    <div id="panel2Holder"></div>
    <div id="panel3Holder"></div>
</body>
</html>

Test results (with or without Your fix):

Code:

TestPanel 1
     undefined
     undefined
     object

TestPanel 2
     undefined
     undefined
     object
 
TestPanel 3
     undefined (as expected)
     object
     object

But the following fix to Ext.Panel.initComponent() works:

Code:

initComponent: function () {
    ...
    if (this.tbar) {
        this.elements += ',tbar';
        this.topToolbar = this.createToolbar(this.tbar);
        this.topToolbar.onAdded(this);
        this.tbar = null;
    }
    if (this.bbar) {
        this.elements += ',bbar';
        this.bottomToolbar = this.createToolbar(this.bbar);
        this.topToolbar.onAdded(this);
        this.bbar = null;
    }
    ...
}

Test results:

Code:

TestPanel 1
     object
     object
     object
 
TestPanel 2
     object
     object
     object
  
TestPanel 3
     undefined (as expected)
     object
     object

**Animal** · 29 Jul 2010 3:58 AM

The real solution is to not instantiate the Toolbar yourself.

See your examples/grid/grid-plugins.html example

Code:

    var sm2 = new xg.CheckboxSelectionModel({
        listeners: {
            // On selection change, set enabled state of the removeButton
            // which was placed into the GridPanel using the ref config
            selectionchange: function(sm) {
                if (sm.getCount()) {
                    grid4.removeButton.enable(); // works
                } else {
                    grid4.removeButton.disable(); // works
                }
            }
        }
    });
    var grid4 = new xg.GridPanel({
        id:'button-grid',
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel([
            sm2,
            {id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change'},
            {header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),
        sm: sm2,

        viewConfig: {
            forceFit:true
        },
        columnLines: true,

        // inline buttons
        buttons: [{text:'Save'},{text:'Cancel'}],
        buttonAlign:'center',

        // inline toolbars
        tbar:[{
            text:'Add Something',
            tooltip:'Add a new row',
            iconCls:'add'
        }, '-', {
            text:'Options',
            tooltip:'Blah blah blah blaht',
            iconCls:'option'
        },'-',{
            text:'Remove Something',
            tooltip:'Remove the selected item',
            iconCls:'remove',

            // Place a reference in the GridPanel
            ref: '../removeButton',
            disabled: true
        }],

        width:600,
        height:300,
        frame:true,
        title:'Support for standard Panel features such as framing, buttons and toolbars',
        iconCls:'icon-grid',
        renderTo: document.body
    });

**Tawez** · 29 Jul 2010 4:52 AM

Originally Posted by Animal

The real solution is to not instantiate the Toolbar yourself.

Generaly it's true

This is our real example (just the idea):

Code:

var grid = new Ext.grid.GridPanel({
    ...
    bbar: {
        xtype: 'paging',
        ref: 'Page',
        ...
    },
    ...
});

Then we have easy access to grid.Page no matter if it is topToolbar or bottomToolbar.
It's simpler to write it this way as well as maintain the code.
It works in ext 3.0.0, where initRef() was called in Component.render(), but no more in ext 3.2.1.

Ext is evolving, it is OK.
But if I have to change more than 10% of the code to have new Ext version up and running, I shall stay with older one.

It works in ext 3.0.0

Maybe this is the real bug?

**Animal** · 29 Jul 2010 5:28 AM

Sticking with an old version? Not a great idea.

Problem with ref option in Toolbars

Thread Tools

Search Thread

Display

Problem with ref option in Toolbars

Problem with ref option in Toolbars

Similar Threads

'ref' config option can't be edited

problem with config option "ref"

[OPEN] [UNKNOWN][3.0svn] Ref config works incorrectly when used on toolbars in panels.

Question about ref config option

Tags for this Thread