[CLOSED] [1.0] Dynamically format GridCommand cell and button

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [1.0] Dynamically format GridCommand cell and button

    I am using the gridpanel to display and modify theme elements of a website. One column is a command column (ext:gridcommand) containing a hex triplet color code. When the grid loads, the cell displays the hex code in a button and the entire cell and button are the color represented by that code. The grid is loaded from a store and all actions/changes described below are done client side.



    I need three things:
    1. I need to align the button to the center of the cell.
    2. When the user clicks on the color cell button, I capture the color code in a color picker. The user can then change the color. I capture the change and write it back to the store. My problem is that I can't get the cell to update to the new data. It shows by flag that it is modified and if clicked upon again, the new value is sent to the color picker, but the old value is still displayed in the cell.
    3. I need to change the color of the font within the cell based on the color of the cell on load and "refresh" (referring to question 2). I have a javascript function which determines whether to use white or black font color depending on the color of the cell. Each cell can be a different color and must be changed individually

    Attached is a screen shot of the gridpanel


    thanks
    Attached Thumbnails Click image for larger version. 

Name:	themesettings_palette.jpg 
Views:	186 
Size:	41.6 KB 
ID:	2182  
    Last edited by Daniil; Jan 20, 2011 at 9:47 AM. Reason: [CLOSED]
  2. #2
    Quote Originally Posted by betamax View Post
    1. I need to align the button to the center of the cell.
    Hi betamax,

    Please set CommandColumn ButtonAlign to "Center".

    Example
    <ext:CommandColumn ButtonAlign="Center">
        <Commands>
            <ext:GridCommand CommandName="command1" Text="Command" StandOut="true" />
        </Commands>
    </ext:CommandColumn>
    Note.

    Please note that this property was added not so far ago. So, update from SVN may be required or add the script, please see
    http://forums.ext.net/showthread.php?11403
    Last edited by Daniil; Jan 14, 2011 at 9:07 PM. Reason: Added note
  3. #3
    Quote Originally Posted by betamax View Post
    1. When the user clicks on the color cell button, I capture the color code in a color picker. The user can then change the color. I capture the change and write it back to the store. My problem is that I can't get the cell to update to the new data. It shows by flag that it is modified and if clicked upon again, the new value is sent to the color picker, but the old value is still displayed in the cell.
    2. I need to change the color of the font within the cell based on the color of the cell on load and "refresh" (referring to question 2). I have a javascript function which determines whether to use white or black font color depending on the color of the cell. Each cell can be a different color and must be changed individually
    Please look at the example.

    Example
    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "FF0000"},
                    new object[] { "2", "339966"}
                };
                store.DataBind();
            }
        }
    </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>
    
        <script type="text/javascript">
            var prepareToolbar = function (grid, toolbar, rowIndex, record) {
                var command = toolbar.items.itemAt(0),
                    color = record.get("color"),
                    cell = Ext.fly(GridPanel1.getView().getCell(rowIndex, 1)),
                    fontCls = getFontCls(color); // yout getFontColor function
                command.setText(color);
                command[fontCls === "white-font" ? "addClass" : "removeClass"]("white-font");
                command[fontCls === "black-font" ? "addClass" : "removeClass"]("black-font");
                
                if (!Ext.isIE) {
                    color = "#" + color;
                }
                GridPanel1.getView().getCell(rowIndex, 1).bgColor = color;
            }
            var command = function (command, record, rowIndex) {
                if (command === "color") {
                    var color = ColorPalette1.getColorField().getValue(),
                        cell = Ext.fly(GridPanel1.getView().getCell(rowIndex, 1));
                    record.set("color", color);
                    cell.applyStyles("background-color:" + color + ";");
                }
            }
    
            var getFontCls = function(color) {
                return "white-font";
            }
        </script>
    
        <style type="text/css">
            .black-font button {
                color: black;
            }
            .white-font button {
                color: white;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="colorId" />
                                <ext:RecordField Name="color" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Color ID" DataIndex="colorId" />
                    <ext:CommandColumn Header="Color" ButtonAlign="Center" DataIndex="color">
                        <Commands>
                            <ext:GridCommand CommandName="color" />
                        </Commands>
                        <PrepareToolbar Fn="prepareToolbar" />
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Fn="command" />
            </Listeners>
        </ext:GridPanel>
        <ext:ColorPalette ID="ColorPalette1" runat="server" />
        </form>
    </body>
    </html>
    There is some strange (for me) issue - under Chrome and Firefox background of <td> element via bgColor attribute is not changed on the fly. We are investigating.

    Note
    Improved version of this example (some refactoring and fixed FF issue) in the one of the following posts.
    Last edited by Daniil; Jan 19, 2011 at 10:56 AM. Reason: Added note
  4. #4

    Font color change

    Well done. I discovered that the reason mine was not working was that I am using an Xscript wrapper and was using #{control_name} to reference my grid. When that method is used the cell that is returned is a proto of the object. "applyStyles" is not a function of the cell in that state. I changed my code to use fly and things started working. I don't see an issue in FF, although I am not using the StandOut = true property like you did. When I did, the cell changed color but the button remained the ext default color.

    I was not able to get the font color to change, in your example, or in mine. Could you check that one more time?
  5. #5
    Quote Originally Posted by betamax View Post
    I don't see an issue in FF, although I am not using the StandOut = true property like you did. When I did, the cell changed color but the button remained the ext default color.

    I was not able to get the font color to change, in your example, or in mine. Could you check that one more time?
    Hmm, it looks I do not use StandOut="true" too. So, the issue is not clear for me. Could you clarify or post a simplified sample?
  6. #6
    Here is an improved version of the first example - refactored and works in FF.

    Example
    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[]
                {
                    new object[] { "1", "FF0000"},
                    new object[] { "2", "339966"}
                };
                store.DataBind();
            }
        }
    </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>
     
        <script type="text/javascript">
            var prepareToolbar = function(grid, toolbar, rowIndex, record) {
                var command = toolbar.items.itemAt(0),
                    color = record.get("color"),
                    fontCls = getFontCls(color); // your getFontColor function
                command.setText(color);
                command[fontCls === "white-font" ? "addClass" : "removeClass"]("white-font");
                command[fontCls === "black-font" ? "addClass" : "removeClass"]("black-font");
    
                if (!Ext.isIE) {
                    color = "#" + color;
                }
                GridPanel1.getView().getCell(rowIndex, 1).bgColor = color;
            }
            var command = function(command, record, rowIndex) {
                if (command === "color") {
                    var color = ColorPalette1.getColorField().getValue();
                    record.data.color = color;
                    if (!Ext.isIE) {
                        color = "#" + color;
                    }
                    Ext.fly(GridPanel1.getView().getCell(rowIndex, 1)).applyStyles("background-color:" + color + ";");
                }
            }
    
            var getFontCls = function(color) {
                return "white-font";
            }
        </script>
     
        <style type="text/css">
            .black-font button {
                color: black;
            }
            .white-font button {
                color: white;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="colorId" />
                                <ext:RecordField Name="color" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Color ID" DataIndex="colorId" />
                    <ext:CommandColumn Header="Color" ButtonAlign="Center" DataIndex="color">
                        <Commands>
                            <ext:GridCommand CommandName="color" />
                        </Commands>
                        <PrepareToolbar Fn="prepareToolbar" />
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server">
                    <GetRowClass Handler="" />
                </ext:GridView>
            </View>
            <Listeners>
                <Command Fn="command" />
            </Listeners>
        </ext:GridPanel>
        <ext:ColorPalette ID="ColorPalette1" runat="server" />
        </form>
    </body>
    </html>
  7. #7
    I forgot that your example did not have code to determine which font color to use. I believe I have it working now.

    Also, what is the trick to pasting code from Visual Studio into this forum. I've tried pasting into Notepad but still get these damn <Font> markup tags added.

    command[fontCls === "white-font" ? "addClass" : "removeClass"]("white-font"); 
    command[fontCls === "black-font" ? "addClass" : "removeClass"]("black-font");
    Last edited by Daniil; Jan 19, 2011 at 1:29 PM. Reason: Removed <font> tags
  8. #8
    I forgot that your example did not have code to determine which font color to use. I believe I have it working now.
    Great:)

    Yes, this part is fake in my example.
    fontCls = getFontCls(color); // your getFontColor function
    BTW could you post your code determining font color? Quid pro quo:)

    Quote Originally Posted by betamax View Post
    Also, what is the trick to pasting code from Visual Studio into this forum. I've tried pasting into Notepad but still get these damn <Font> markup tags added.
    The following way should work.

    1. Paste code in forum's editor
    2. Select this code
    3. Click "Remove Text Formatting" button (on the left from Fonts chooser)
    4. Wrap in [CODE ] tags
  9. #9
    Okay, I still don't have your example working exactly like I want. I need for the font to chnge color when new colors are chosen as well as on load.
    Here's what I am trying to do but removeclass is not a function in this context.
    var prepareToolbar = function (grid, toolbar, rowIndex, record) {
    var command = toolbar.items.itemAt(0),
    color = record.get("color"),
    fontCls = colorFont(color); // your getFontColor function 
    command.setText(color);
    command[fontCls === "white-font" ? "addClass" : "removeClass"]("white-font");
    command[fontCls === "black-font" ? "addClass" : "removeClass"]("black-font");
     
    if (!Ext.isIE) {
    color = "#" + color;
    }
    GridPanel1.getView().getCell(rowIndex, 1).bgColor = color;
    }
     
     
    var command = function (command, record, rowIndex) {
    if (command === "color") {
    var color = ColorPalette1.getColorField().getValue();
    record.data.color = color;
     
    Ext.fly(GridPanel1.getView().getCell(rowIndex, 1)).applyStyles("background-color:" + color + ";");
    var fontCls = colorFont(color); 
    command[fontCls === "white-font" ? "addClass" : "removeClass"]("white-font");
    command[fontCls === "black-font" ? "addClass" : "removeClass"]("black-font");
    }
    }
     
    var getFontCls = function (color) {
    return "black-font";
    } 
     
    function colorFont(hexCd){
    var cd = getLumin(hexCd) > 0.5 ? 'black-font' : 'white-font'; 
    return cd;
    } 
    function getLumin(hex) {
    var rgbFromHex = new Array();
    rgbFromHex = getRGB(hex);
    var lum = new Array();
    lum = getHSL(rgbFromHex); 
    return lum[2];
    }
     
    function getRGB(color) {
    if (color.length == 6) {
    return [parseInt('0x' + color.substring(1, 3)) / 255,
    parseInt('0x' + color.substring(3, 5)) / 255,
    parseInt('0x' + color.substring(5, 7)) / 255];
    }
    else if (color.length == 3) {
    return [parseInt('0x' + color.substring(1, 2)) / 15,
    parseInt('0x' + color.substring(2, 3)) / 15,
    parseInt('0x' + color.substring(3, 4)) / 15];
    }
    } 
     
    function getHSL(rgb) {
    var min, max, delta, h, s, l;
    var r = rgb[0], g = rgb[1], b = rgb[2];
    min = Math.min(r, Math.min(g, b));
    max = Math.max(r, Math.max(g, b));
    delta = max - min;
    l = (min + max) / 2;
    s = 0;
    if (l > 0 && l < 1) {
    s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
    }
    h = 0;
    if (delta > 0) {
    if (max == r && max != g) h += (g - b) / delta;
    if (max == g && max != b) h += (2 + (b - r) / delta);
    if (max == b && max != r) h += (4 + (r - g) / delta);
    h /= 6;
    }
    return [h, s, l]; 
    }
  10. #10
    Thank you for the code.

    Here is a full working example. I refactored your code a little bit.

    Example
    <%@ 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)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[]
                {
                    new object[] { "1", "FF0000"},
                    new object[] { "2", "339966"}
                };
                store.DataBind();
            }
        }
    </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>
        <style type="text/css">
            .black-font button {
                color: black;
            }
            .white-font button {
                color: white;
            }
        </style>
    
        <script type="text/javascript">
            var prepareToolbar = function (grid, toolbar, rowIndex, record) {
                var command = toolbar.items.itemAt(0),
                    color = record.get("color"),
                    fontCls = colorFont(color);
                command.setText(color);
                command[fontCls === "white-font" ? "addClass" : "removeClass"]("white-font");
                command[fontCls === "black-font" ? "addClass" : "removeClass"]("black-font");
                if (!Ext.isIE) {
                    color = "#" + color;
                }
                
                Ext.fly(GridPanel1.getView().getCell(rowIndex, 1)).applyStyles("background-color:" + color + ";");
            }
            var command = function (command, record, rowIndex) {
                if (command === "color") {
                    var color = ColorPalette1.getColorField().getValue();
                    record.set("color", color);
                }
            }
    
            var colorFont = function (hexCd) {
                return getLumin(hexCd) > 0.5 ? "black-font" : "white-font";
            }
    
            var getLumin = function (hex) {
                var rgbFromHex = getRGB(hex),
                    lum = getHSL(rgbFromHex);
                return lum[2];
            }
    
            var getRGB = function (color) {
                if (color.length == 6) {
                    return [parseInt("0x" + color.substring(1, 3)) / 255,
                            parseInt("0x" + color.substring(3, 5)) / 255,
                            parseInt("0x" + color.substring(5, 7)) / 255];
                }
                else if (color.length == 3) {
                    return [parseInt("0x" + color.substring(1, 2)) / 15,
                            parseInt("0x" + color.substring(2, 3)) / 15,
                            parseInt("0x" + color.substring(3, 4)) / 15];
                }
            }
    
            var getHSL = function (rgb) {
                var r = rgb[0],
                    g = rgb[1], 
                    b = rgb[2],
                    min = Math.min(r, g, b),           
                    max = Math.max(r, g, b);
                    delta = max - min,
                    l = (min + max) / 2;
                    s = (l > 0 && l < 1) ? (delta / (l < 0.5 ? (2 * l) : (2 - 2 * l))) : 0,
                    h = 0;
                if (delta > 0) {
                    if (max == r && max != g) {
                        h += (g - b) / delta;
                    }
                    if (max == g && max != b) {
                        h += (2 + (b - r) / delta);
                    }
                    if (max == b && max != r) {
                        h += (4 + (r - g) / delta)
                    };
                    h /= 6;
                }
                
                return [h, s, l];
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="colorId" />
                                <ext:RecordField Name="color" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Color ID" DataIndex="colorId" />
                    <ext:CommandColumn Header="Color" ButtonAlign="Center" DataIndex="color">
                        <Commands>
                            <ext:GridCommand CommandName="color" />
                        </Commands>
                        <PrepareToolbar Fn="prepareToolbar" />
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Fn="command" />
            </Listeners>
        </ext:GridPanel>
        <ext:ColorPalette ID="ColorPalette1" runat="server" />
        </form>
    </body>
    </html>
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: Apr 11, 2012, 12:52 PM
  2. set css dynamically in a cell from code behind
    By rahul13 in forum 1.x Help
    Replies: 14
    Last Post: Feb 24, 2012, 5:23 AM
  3. [CLOSED] Dynamically generate button and button menu problem.
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Dec 22, 2011, 5:02 AM
  4. Replies: 8
    Last Post: Aug 22, 2011, 2:04 PM
  5. Replies: 1
    Last Post: Jul 21, 2010, 12:52 AM

Tags for this Thread

Posting Permissions