toolbar overflow can't post back when it was hided

Page 1 of 2 12 LastLast
  1. #1

    button in toolbar overflow can't post back when it was hided

    when toolbar is overflow, it can't call post back event. i think it's ID was changed .

    her is code in ASPX.

    <ext:Toolbar ID="tbarMain" runat="server" Height="30" EnableOverflow="true">
                                <Items>
                                    <ext:Button ID="tbarAction" runat="server" Text="Hoạt động" Icon="Lightning">
                                        <Menu>
                                            <ext:Menu ID="Menu1" runat="server">
                                                <Items>
                                                    <ext:MenuItem Text="Danh sách" OnClientClick="load('/InventoryManagement/Stock_out_for_Sales_List.aspx')"
                                                        Icon="Link">
                                                    </ext:MenuItem>
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarGetOnHand" runat="server" Text="Lấy tồn kho" Icon="Add">
                                        <DirectEvents>
                                            <Click Before="return SetAfterSave('GetOnHand');" OnEvent="tbarGetHand_Click">
                                                <EventMask ShowMask="true" Msg="Processing..." />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarReserveForSales" runat="server" Text="Chuyển hàng đi bán"
                                        Icon="Add">
                                        <DirectEvents>
                                            <Click Before="return SetAfterSave('ReserveForSales');" Success="tbarReserveForSales_Success"
                                                OnEvent="tbarReserveForSales_Click">
                                                <EventMask ShowMask="true" Msg="Processing..." />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarNew" runat="server" Text="Thêm mới" Icon="PageAdd">
                                        <DirectEvents>
                                            <Click Before="return tbarNew_Click();" OnEvent="tbarNew_Click">
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarEdit" runat="server" Text="Chỉnh sửa" Icon="PageEdit">
                                        <Listeners>
                                            <Click Fn="tbarEdit_Click" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarDelete" runat="server" Text="Xóa" Icon="Delete">
                                        <DirectEvents>
                                            <Click Success="tbarDelete_Success()" OnEvent="tbarDelete_Click">
                                                <ExtraParams>
                                                    <ext:Parameter Mode="Raw" Name="KEY" Value="Ext.encode(#{stoStockSales}.data.items[0].get('Key'))">
                                                    </ext:Parameter>
                                                </ExtraParams>
                                                <Confirmation ConfirmRequest="true" Message="Bạn có chắc muốn xóa không?" />
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarSave" runat="server" Text="Lu" Icon="DiskEdit">
                                        <DirectEvents>
                                            <Click Before="tbarSave_Click_Before(el, type, action, extraParams)" OnEvent="tbarSave_Click">
                                                <ExtraParams>
                                                    <ext:Parameter Mode="Raw" Name="OBJ" Value="Ext.encode(#{stoStockSales}.data.items[0].data)">
                                                    </ext:Parameter>
                                                    <ext:Parameter Mode="Raw" Name="LINES" Value="Ext.encode(#{stoLines}.getRecordsValues())">
                                                    </ext:Parameter>
                                                    <ext:Parameter Mode="Value" Name="DELETEDLINES" Value="">
                                                    </ext:Parameter>
                                                </ExtraParams>
                                                <EventMask ShowMask="true" Msg="Processing..." />
                                            </Click>
                                        </DirectEvents>
                                        <Listeners>
                                            <MouseOver Handler="grdLines.stopEditing();" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarCancel" runat="server" Text="Hủy" Icon="Cancel">
                                        <Listeners>
                                            <Click Fn="tbarCancel_Click" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button Text="Xác nhận" Icon="ApplicationGo" runat ="server" ID="tbarReleased" >
                                        <DirectEvents>
                                            <Click OnEvent="Released">
                                                <EventMask ShowMask="true" Msg="Processing..." />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button Text="Mở lại" Icon="DoorOpen">
                                        <DirectEvents>
                                            <Click OnEvent="ReOpen">
                                                <EventMask ShowMask="true" Msg="Processing..." />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarSeparator Hidden="true" />
                                    <ext:Button ID="tbarPrint" runat="server" Text="Print" Icon="Printer" Hidden="true">
                                    </ext:Button>
                                    <ext:ToolbarSeparator Hidden="true" />
                                    <ext:Button ID="tbarPost" runat="server" Text="Post" Icon="BookAdd" Hidden="true">
                                        <DirectEvents>
                                            <Click OnEvent="tbarPost_Click" />
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:ToolbarFill />
                                    <ext:Button ID="tbarReload" runat="server" Icon="Reload" OnClientClick=" reload();">
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button ID="tbarClose" runat="server" Icon="Cross" OnClientClick=" window.parent.exit();">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
    Here is error.
    Click image for larger version. 

Name:	error.jpg 
Views:	139 
Size:	92.9 KB 
ID:	3101
    please help me.

    thanks you very much
    SonNT
    Last edited by sonnt; Aug 29, 2011 at 9:47 AM.
  2. #2
    help me please
  3. #3
    I am also experiencing this. The issue happens when the button is in the overflow portion of the toolbar. It is not dependent on it's location on render. If browser is resized and the button becomes hidden, it will start throwing the error.
    Last edited by amgw; Oct 28, 2011 at 6:19 PM.
  4. #4
    Hi @sonnt and @amgv,

    Thanks for the report.

    We are investigating and will back with an update.
  5. #5
    Yes, overflow menu's items are created basing on toolbar's ones and have different ids, because an id must be unique.

    In addition, these menu's items are created on a client side and there are no respective server controls, therefore using a DirectEvent is impossible, because a DirectEvent requires a server control.

    Please use a DirectMethod instead of a DirectEvent.
  6. #6
    I am dissapointed to hear that. The main point of overflow is that you don't know how many buttons will fit (it varies by screen resolution). This in effect means that all toolbar buttons should not be using DirectEvents (if the toolbar has overflow turned on).
  7. #7
    Why do you very need to use a DirectEvent? A DirectMethod has all DirectEvent's functionality and even flexible.
  8. #8
    That's true. But here are my reasons:

    1) I have a working application with many screens and do not want to rework the code.
    2) I find the markup for DirectEvents cleaner and easier to work with than the equivalent js code for DirectMethod
  9. #9
    1) I have a working application with many screens and do not want to rework the code.
    I think not so working, otherwise you would not post here:)

    Ok, I will try to prepare a fix for you. But not sure about a success.
  10. #10
    To fix please add the following script into a page's <head>.

    Fix
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript">
        Ext.layout.ToolbarLayout.override({
            createMenuConfig : function (component, hideOnClick) {
                var config = Ext.apply({}, component.initialConfig),
                    group  = component.toggleGroup;
    
                Ext.copyTo(config, component, [
                    'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
                ]);
    
                Ext.apply(config, {
                    text        : component.overflowText || component.text,
                    hideOnClick : hideOnClick
                });
    
                if (group || component.enableToggle) {
                    Ext.apply(config, {
                        group  : group,
                        checked : component.pressed,
                        listeners : {
                            checkchange : function( item, checked) {
                                component.toggle(checked);
                            }
                        }
                    });
                }
    
                //fix
                if (config.directEvents && config.directEvents.click) {
                    if (!(config.listeners && config.listeners.click)) {
                        config.listeners = {
                            click : { }
                        };
                    }
                    config.listeners.click.fn = function () {
                        component.fireEvent("click", component)    
                    }
    
                    delete config.directEvents;
                }
                //end fix
    
                delete config.ownerCt;
                delete config.xtype;
                delete config.id;
    
                return config;
            }
        });
    </script>
    Here is the full example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Button_Click(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("DirectEvent", "Hello from Server!").Show();
        }
    </script>
    
    <!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">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        <script type="text/javascript">
            Ext.layout.ToolbarLayout.override({
                createMenuConfig : function (component, hideOnClick) {
                    var config = Ext.apply({}, component.initialConfig),
                        group  = component.toggleGroup;
    
                    Ext.copyTo(config, component, [
                        'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
                    ]);
    
                    Ext.apply(config, {
                        text        : component.overflowText || component.text,
                        hideOnClick : hideOnClick
                    });
    
                    if (group || component.enableToggle) {
                        Ext.apply(config, {
                            group  : group,
                            checked : component.pressed,
                            listeners : {
                                checkchange : function( item, checked) {
                                    component.toggle(checked);
                                }
                            }
                        });
                    }
    
                    //fix
                    if (config.directEvents && config.directEvents.click) {
                        if (!(config.listeners && config.listeners.click)) {
                            config.listeners = {
                                click : { }
                            };
                        }
                        config.listeners.click.fn = function () {
                            component.fireEvent("click", component)    
                        }
    
                        delete config.directEvents;
                    }
                    //end fix
    
                    delete config.ownerCt;
                    delete config.xtype;
                    delete config.id;
    
                    return config;
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Toolbar runat="server" Width="70" EnableOverflow="true">
                <Items>
                    <ext:Button runat="server" Text="Button" />
                    <ext:Button runat="server" Text="DirectEvent" OnDirectClick="Button_Click" />
                    <ext:Button runat="server" Text="Button">
                        <Listeners>
                            <Click Handler="alert('I am a Click listener.');" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </form>
    </body>
    </html>
    Please confirm if it works or not.
Page 1 of 2 12 LastLast

Similar Threads

  1. Partial Post Back
    By hardik in forum 1.x Help
    Replies: 2
    Last Post: Apr 13, 2011, 4:46 AM
  2. Store does not retain value after post back
    By pooja in forum 1.x Help
    Replies: 1
    Last Post: Oct 15, 2010, 6:14 PM
  3. [CLOSED] [1.0] Toolbar Overflow
    By Ben in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 12, 2010, 3:02 PM
  4. [CLOSED] Post back issues
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jun 24, 2009, 9:06 AM
  5. [CLOSED] Post Back issues ????
    By dukefama in forum 1.x Help
    Replies: 2
    Last Post: Oct 08, 2008, 1:52 PM

Posting Permissions