extjs6中grid里放置图片

Posted 2020-09-29 多读书，少说话

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.效果如图