Need to display bigger Image

  1. #1

    Need to display bigger Image in short cuts

    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)
    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.
    Attached Thumbnails Click image for larger version. 

Name:	Untitled.jpg 
Views:	31 
Size:	82.8 KB 
ID:	25423   Click image for larger version. 

Name:	Grid.png 
Views:	31 
Size:	1.8 KB 
ID:	25424   Click image for larger version. 

Name:	imageshortcut.jpg 
Views:	28 
Size:	80.5 KB 
ID:	25425  
    Last edited by Vamsi; Sep 07, 2020 at 5:51 AM.
  2. #2
    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:

    .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:

    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!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. How to display image after upload?
    By wichogg in forum 2.x Help
    Replies: 3
    Last Post: Mar 17, 2015, 6:34 AM
  2. Display image in GridPanel AND FormPanel
    By nazmulrockon in forum 2.x Help
    Replies: 4
    Last Post: May 09, 2014, 2:32 AM
  3. DataView and get a bigger image
    By ada in forum 2.x Help
    Replies: 1
    Last Post: Sep 30, 2013, 2:24 AM
  4. [CLOSED] Image display problem
    By Tactem in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 23, 2013, 3:37 PM
  5. Display an image in image control
    By Juanma in forum 2.x Help
    Replies: 0
    Last Post: Jan 15, 2013, 3:19 PM

Posting Permissions