[CLOSED] How to accumulate messages to display with one X.Msg.Alert()?

**vadym.f** · Sep 10, 2012, 6:40 PM

Originally Posted by Daniil

Yes, if Success is false, then DirectEvent doesn't generate any script. It just sends a "success: false" flag and an error message.

So, if you can make a notification within a Failure handler. As an alternative you can avoid setting Success to false and separate success/failure logic within a Success handler basing on some your flag which you can send via ExtraParamsResponse.

I see. I think I'll have to handle user exceptions in the onFailure method to display a user-friendly message. Unless I become more proficient with PostSharp to inject such a message automatically at pointcuts. And if I manage to convince my company to purchase a PostSharp pro license. :)

I got a requirement for a Notification window to have an Ok button that would hide it and optionally execute some code on/before/after closing. I've looked into Ext.Net client side examples. The closest match would be "Show with content element". However, I'd like to have the Ok button inlined in the Notification config if possible. Could you suggest a solution?

**Daniil** · Sep 10, 2012, 8:36 PM

Originally Posted by vadym.f

I see. I think I'll have to handle user exceptions in the onFailure method to display a user-friendly message. Unless I become more proficient with PostSharp to inject such a message automatically at pointcuts. And if I manage to convince my company to purchase a PostSharp pro license. :)

Unfortunately, I have no PostShart experience to suggest anything. Good luck with convincing your company!:)

Originally Posted by vadym.f

I got a requirement for a Notification window to have an Ok button that would hide it and optionally execute some code on/before/after closing. I've looked into Ext.Net client side examples. The closest match would be "Show with content element". However, I'd like to have the Ok button inlined in the Notification config if possible. Could you suggest a solution?

