Results 1 to 6 of 6

Thread: Button toggling problem

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    47

    Question Button toggling problem

    Hi, I've created a Ext.ToolBar with 3 buttons. Each button is related to a Ext.Window. I want the button to be toggled = true for when the Window is shown and false when the Window is hidden. I've added a listener to the window hide event that runs a function. The function uses the Ext.get function to get the associated button element. Then I use the toggle method on the element, but the methods is hiding the button, not toggling it. Does anyone have any ideas on this? I put a subset of the javascript below.

    Thanks

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

    Default

    Please reformat your post (edit) to enclose your code within [ code ] and [ /code ] tags.

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    47

    Default

    Code:
     //Create the dialog button bar
     var bb = new Ext.Toolbar({
      defaultType: 'button',
      items: [{
       id: 'btnToc',
       icon: 'images/CriticalDetails.png',
       enableToggle: true,
       pressed: true,
       tooltipType: 'title',
       scale: 'large',
       width: 'auto',
       tooltip: {text:'Dialog box for controlling visible layers', title:'Table of Contents'},
       handler: function () {
        showLegend();
       }
      }, {
       id: 'btnAddr',
       icon: 'images/Form.png',
       enableToggle: true,
       pressed: true,
       tooltipType: 'title',
       scale: 'large',
       width: 'auto',
       tooltip: {text:'Dialog box for querying broadband<br />availability by address', title:'Address Query Form'},
       handler: function () {
        showAddrWin();
       }
      }, {
       id: 'btnRes',
       icon: 'images/List.png',
       enableToggle: true,
       tooltipType: 'title',
       scale: 'large',
       width: 'auto',
       tooltip: {text:'Dialog box for displaying broadband<br />query results', title:'Query Results'},
       handler: function() {
        //map.setCenter(mapbnd.getCenter(), initzoom);
        showQryRes();
       }
      }]
     });
     
     //Create the toolbar window
     var buttonBarWin = new Ext.Window({
      applyTo: 'dialogbar',
      layout: 'fit',
      closable: false,
      draggable: false,
      x: 80,
      y: 100,
      width: 140,
      height: 75,
      autoScroll: false,
      resizable: false,
      header: true,
      title: 'Dialogs',
      items: bb
     });
     
     buttonBarWin.show();
     
     //Create the Layer Legend Form
     var layerForm = new Ext.form.FormPanel({
      baseCls: 'x-plain',
            labelWidth: 55,
            defaultType: 'checkbox',
      items: [{
       id: 'layChk',
       boxLabel: 'Generalized Broadband Coverage',
       hideLabel: true,
       checked: true,
       handler: arcLayerChecked
      }, {
       xtype: 'box',
       anchor: '',
       isFormField: false,
       hideLabel: true,
       autoEl: {
        tag:'div', children:[{
         tag:'img',
         qtip:'Generalized Broadband Coverage',
         src:'images/type.png'
        }]
       }
      }]
     });
     
     //Layer Info Tab Panels
     var layerTab = new Ext.TabPanel({
      activeTab: 0,
      items: [{
       title: 'General',
       bodyStyle: 'padding:5px;',
       items: layerForm
      }, {
       title: 'Technology',
       bodyStyle: 'padding:5px;',
       html: 'Technology Layers'
      }, {
       title: 'Provider',
       bodyStyle: 'padding:5px;',
       html: 'Provider Layers'
      }]
     });
     
     //Layer Info Dialog Window
     layerInfo = new Ext.Window({
      applyTo: 'layerInfo',
      layout: 'fit',
      closeAction: 'hide',
      //constrain: true,
      x: 20,
      y: 300,
      width: 250,
      height: 300,
      //autoScroll: true,
      //resizable: false,
      header: true,
      title: 'Table of Contents',
      items: layerTab,
      listeners: {
       hide: hideLegend
      }
     });
     
     showLegend();
     
    // functions to display feedback
    function showLegend() {
     if (layerInfo) {
      layerInfo.show();
     }
    }
    function hideLegend() {
     var lgndIcon = Ext.get('btnToc');
     if (lgndIcon) { 
      lgndIcon.toggle();
     }
    }

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    47

    Default

    Either of these is making the button hide.

    Code:
    Ext.fly('btnToc').toggle();
    Code:
    function hideAddrWin() {
     var addrIcon = Ext.get('btnToc');
     if (addrIcon) {
      addrIcon.toggle();
     }
    }

  5. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    47

    Default

    Ah, I think I figured it out. I needed to use Ext.getCmp('btnToc'); to grab the component. Now the toggle is working.

    Thanks

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

    Default

    yes, Ext.get !== Ext.getCmp.

    That said, you should not depend on Ext.getCmp to develop applications.

    Some things to watch if you have time:
    http://tdg-i.com/364/abstract-classes-with-ext-js

    Presentation on Building base classes with Ext JS: http://vimeo.com/9758715

Similar Threads

  1. groupcontextmenu stop group toggling
    By LambyPie in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 12 May 2010, 12:29 AM
  2. Toggling contentEl
    By GJB in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 13 Nov 2009, 2:03 AM
  3. synchronize two toggling buttons
    By fetchinson in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 24 Jun 2008, 8:43 PM
  4. Toggling display in a DL
    By knight in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 26 Feb 2008, 12:31 AM
  5. Toggling enableDD property
    By magicfrog in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Jul 2007, 3:09 AM

Posting Permissions

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