Extjs girdPanel显示图片

var invoiceGridPanel = Ext.create('Ext.grid.Panel', {
            id : 'invoiceGridPanel',
            store : invoiceStore,
            title : '',
            columnLines : true,
            frame : true,
            features : [ {
                ftype : 'summary'
            } ],
            selModel : {
                selType : 'checkboxmodel',
                mode : 'SINGLE'
            },
            columns : [ {
                xtype : 'actioncolumn',
                width : 280,
                dataIndex : 'INVOICE_ID_',
                text : '',
                align : 'center',
                renderer : function(value, metaData, record) {//运用渲染
                    var id = metaData.record.id;
                    Ext.defer(function() {
                        Ext.create('Ext.Img', {
                            height : 140,
                            width : 250,
                            src : 'loadInvoiceRider.do?INVOICE_ID_=' + value,
                            renderTo : id,
                            listeners : {//双击图片，放大图片
                                scope : this,
                                el : {
                                    dblclick : function(e, a) {
                                        var winViewImage = Ext.create('Ext.Window', {
                                            width : 750,
                                            height : 500,
                                            maximizable : true,//窗体最大化按钮
                                            title : '',
                                            layout : "fit", //窗口布局类型  
                                            modal : true, //是否模态窗口，默认为false  
                                            resizable : false,//调整窗体大小
                                            closeAction : 'hide', //关闭窗体实际上是隐藏窗体并未关闭销毁此窗体对象(节约资源)
                                            plain : true,//窗体主体部分背景颜色透明
                                            draggable : true,//充许拖动窗体
                                            border : false,
                                            items : [ Ext.create('Ext.Img', {
                                                width : 750,
                                                height : 500,
                                                src : 'loadInvoiceRider.do?INVOICE_ID_=' + value
                                            }) ]
                                        });
                                        winViewImage.show();
                                    }
                                }
                            }

                        })
                    }, 50);

                    return Ext.String.format('
', id);
                }
            }, {
                text : '',
                dataIndex : 'INVOICE_CODE_',
                style : 'text-align: center;',
                summaryType : 'sum',
                summaryRenderer : function(value) {
                    return '合计';
                },
                flex : 1
            }, {
                text : '',
                dataIndex : 'INVOICE_NO_',
                style : 'text-align: center;',
                flex : 1
            }, {
                text : '',
                dataIndex : 'INVOICE_DATE_',
                style : 'text-align: center;',
                flex : 1
            }, {
                text : '',
                dataIndex : 'SUM_',
                style : 'text-align: center;',
                width : 100,
                summaryType : 'sum'
            }, {
                text : '',
                dataIndex : 'MEMO_',
                style : 'text-align: center;',
                flex : 1
            }, {
                text : '',
                style : 'text-align: center;',
                width : 80,
                renderer : function(value, metaData, record, rowIdx, colIdx, store, view) {
                    return '' + '' + '';
                }
            } ],
            viewConfig : {
                emptyText : '
',
                enableTextSelection : true
            },
            dockedItems : [ {
                xtype : 'pagingtoolbar',
                store : invoiceStore,
                dock : 'bottom',
                displayInfo : true
            } ]
        });

转载于:https://www.cnblogs.com/mwd-banbo/p/8570097.html