Generally, a notification is a Window. So, I can suggest the following solution.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Notify(object sender, DirectEventArgs e)
    {
        X.MessageBox.Notify(new NotificationConfig()
            {
                
                CustomConfig =
                {
                    new ConfigItem()
                    {
                        Name = "buttons",
                        Value = "[{ text: 'OK', handler : function () { alert('Hello!'); }}]",
                        Mode = ParameterMode.Raw
                    }
                }
            }).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>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Button runat="server" Text="Notify" OnDirectClick="Notify" />
</body>
</html>

**vadym.f** · Sep 10, 2012, 9:13 PM

Hi Daniil,

Thanks for the suggestions! I think I'll have to go with the custom element (Toolbar) as it provides a more consistent look and feel throughout the application.
What would be the code to place in the button Click listener to hide the hosting Notification? Also, is there any way to stylize the Toolbar to fit the window length (please see the screenshot attached)?

            Ext.net.Notification.show({
                iconCls: 'icon-error',
                html: result.errorMessage,
                title: 'Application Error',
                autoHide: false,
                autoHeight: true,
                closeVisible: true,
                alignToCfg: {
                    offset: [10, -10],
                    position: 'bl-bl',
                    el: Ext.net.getEl('GridPanel1')
                },
                //buttons: [{ text: 'OK', handler : function () { alert('Hello!'); }}],
                contentEl: 'customEl',
                listeners:
                {
                    show:
                    {
                        fn: function (el) {
                            GridPanel1.getStore().reload();
                        }
                    }
                }
            });

    <div id="customEl" class="x-hide-offsets">
        <ext:Panel ID="CustomEl1" runat="server" Border="false">
            <BottomBar>
                <ext:Toolbar ID="Toolb1" runat="server" Margins="-5">
                    <Items>
                        <ext:ToolbarTextItem ID="BarLabel" runat="server" />
                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                        <ext:Button ID="Button1" runat="server" Text="Close" Icon="Cancel" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:Panel>
    </div>

**Daniil** · Sep 11, 2012, 8:27 AM

Originally Posted by vadym.f

I think I'll have to go with the custom element (Toolbar) as it provides a more consistent look and feel throughout the application.

Could you clarify why? Personally, I would prefer to don't mix markup and JavaScript. You can use "items" instead of "contentEl". Also I think mixing up "html" and "contentEl" can potentially lead to some unpredictable consequence.

Originally Posted by vadym.f

What would be the code to place in the button Click listener to hide the hosting Notification?

There is a solution, but it is a bit ugly if you use contentEl - going up through DOM to find a Window div and gets a Window id. Then you the Ext.getCmp() method.

Originally Posted by vadym.f

Also, is there any way to stylize the Toolbar to fit the window length (please see the screenshot attached)?

Maybe this setting in config will help.

bodyStyle: "padding: 0px; text-align:center"

Though, could you clarify, please, why don't you like a solution with "buttons"? Then you could use the findParentByType method. Also the "buttons" Toolbar fits the Window.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!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>

    <script type="text/javascript">
        var notify = function () {
            Ext.net.Notification.show({
                html: "html",
                title: 'title',
                autoHide: false,
                autoHeight: true,
                buttons: [{ 
                    text: 'Close', 
                    handler: function () { 
                        this.findParentByType("window").close(); 
                    }
                }]
            });
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server"/>
        
    <ext:Button runat="server" Text="notify">
        <Listeners>
            <Click Fn="notify" />
        </Listeners>
    </ext:Button>
</body>
</html>

**vadym.f** · Sep 11, 2012, 12:56 PM

Hi Daniil,

I agree to your points. Having the buttons setup encapsulated in the Notification config would be ideal. I thought having a dark toolbar strip stretching along the window bottom would be a good idea from the look perspective, but if it's achieved at the expense of ugly design, maybe not so much.
I like the solution you've provided. Can I have the "Close" button positioned in the middle of the window somehow?

**Daniil** · Sep 11, 2012, 2:46 PM

Originally Posted by vadym.f

I agree to your points. Having the buttons setup encapsulated in the Notification config would be ideal.

Thank you for the suggestion. Maybe, we will be able to implement it for Ext.NET v2.

Originally Posted by vadym.f

I thought having a dark toolbar strip stretching along the window bottom would be a good idea from the look perspective, but if it's achieved at the expense of ugly design, maybe not so much.
I like the solution you've provided. Can I have the "Close" button positioned in the middle of the window somehow?

The "buttons" config is an alias of the "fbar" config.
http://docs.sencha.com/ext-js/3-4/#!...el-cfg-buttons
http://docs.sencha.com/ext-js/3-4/#!...Panel-cfg-fbar

Also you can use the "bbar" config.
http://docs.sencha.com/ext-js/3-4/#!...Panel-cfg-bbar

With "fbar" and "bbar" you should be able to stylize these toolbars as you need using CSS and align using two ToolbarFill-s.

**vadym.f** · Sep 11, 2012, 3:39 PM

Originally Posted by Daniil

Thank you for the suggestion. Maybe, we will be able to implement it for Ext.NET v2.

The "buttons" config is an alias of the "fbar" config.
http://docs.sencha.com/ext-js/3-4/#!...el-cfg-buttons
http://docs.sencha.com/ext-js/3-4/#!...Panel-cfg-fbar

Also you can use the "bbar" config.
http://docs.sencha.com/ext-js/3-4/#!...Panel-cfg-bbar

With "fbar" and "bbar" you should be able to stylize these toolbars as you need using CSS and align using two ToolbarFill-s.

I like the bbar effect on the Notification look, thanks for the pointer! Could you please suggest how to use the Toolbar filler in this setup?

            Ext.net.Notification.show({
                iconCls: 'icon-error',
                html: result.errorMessage,
                title: 'Application Error',
                autoHide: false,
                autoHeight: true,
                closeVisible: true,
                alignToCfg: {
                    offset: [10, -10],
                    position: 'bl-bl',
                    el: Ext.net.getEl('GridPanel1')
                },
                bbar: [
                        /*{type : ToolbarFill},*/
                        {
                            text: 'Close',
                            handler: function () {
                                this.findParentByType("window").close();
                            }
                        }
                ],
                listeners:
                {
                    show:
                    {
                        fn: function (el) {
                            GridPanel1.getStore().reload();
                        }
                    }
                }
            });

**Daniil** · Sep 11, 2012, 4:33 PM

Here is an example.
http://docs.sencha.com/ext-js/3-4/#!...t.Toolbar.Fill

Though, I discovered that a Button between two ToolbarFill-s is not centered. I was sure it should work.

Fortunately, there is the buttonAlign config.
http://docs.sencha.com/ext-js/3-4/#!...fg-buttonAlign

Example

bbar: {
    buttonAlign: "center",
    items: [{
        text: 'Close',
        handler: function () {
            this.findParentByType("window").close();
        }
    }],
}

**vadym.f** · Sep 11, 2012, 5:06 PM

Originally Posted by Daniil

Here is an example.
http://docs.sencha.com/ext-js/3-4/#!...t.Toolbar.Fill

Though, I discovered that a Button between two ToolbarFill-s is not centered. I was sure it should work.

Fortunately, there is the buttonAlign config.
http://docs.sencha.com/ext-js/3-4/#!...fg-buttonAlign

Example

bbar: {
    buttonAlign: "center",
    items: [{
        text: 'Close',
        handler: function () {
            this.findParentByType("window").close();
        }
    }],
}

This config looks like what I've been looking for, thanks!! Please mark this thread as closed.

Thread: [CLOSED] How to accumulate messages to display with one X.Msg.Alert()?

Thread Tools

Search Thread

Display

Similar Threads

How to erase RemoteValidation Messages

[CLOSED] How to change position to show messages?

[CLOSED] [1.0] How to display the messages into several lines in Message Box.

[CLOSED] Button DirectEvent Confirmation - display alert

alert vs Ext.Msg.alert + window.location

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] How to accumulate messages to display with one X.Msg.Alert()?

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us