如何在网格操作列中设置一个按钮,当单击该按钮时,可以从硬盘驱动器加载照片或文件,并在下一列中显示我们选择的内容如何在网格操作列中设置一个按钮,当单击该按钮时,可以从硬盘驱动器加载照片或文件,并在下一列中可视化我们所选择的内容?
dly7yett1#
查看下面的示例代码!当单击操作列中的按钮时,它会更新并可视化所选行的前一列中的照片。代码使用来自互联网的预定义图像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() }); } });
1条答案
按热度按时间dly7yett1#
查看下面的示例代码!当单击操作列中的按钮时,它会更新并可视化所选行的前一列中的照片。代码使用来自互联网的预定义图像URL。要使用存储在应用程序服务器上的您自己的图像,您需要实现图像上传和服务器端存储,然后修改代码以使用存储的图像URL。在Fiddle中运行以下代码