[CLOSED] Simple cross browser 'copy to clipboard' solution needs some spicing up

  1. #1

    [CLOSED] Simple cross browser 'copy to clipboard' solution needs some spicing up

    Hi Guys,

    I'm using this simple copy to clipboard solution to give the users the oppertunity to use their right click to copy on a fast way rowcontent to the clipboard.

    It works, but is doesn't look very stylish. Is there a way to 'port' this solution to a ext.net layout ?

    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />    
    
    
        <style>
            .x-grid-row-over .x-grid-cell-inner {
                font-weight : bold;
            }
        </style>
    
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
    
            function copyToClipboard(text) {
                window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>Simple Array Grid</h1>
        
        <ext:GridPanel 
            ID="GridPanel1"
            runat="server" 
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">                  
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>            
            </ColumnModel>       
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
                    </Items>
                </ext:Toolbar>
            </BottomBar>
            <Listeners>
                <ItemContextMenu Handler="copyToClipboard('Company: ' + record.data.company);e.stopEvent();"/>
            </Listeners>
        </ext:GridPanel>
    
    
        
    </body>
    </html>
    Last edited by Daniil; Mar 11, 2014 at 5:05 AM. Reason: [CLOSED]
  2. #2
    Hi Martin,

    There is a MessageBox.prompt. Maybe, it is something you are going to use.
    http://docs.sencha.com/extjs/4.2.1/#...-method-prompt
  3. #3
    Almost :)

    Is there a way to select the text in the textbox (so that the user don't have to use Ctr+A) and get rid of the cancel button ?

    function copyToClipboard(text) {
              Ext.Msg.prompt('Copy to clipboard', ' Ctrl+C, Enter',false,'window',false,text);
       }
  4. #4
    The prompt method calls the show method with some config.
    http://docs.sencha.com/extjs/4.2.1/s...-method-prompt

    You can use the show method to configure as needed. It is for buttons.

    As for selecting the text, you can access an input field by:
    Ext.Msg.textField
    and do whatever you want.

    Example
    Ext.Msg.show({
        prompt: true,
        title: "title",
        minWidth: Ext.Msg.minPromptWidth,
        msg: "message",
        buttons: Ext.Msg.OK,
        callback: function () { console.log("callback"); },
        value: "text"
    });
    
    Ext.Msg.textField.selectText();
    Last edited by Daniil; Mar 07, 2014 at 4:10 PM.
  5. #5
    Thanks Daniil! This Will do...

Similar Threads

  1. Contextmenu Cut/Copy/Paste (Without Clipboard )
    By equiman in forum Examples and Extras
    Replies: 2
    Last Post: Nov 14, 2012, 1:16 PM
  2. Replies: 1
    Last Post: Oct 05, 2012, 11:56 AM
  3. [CLOSED] TableLayout cross browser problem
    By kenanhancer in forum 1.x Premium Help
    Replies: 4
    Last Post: Jan 13, 2011, 10:24 AM
  4. [CLOSED] Gridpanel selected row Copy to clipboard
    By yobnet in forum 1.x Premium Help
    Replies: 1
    Last Post: Mar 26, 2010, 5:36 AM
  5. Replies: 3
    Last Post: Nov 12, 2009, 8:12 AM

Posting Permissions