[CLOSED] Icon sizing based on themes

Z · Jan 09, 2018, 2:51 AM

I have been using these Icon (NoteEdit) for years with the Gray theme. As we move towards a more fluid approach to web/tablet/phone, we are enabling users ability to choose a theme and then automatically stepping up to the touch version. I notice that in NeptuneTouch, this icon is tiny instead of larger like all other icons.
How can I make all my Icons in my ImageCommandColumns properly size based on the theme chosen?
thanks,
/Z

                                  <ext:ImageCommandColumn runat="server" Width="35">
                                        <Commands>
                                            <ext:ImageCommand Icon="NoteEdit" CommandName="Edit">
                                                <ToolTip Text="Edit" />
                                            </ext:ImageCommand>
                                        </Commands>
                                        <Listeners>
                                            <Command Handler="alert('test');" />
                                        </Listeners>  
                                    </ext:ImageCommandColumn>

**fabricio.murta** · Jan 09, 2018, 6:15 PM

Hello @Z!

It seems it may be a bug in which Ext.NET does not select the correct theme icon for Neptune Touch, or just that the icon itself in the theme is not really well scaled for the theme. We'd have to have a better look at that.

Z · Jan 09, 2018, 6:32 PM

Pls do check asap and let me know.
Thxs
/Z

**fabricio.murta** · Jan 09, 2018, 6:37 PM

Hello @Z!

Just to let you know, it would help our timing if you provided a fully runnable test case, and maybe a screenshot of how exactly it looks for you so we can ensure not only we run the same code but also see the same result, before proposing any fix.

Hope this helps!

Z · Jan 09, 2018, 11:12 PM

see full example.
thanks.
/Z

<%@ Page Language="C#" %>


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Stt.DataSource = new object[]
            {
                new object[] { 1, "test1"},
                new object[] { 2, "test2"},
                new object[] { 3, "test3"},
                new object[] { 4, "test4"},
                new object[] { 5, "test5"},
                new object[] { 6, "test6"}
            };


            Stt.DataBind();
            
            this.GridPanel1.Store.Primary.DataSource = new object[]
            {
                new object[] { "[9/1/2017 2:00a] 3m777", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a]666 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:05550a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 4442:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2033317 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1222/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[1119/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a] jkl3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00hjka] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2ghj:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/201fgh7 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/dfg2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9sdf/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "asd[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a] 3ppm", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a]oo 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00iia] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:uu00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 yy2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/201tt7 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2rr017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1ee/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9ww/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "qq[9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a] 3..m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a],, 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00mma] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2nnn:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017bb 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/20vv17 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/cc2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/xx1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[zz9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a]i 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00au] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00ya] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:0t0a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:r00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2e:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 w2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/201qw7 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/20m17 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2n017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/b2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1v/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/c1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9x/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[z9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/201lc7 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/20k17 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2j017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/h2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1g/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/f1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9d/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[s9/1/2017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "a[9/1/2017 2:00a] 38m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a] 73m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a]6 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00a5] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:004a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:030a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:200a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 21:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 -2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/20170 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/20197 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/20817 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/27017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/62017 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/15/20127 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/41/20127 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[93/1/20127 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[92/1/20127 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[19/1/20127 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[19/134/20127 2:00a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:900a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:800a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:700a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:600a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:500a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:400a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:300a] 3m", "[9/1/2017 2:00] 3m",71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:200a] 3m", "[9/1/2017 2:00] 3m",29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
                new object[] { "[9/1/2017 2:100a] 3m", "[9/1/2017 2:00] 3m", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) },
                new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
                new object[] { "[9/1/2017 8:00a] Starbucks","[9/1/2017 8:00] Starbucks", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) },
                new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 71.72, 0.02, 0.03, new DateTime(2017, 9, 1, 2, 0, 0) },
                new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 29.01, 0.42, 1.47, new DateTime(2017, 9, 1, 8, 0, 0) },
                new object[] { "[9/1/2017 2:00p] Home Depot","[9/1/2017 14:00] Home Depot", 83.81, 0.28, 0.34, new DateTime(2017, 9, 1, 14, 0, 0) }
            };


            this.GridPanel1.Store.Primary.DataBind();
        }
    }
</script>


    <script type="text/javascript">
        var showTip = function (toolTip, grid) {
            toolTip.update("A simple tooltip");
        };


    </script>
<!DOCTYPE html>


<html>
<head id="Head2" runat="server">
    <title>GridPanel with Locking Columns - Ext.NET Examples</title>


    <script>


        var getGroupStr = function () {
            return "Test";
        };


        var count = 0;
        var template = '<span style="color:{0};">{1}</span>';
        var templateFontWeight = '<span style="font-weight:{0};" {2}>{1}</span>';


        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };


        var editRecordComplete = function (editor, context) {
            var store = context.grid.getStore();
            var record = context.record;
        };




        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };


        var myRenderer = function (value, metaData, record, rowIndex, colIndex, store) {
            var result = "";
            for (i = 0; i < count; i++) {
                result += "<div><span>TEST</span><BR/></div>";
            }
            return result;
        };


        var commandHandler = function (cmd, record, obj, grid) {
            alertResponsehift(record);
        };


        var StoreIdRenderer = function (value, metaData, record, rowIndex, colIndex, store) {
        
            var fontWeight = "normal";


            if (metaData != null) {
                metaData.tdStyle = '';
            }


            if (value < 0 && metaData != null) {
                metaData.tdStyle = "background-color:#ff8080;";
            }






            fontWeight = "bold";
            //first background wins
            metaData.tdStyle += "background-color: #GREY;";


            return Ext.String.format(templateFontWeight, fontWeight, record.data.change, '');




        };
    </script>
</head>
<body>


        <ext:Store ID="Stt" runat="server" AutoLoad="true">
            <Model>
                <ext:Model ID="Model1" IDProperty="id" runat="server">
                    <Fields>
                        <ext:ModelField Name="id" />
                        <ext:ModelField Name="description" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>




    <ext:ResourceManager ID="ResourceManager2" runat="server" Theme="NeptuneTouch" />


        <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">          
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>




            <ext:GridPanel
                ID="GridPanel1"
                    runat="server"
                    TitleCollapse="true"
                    ColumnLines="true"
                    ContextMenuID="Context12"
                    Flex="1">


                <Store>
                    <ext:Store ID="Store2" runat="server" PageSize="3000">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="companySort" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Grouper Property="company" SortProperty="company" Direction="ASC" />
                        <Sorters>
                            <ext:DataSorter Property="lastChange" Direction="DESC" />
                        </Sorters>
                    </ext:Store>
                </Store>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" ClicksToEdit="1" runat="server">
                        <Listeners>
                            <Edit Fn="editRecordComplete"  />
                        </Listeners>
                    </ext:CellEditing>
                </Plugins>
                <View>
                    <ext:GridView ID="GridView1" runat="server">
                    </ext:GridView>
                </View>


                <ColumnModel>
                    <Columns>


                        <ext:ImageCommandColumn runat="server" Width="35">
                            <Commands>
                                <ext:ImageCommand Icon="NoteEdit" CommandName="Edit">
                                    <ToolTip Text="Edit" />
                                </ext:ImageCommand>
                            </Commands>
                            <Listeners>
                                <Command Handler="alert('test');" />
                            </Listeners>  
                        </ext:ImageCommandColumn>
                        <ext:RowNumbererColumn  ID="RowNumbererColumn1" runat="server" Width="30" />
                        <ext:Column  ID="Column5" runat="server" Text="Company<br>Name" DataIndex="company" Width="200" Sortable="false" />
                        <ext:Column ID="Column8"  runat="server" Text="% Change" DataIndex="pctChange" Width="125">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:Column ID="Column1"  DataIndex="lastChange" Text="Date" runat="server" Width="50"/>
                        <ext:Column ID="stset" runat="server" Align="Center" Text="test" CellWrap="true" Flex="1">
                            <Renderer Handler="StoreIdRenderer" />
                            <Editor>
                                <ext:ComboBox runat="server"
                                    ID="test1"
                                    ValueField="id"
                                    DisplayField="description"
                                    QueryMode="Local"
                                    StoreID="Stt"
                                    >
                                    <Tpl runat="server">
                                        <Html>
                                            <tpl for=".">
                                                <tpl if="xindex == 1 || getGroupStr(parent[xindex - 2]) != getGroupStr(values)">
                                                 <div class="x-combo-list-group"><b>{[getGroupStr(values)]}</b></div>
                                                </tpl>
                                                <div role="option" class="x-boundlist-item" style="padding-left: 12px">{description}</div>
                                            </tpl>


                                        </Html>
                                    </Tpl>
                                    <ListConfig MaxWidth="200" MinWidth="90" />
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                     </Columns>
                </ColumnModel>
            </ext:GridPanel>
                </Items>
            </ext:Viewport>




        <ext:Menu ID="Context12" runat="server">
            <Listeners>    
                <Show Handler="Ext.QuickTips.getQuickTip().hide();" />
            </Listeners>
            <Items>
                <ext:MenuItem ID="asdfcssdsd" Icon="Pencil" runat="server" Text="testst" HideOnClick="false">
                    <Menu>
                        <ext:Menu ID="sdfsdfsdfdsxc" runat="server">
                            <Items>
                                <ext:Label ID="sdfsdfsdf" runat="server" Html="<b class='menu-title'>Choose a test Option</b>" />
                                <ext:MenuItem ID="sdfsdf" runat="server" Text="test" Icon="TextReplace" Group="theme" >
                                </ext:MenuItem>
                                <ext:MenuItem runat="server" Text="sdfsdfsdf" Icon="Car" Group="theme" >
                                </ext:MenuItem>
                            </Items>
                        </ext:Menu>
                    </Menu>
                </ext:MenuItem>
            </Items>
        </ext:Menu>


    
        <ext:ToolTip ID="ToolTip9" 
        runat="server" 
        Target="={#{GridPanel1}.getView().el}"
        Delegate=".x-grid-cell"
        TrackMouse="true">
        <Listeners>
            <Show Handler="showTip(this, #{GridPanel1});" /> 
        </Listeners>
    </ext:ToolTip> 
</body>
</html>

**fabricio.murta** · Jan 10, 2018, 8:05 PM

Hello @Z!

I see the issue. Well, the problem is that the icon sets are not theme-bound at all. For example, Triton theme has a special icon set bound to the Awesome and Pictos fonts, which are not available for other themes.

The NeptuneTouch has its own themed icons for components (like window close, dropdown trigger), but it does not have a dedicated icon theme.

When you set up the icon, you are using the icon sets according to this page in Examples Explorer. When you want to use (for example) font awesome icons, you have to set them up and use either the icon name address or the icon octal address.

In fact, by changing themes, some of the icons may be replaced by theme-specific ones and to specific components, as you can see with the search icon in this example using the Triton theme.

But the themes do not implement a "themed" version of every available icon, unfortunately.

Hope this helps!

Z · Jan 10, 2018, 9:37 PM

That doesn't seem right. If I switch themes, it should rebind.
Can u suggest solution pls.
Thxs
/Z

**fabricio.murta** · Jan 11, 2018, 3:24 PM

Thread: [CLOSED] Icon sizing based on themes

Thread Tools

Search Thread

Display

[CLOSED] Icon sizing based on themes

Similar Threads

[CLOSED] How to set image command icon dynamically based on condition in Grid Panel ?

[CLOSED] Change Icon based on model value

Hide an Icon in a GridPanel based on data in the table

[CLOSED] Set a Command Columns Icon based on a Column Value

[CLOSED] Icon column in GridPanel based on column from store

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Icon sizing based on themes

[CLOSED] Icon sizing based on themes

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us