Need to display bigger Image

Hi Sir,

I need to display bigger image instead of smaller image or standard or show me the different size images in desktop control shortcuts.

Note :

Please try to understand as I cant provide code for you as a demo and I agree if you are not able to reproduce the issue then I need to provide sample code but here is not like that as I'm asking in your example only(Just change different image sizes with bigger ones instead of standard ones)

Code:

---

x-default-shortcut {
    background-image : url(window48x48.png);
}

.x-grid-shortcut {
    background-image : url(Grid.png);
}

.x-im-shortcut {
    background-image : url(im48x48.gif);
}

.x-notepad-shortcut {
    background-image : url(Grid.png);
}

.x-status-shortcut {
    background-image : url(statusLarge.png);
}

.x-bold-text .x-btn-inner{
    font-weight: bold !important;
}

.x-long-label{
    height:auto !important;
}

---

Is there any option to increase the shortcut sizes based on our image sizes.

Attached sample image need to replace with existing shortcut image in Ext.Net examples and I have already replaced the image in ext.net examples and Red highlightcolor with image.

if you wont provide the solution for simple scernios with out asking sample code then there is no point to purchase/renew the Ext.net.

Thank you,
Vamsi.

Hello Vamsi!

short version

I am afraid the only way thru this issue is to actually implement icon positioning to the desktop component via an extension or overriding its methods to add the functionality. It is not supported out of the box currently.

long, explained version

Unfortunately there's no simple setting to specify the desktop icons' size. There are, though, means to make the icons look bigger, but in order to implement that, the Desktop component will need to take some in-depth extension to its arrangeShortcuts and setShortcutPosition methods.

These methods alone are Ext.NET-specific ones; that is, the original Desktop component from Sencha doesn't even support arranging or moving icons around through client-side code.

Javascript and client-side code put aside, it will also require a few CSS changes to ensure the icons area is enough to fit the icon and center the icon's text below. In a few checks here, this CSS helped:

Code:

---

.ux-desktop-shortcut-icon {
    width: 64px;
    height: 64px
}
.ux-desktop-shortcut-wrap {
    width: 80px; // 64 + 16
}

---

And then, keeping the 64x64 example from the CSS above, the code would need an override like this:

Code:

---

Ext.define("thread62977", {
    override: "Ext.ux.desktop.Desktop",

    shortcutWidth: 64, // this must match the size you want
    shortcutHeight: 64, // this must match the size you want

    arrangeShortcuts: function (ignorePosition, ignoreTemp) {
        var col = { index: 1, x: 10 },
            row = { index: 1, y: 10 },
            records = this.shortcuts.getRange(),
            area = this.getComponent(0),
            view = this.getComponent(1),
            height = area.getHeight();

        for (var i = 0, len = records.length; i < len; i++) {
            var record = records[i],
                tempX = record.get('tempX'),
                tempY = record.get('tempY'),
                x = record.get('x'),
                y = record.get('y'),
                xEmpty = Ext.isEmpty(x),
                yEmpty = Ext.isEmpty(y);

            if (ignoreTemp !== true) {
                x = Ext.isEmpty(x) ? tempX : x;
                y = Ext.isEmpty(y) ? tempY : y;
            }

            if (Ext.isEmpty(x) || Ext.isEmpty(y) || ignorePosition === true) {
                this.setShortcutPosition(record, height, col, row, view);
            }
            else {
                x = !xEmpty && Ext.isString(x) ? eval(x.replace('{DX}', 'area.getWidth()')) : x;
                y = !yEmpty && Ext.isString(y) ? eval(y.replace('{DY}', 'area.getHeight()')) : y;
                x = x - (x % (this.alignToGrid ? this.shortcutWidth + 18 : 1));
                y = y - (y % (this.alignToGrid ? this.shortcutHeight + 43 : 1));
                Ext.fly(view.getNode(record)).setXY([x, y]);
                if (!xEmpty && !yEmpty) {
                    record.data.x = x;
                    record.data.y = y;
                }
                record.data.tempX = x;
                record.data.tempY = y;
            }
        }
    },
    setShortcutPosition: function (record, height, col, row, view) {
        var node = Ext.get(view.getNode(record)),
            wrap = node.child(".ux-desktop-shortcut-wrap"),
            nodeHeight = this.shortcutHeight + 43,
            nodeWidth = this.shortcutWidth + 18,
            isOver = (row.y + nodeHeight) > height;

        if (isOver && row.y > 10) {
            col.index = col.index++;
            col.x = col.x + nodeWidth + 10;
            row.index = 1;
            row.y = 10;
        }

        col.x = col.x - (col.x % (this.alignToGrid ? nodeWidth : 1));
        row.y = row.y - (row.y % (this.alignToGrid ? nodeHeight : 1));

        node.setXY([
            col.x,
            row.y
        ]);

        record.data.x = col.x;
        record.data.y = row.y;
        record.data.tempX = col.x;
        record.data.tempY = row.y;

        row.index++;
        row.y = row.y + nodeHeight + 10;
    },
})

---

This should get you started. But we cannot guarantee if something else related to icon positioning won't be broken later on, so you'll need to keep an eye open for trouble by going this path.

Instead of this big client-side / javascript code change you may choose to just specify the shortcut icons position manually. The CSS part will still be necessary!

Hope this helps!