在网格中获取图像

Question

如何在网格操作列中添加一个按钮，单击该按钮可以从硬盘加载照片或文件，并在下一列中可视化我们选择的内容

如何在网格操作列中添加一个按钮，单击该按钮可以从硬盘加载照片或文件，并在下一列中可视化我们选择的内容？

Answer 1

检查下面的示例代码！单击操作列中的按钮时，它会更新并可视化所选行的前一列中的照片。该代码使用来自互联网的预定义图像 URL。要使用存储在应用程序服务器上的您自己的图像，您需要实现图像上传和服务器端存储，然后修改代码以使用存储的图像 URL。 在 Fiddle

中运行以下代码

Ext.application({
    name: 'Fiddle',

    launch: function () {

        // Define separate URLs for loading images
        var imageUrls = [
            "https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fHww&w=1000&q=80",
            "https://cdn.pixabay.com/photo/2023/09/23/14/22/dahlia-8271071_1280.jpg",
            "https://media.istockphoto.com/id/512882246/photo/dahlia-is-called-orange-garden.jpg?s=1024x1024&w=is&k=20&c=ltTaeSPKZdo3I7fxewxO0Um_QrPL6kTDxeIXgztLXVE=",
            "https://media.istockphoto.com/id/582297490/photo/bouquet-of-red-roses-on-a-black-background-top-view.jpg?s=1024x1024&w=is&k=20&c=b1eYs_E8PQ4KW88BbhnjlhULF466pnMze4z_Em7XxV8=",
            "https://media.istockphoto.com/id/1175726332/photo/blue-cornflower-herb.jpg?s=1024x1024&w=is&k=20&c=vqrXLDeUuLCEOwc68XvM0nYBK0xh5ZiEMnp08qrM3CM="
        ];

        Ext.create('Ext.data.Store', {
            storeId: 'employeeStore',
            fields: ['firstname', 'lastname', 'photoUrl'], // Change field name to 'photoUrl'
            data: [{
                firstname: "Michael",
                lastname: "Scott",
                photoUrl: ""
            }, {
                firstname: "Dwight",
                lastname: "Schrute",
                photoUrl: ""
            }, {
                firstname: "Jim",
                lastname: "Halpert",
                photoUrl: ""
            }, {
                firstname: "Kevin",
                lastname: "Malone",
                photoUrl: ""
            }, {
                firstname: "Angela",
                lastname: "Martin",
                photoUrl: ""
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Action Column Demo',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [{
                text: 'First Name',
                dataIndex: 'firstname'
            }, {
                text: 'Last Name',
                dataIndex: 'lastname'
            }, {
                text: 'Photo',
                dataIndex: 'photoUrl',
                renderer: function (value, metaData, record) {
                    if (value) {
                        return '<img src="' + value + '" width="50" height="50"/>';
                    }
                }
            }, {
                xtype: 'actioncolumn',
                width: 50,
                items: [{
                    iconCls: 'x-fa fa-cog',
                    text: 'Load Photo',
                    handler: function (grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        rec.set('photoUrl', imageUrls[rowIndex]); // Change the index to load a different image
                    }
                }]
            }],
            width: 350,
            height: 800,
            renderTo: Ext.getBody()
        });
    }
});