extjs6中grid里放置图片
1.加黑体的是实现代码,在view中操作
/** * Created by Wwei on 2017/7/1. */ Ext.define('Admin.view.userpanoram.UserPanoram', { extend: 'Ext.Panel', xtype: 'userpanoram', title: '我的工作室', requires: [ 'Admin.view.userpanoram.UserPanoramController', 'Ext.button.Button' ], controller: "userpanoram", layout: { type: 'vbox', align: 'stretch' }, items: [{ xtype: 'form', reference: 'form', defaultButton: 'btn_search', layout: 'column', defaults: { labelAlign: 'right' }, style: { margin: '12px 0px 0px -28px' }, items: [{ xtype: 'textfield', reference: 'viewUuid', fieldLabel: 'viewUuid', name: 'viewUuid' },{ xtype: 'datefield', name: 'startTime', reference:'startTime', fieldLabel: '起始时间', labelWidth: 60, format: 'Y-m-d', editable: false }, { xtype: 'datefield', name: 'endTime', reference:'endTime', fieldLabel: '结束时间', labelWidth: 60, format: 'Y-m-d', editable: false }] }, { xtype: 'grid', sortableColumns: false, reference: 'grid', flex: 1, store: 'userpanoram.UserPanoram', columns: [{ xtype: 'rownumberer' },{ text: '主键', dataIndex: 'id', width: 50 },{ text: '用户id', dataIndex: 'userId', width: 50 },{ text: '图片id', dataIndex: 'panoramaId', width: 50 },{ text: 'newViewUuid', dataIndex: 'newViewUuid', width: 50 },{ text: 'ViewUuid', dataIndex: 'ViewUuid', width: 50 },{ text: '缩略图路径', dataIndex: 'thumbPath', width: 100, renderer: function (v) { return '<image style="width : 185px; height : 70px;" src="'+v+'" />' } }, { text: '名称', dataIndex: 'name', width: 100 }, { text: '风格', dataIndex: 'style', width: 100 }, { text: '户型', dataIndex: 'houseType', width: 100 }, { text: '空间', dataIndex: 'space', width: 100 },{ text: '创建时间', dataIndex: 'createTime', width:100 }], selModel: { selType: 'checkboxmodel' }, dockedItems: [{ xtype: 'toolbar', items: [ '->', { text: '查询', iconCls: 'fa fa-search', reference: 'btn_search', handler: 'search' } , { text: '清空条件', iconCls: 'fa fa-search', listeners: { click: 'reset' } }] }, { xtype: 'pagingtoolbar', store: 'userpanoram.UserPanoram', dock: 'bottom', displayInfo: true }], listeners: { beforerender: 'gridBeforeRender', render: 'search' } }] });
2.效果如图
作者:Rest探路者
出处:http://www.cnblogs.com/Java-Starter/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意请保留此段声明,请在文章页面明显位置给出原文连接
Github:https://github.com/cjy513203427
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?