1. #1
    Ext User Tawez's Avatar
    Join Date
    Feb 2009
    Location
    Poland
    Posts
    16
    Vote Rating
    0
    Tawez is on a distinguished road

      0  

    Default Problem with ref option in Toolbars

    Problem with ref option in Toolbars


    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?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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
                    };
                }
            });

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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;
        },

  4. #4
    Ext User Tawez's Avatar
    Join Date
    Feb 2009
    Location
    Poland
    Posts
    16
    Vote Rating
    0
    Tawez is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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
        });

  6. #6
    Ext User Tawez's Avatar
    Join Date
    Feb 2009
    Location
    Poland
    Posts
    16
    Vote Rating
    0
    Tawez is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Sticking with an old version? Not a great idea.

Similar Threads

  1. 'ref' config option can't be edited
    By konstruktor in forum Ext Designer: Help & Discussion
    Replies: 7
    Last Post: 30 Mar 2010, 4:48 AM
  2. problem with config option "ref"
    By Sgt.Pepper in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 15 Jan 2010, 4:41 AM
  3. Replies: 5
    Last Post: 7 Sep 2009, 6:24 PM
  4. Question about ref config option
    By zgrose in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 29 Jul 2009, 1:13 PM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi