[CLOSED] Menu fireEvent

  1. #1

    [CLOSED] Menu fireEvent

    The sample below works in 2.5, but throws a Syntax error exception in 4.1. Why and what should I change?

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
       <title></title>
    
       <script type="text/javascript">
          var menuItemClick = function (menu, item)
          {
             var returnValue = false;
    
             var panelArray = Ext.query('.dialog-form-panel{display!=none}');
    
             if (panelArray.length > 0)
             {
                var visibleForm = Ext.getCmp(panelArray[0].id);
    
                if (typeof (visibleForm.isValid) == 'function')
                {
                   returnValue = visibleForm.isValid();
                }
             }
    
             if (returnValue)
             {
                var activeTab = Ext.getCmp('hActiveTab');
    
                if (item)
                {
                   if (item.id == 'menuFrequency')
                   {
                      if (activeTab.value == 'Frequency')
                      {
                         return false;
                      }
                      HideAndDisable('panelGeneral');
                      HideAndDisable('panelDetails');
                      ShowAndEnable('panelFrequency');
                      activeTab.value = 'Frequency';
                   }
                   else if (item.id == 'menuDetails')
                   {
                      if (activeTab.value == 'Details')
                      {
                         return false;
                      }
    
                      HideAndDisable('panelGeneral');
                      HideAndDisable('panelFrequency');
                      ShowAndEnable('panelDetails');
                      activeTab.value = 'Details';
                   }
                   else
                   {
                      if (activeTab.value == 'General')
                      {
                         return false;
                      }
                      HideAndDisable('panelDetails');
                      HideAndDisable('panelFrequency');
                      ShowAndEnable('panelGeneral');
                      activeTab.value = 'General';
                   }
                }
                CurrentFormIsValid();
             }
    
             return returnValue;
          };
    
          function SetSaveButtonStatus(buttonId)
          {
             Ext.getCmp(buttonId).setDisabled(false);
          }
       </script>
    
       <script runat="server">
          protected void Page_Load( object sender, EventArgs e )
          {
          }
    
          protected void btnNew_DirectClick( object sender, DirectEventArgs e )
          {
             //Here goes code to prepare initial values
             PluginEditWindow.Show();
          }
    
          protected void btnSave_DirectClick( object sender, DirectEventArgs e )
          {
             //Code to save plugins
             PluginEditWindow.Hide();
          }
       </script>
    </head>
    <body>
       <form id="form1" runat="server">
          <ext:ResourceManager runat="server" ID="testRM" />
          <ext:Hidden ID="hActiveTab" runat="server"></ext:Hidden>
          <ext:Hidden ID="hGeneralValid" runat="server"></ext:Hidden>
          <ext:Hidden ID="hFrequencyValid" runat="server"></ext:Hidden>
          <ext:Hidden ID="hDetailsValid" runat="server"></ext:Hidden>
    
          <ext:Button runat="server" ID="btnNew" Text="New Item" OnDirectClick="btnNew_DirectClick" />
    
          <ext:Window ID="PluginEditWindow" runat="server" Height="500" Width="700" Hidden="true" Modal="true" Layout="BorderLayout">
             <Items>
                <ext:Panel ID="Panel1" runat="server" Layout="AccordionLayout" Split="true" Width="100" Region="West">
                   <Items>
                      <ext:MenuPanel runat="server" ID="menuPanelPluginDialog" SelectedIndex="0" HideCollapseTool="true">
                         <Menu ID="menuPluginDialog" runat="server">
                            <Items>
                               <ext:MenuItem runat="server" ID="menuGeneral" Text="General" Icon="Information" CausesValidation="true" FormBind="true"></ext:MenuItem>
                               <ext:MenuItem runat="server" ID="menuFrequency" Text="Frequency" Icon="CalendarViewMonth" CausesValidation="true" FormBind="true"></ext:MenuItem>
                               <ext:MenuItem runat="server" ID="menuDetails" Text="Details" Icon="ApplicationViewDetail" CausesValidation="true" FormBind="true"></ext:MenuItem>
                            </Items>
                            <Listeners>
                               <Click CausesValidation="true" Fn="menuItemClick"></Click>
                            </Listeners>
                         </Menu>
                      </ext:MenuPanel>
                   </Items>
                </ext:Panel>
                <ext:Panel ID="panelPluginDialog" runat="server" BorderSpec="0" Layout="FitLayout" Region="Center">
                   <Items>
                      <ext:FormPanel runat="server" Title="General" Icon="Information" Layout="VBoxLayout" ID="panelGeneral" Cls="dialog-form-panel" Border="false">
                         <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                         </LayoutConfig>
                         <Items>
                            <ext:TextField ID="edtDetailsPluginDescription" runat="server" FieldLabel="Description" AllowBlank="false" AllowOnlyWhitespace="false" Margin="5" EnforceMaxLength="true"></ext:TextField>
                            <ext:Checkbox runat="server" ID="chkPluginEnabled" BoxLabel="Enabled" Margin="5"></ext:Checkbox>
                         </Items>
                         <Buttons>
                            <ext:Button runat="server" ID="btnNextGeneral" Text="Next" FormBind="true"
                               OnClientClick="#{menuPluginDialog}.fireEvent('click', #{menuPluginDialog}, #{menuFrequency});SetSaveButtonStatus('btnSaveFrequency');return true;">
                            </ext:Button>
                            <ext:Button runat="server" ID="btnSaveGeneral" Text="Save" FormBind="true" OnClientClick="return ShowGeneralPanel();" OnDirectClick="btnSave_DirectClick"></ext:Button>
                         </Buttons>
                         <Listeners>
                            <ValidityChange Handler="#{btnNextGeneral}.setDisabled(!valid);#{hGeneralValid}.value = valid;SetSaveButtonStatus('btnSaveGeneral');"></ValidityChange>
                         </Listeners>
                      </ext:FormPanel>
                      <ext:FormPanel runat="server" Title="Frequency" Icon="CalendarViewMonth" Layout="VBoxLayout" ID="panelFrequency" Cls="dialog-form-panel" Border="false">
                         <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                         </LayoutConfig>
                         <Items>
                            <ext:NumberField ID="edtEveryCount" FieldLabel="IntervalCount" runat="server" Margin="5" AllowDecimals="false" AllowBlank="false" AllowOnlyWhitespace="false" MinValue="1" MaxValue="999" MaxLength="3" EnforceMaxLength="true"></ext:NumberField>
                         </Items>
                         <Buttons>
                            <ext:Button runat="server" ID="btnPreviousFrequency" Text="Previous" FormBind="true"
                               OnClientClick="#{menuPluginDialog}.fireEvent('click', #{menuPluginDialog}, #{menuGeneral});SetSaveButtonStatus('btnSaveGeneral');return true;">
                            </ext:Button>
                            <ext:Button runat="server" ID="btnNextFrequency" Text="Next" FormBind="true"
                               OnClientClick="#{menuPluginDialog}.fireEvent('click', #{menuPluginDialog}, #{menuDetails});SetSaveButtonStatus('btnSaveDetails');return true;">
                            </ext:Button>
                            <ext:Button runat="server" ID="btnSaveFrequency" Text="Save" FormBind="true" OnClientClick="return ShowGeneralPanel();" OnDirectClick="btnSave_DirectClick"></ext:Button>
                         </Buttons>
                         <Listeners>
                            <ValidityChange Handler="#{btnPreviousFrequency}.setDisabled(!valid);#{btnNextFrequency}.setDisabled(!valid);#{hFrequencyValid}.value = valid;SetSaveButtonStatus('btnSaveFrequency');"></ValidityChange>
                         </Listeners>
                      </ext:FormPanel>
                      <ext:FormPanel runat="server" Title="Details" Icon="ApplicationViewDetail" Layout="FitLayout" ID="panelDetails" Cls="dialog-form-panel" Border="false">
                         <Items>
                            <ext:Panel runat="server" ID="panelReportDetails" Layout="VBoxLayout" Border="false" Hidden="true">
                               <Defaults>
                                  <ext:Parameter Name="InputWidth" Value="250"></ext:Parameter>
                               </Defaults>
                               <Items>
                                  <ext:TextField runat="server" ID="edtFieldSeparator" Margin="5" FieldLabel="FieldSeparator" MaxLength="10" EnforceMaxLength="true" Hidden="true"></ext:TextField>
                                  <ext:TextField runat="server" ID="edtReportEmail" FieldLabel="Email" Margin="5" AllowBlank="false" AllowOnlyWhitespace="false" Hidden="true"></ext:TextField>
                                  <ext:TextField runat="server" ID="edtReportRemoteFile" FieldLabel="RemoteFile" Margin="5" AllowBlank="false" AllowOnlyWhitespace="false" Hidden="true"></ext:TextField>
                                  <ext:TextField runat="server" ID="edtReportRemoteFolder" FieldLabel="RemoteFolder" Margin="5" AllowBlank="false" AllowOnlyWhitespace="false" Hidden="true"></ext:TextField>
                               </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" ID="panelRecalculateDetails" Layout="FormLayout" Border="false" Hidden="true" BodyPadding="5">
                               <Defaults>
                                  <ext:Parameter Name="LabelWidth" Value="140"></ext:Parameter>
                               </Defaults>
                               <Items>
                                  <ext:TextField ID="edtRecalculateDialedNumbers" runat="server" MaxLength="4000" EnforceMaxLength="true" Flex="1" MsgTarget="Side" FieldLabel="DialedNumberOrCLID"></ext:TextField>
                               </Items>
                            </ext:Panel>
                         </Items>
                         <Buttons>
                            <ext:Button runat="server" ID="btnPreviousDetails" Text="Previous" FormBind="true"
                               OnClientClick="#{menuPluginDialog}.fireEvent('click', #{menuPluginDialog}, #{menuFrequency});SetSaveButtonStatus('btnSaveFrequency');return true;">
                            </ext:Button>
                            <ext:Button runat="server" ID="btnSaveDetails" Text="Save" FormBind="true" OnClientClick="return ShowGeneralPanel();" OnDirectClick="btnSave_DirectClick"></ext:Button>
                         </Buttons>
                         <Listeners>
                            <ValidityChange Handler="#{hDetailsValid}.value = valid;#{btnPreviousDetails}.setDisabled(!valid);SetSaveButtonStatus('btnSaveDetails');"></ValidityChange>
                         </Listeners>
                      </ext:FormPanel>
                   </Items>
                </ext:Panel>
             </Items>
             <Listeners>
                <AfterLayout Handler="SetSaveButtonStatus('btnSaveGeneral');SetSaveButtonStatus('btnSaveFrequency');SetSaveButtonStatus('btnSaveDetails');"></AfterLayout>
             </Listeners>
          </ext:Window>
    
       </form>
    </body>
    </html>
    Last edited by fabricio.murta; Oct 11, 2016 at 9:01 PM.
  2. #2
    Hello Edgar!

    The method Ext.query() has changed since then, so you'd have to adequate your scripts to find the panels in the correct syntax.

    Please check the ExtJS documentation on Ext.dom.Element.query() for ExtJS 6.0.2.

    For reference, the syntax for Ext.query() is available in ExtJS 4.1.2 documentation on Ext.dom.Query.select().

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    How would I select only the divs having a certain class and display != none?

    This returns all the divs with dialog-form-panel class

    div[class~=dialog-form-panel]
    Based on the docs, I should simply add {display!=none}, but this throws the same syntax error.
  4. #4
    I used this and it works, but I'm sure there must be a simpler way to achieve what I need.

             var panelArray = Ext.query('div[class~=dialog-form-panel]');
    
             for (var iPanelIndex = 0; iPanelIndex < panelArray.length; iPanelIndex++)
             {
                if (panelArray[iPanelIndex].style.display != "none")
                {
                   var visibleForm = Ext.getCmp(panelArray[iPanelIndex].id);
                   //do stuff
    Any ideas?
  5. #5
    Hello Edgar!

    I've tried adding your version of the fix but I'm still not sure on what should work and how in your sample.

    Maybe if you simplified more the example to highlight just what you need to work in it and describe it step by step, I could give you a second opinion on how to perform that.

    Well, with what I have here, I click the 'new item' button, and then if I click any other menu item in the window that appears, the field in the initial form is validated. When I type something in the field, it becomes valid but anyway clicking the other menu entries do nothing, so I'm a little lost on what really should work in the example, and how it should work.

    Hope to hear back from you soon!
  6. #6
    Hello Edgar!

    Do you still need help on this issue? It's been a few days already without feedback from you. We'll wait another week for feedback before marking this as closed. But worry not, as just marking this thread as closed will not prevent you from posting follow-ups when you are able to!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hi FabrÃ*cio!

    Found a work-around in the meantime. Forgot to update the thread. My apologies. You can mark it as closed.
  8. #8
    Hello! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] fireEvent issue in plugin
    By multimediait in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 20, 2014, 10:15 AM
  2. Ext.Button fireevent in V2.x
    By speedstepmem4 in forum 2.x Help
    Replies: 1
    Last Post: Sep 26, 2013, 4:44 AM
  3. Possible bug in Safari with fireEvent
    By dimitar in forum 2.x Help
    Replies: 1
    Last Post: Mar 04, 2013, 2:18 AM
  4. [CLOSED] FireEvent('selectionchange')
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 09, 2013, 7:54 PM
  5. Replies: 0
    Last Post: Aug 04, 2009, 9:57 AM

Tags for this Thread

Posting Permissions