1. Bold is the implementation code, in the view operation
/** * Created by Wwei on 2017/7/1.*/Ext.define (' Admin.view.userpanoram.UserPanoram ', {extend:' Ext.panel ', Xtype:' Userpanoram ', Title:' My studio ', 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:' Start time ', Labelwidth:60, Format:' Y-m-d ', Editable:false}, {xtype:' Datefield ', Name:' EndTime ', reference:' EndTime ', Fieldlabel:' End Time ', Labelwidth:60, Format:' Y-m-d ', Editable:false}]}, {xtype:' Grid ', Sortablecolumns:false, reference:' Grid ', Flex:1, Store:' Userpanoram. Userpanoram ', Columns: [{xtype:' Rownumberer '},{Text:' Primary key ', Dataindex:' ID ', Width:50},{Text:' User ID ', Dataindex:' UserId ', Width:50},{Text:' Picture ID ', Dataindex:' Panoramaid ', Width:50},{Text:' Newviewuuid ', Dataindex:' Newviewuuid ', Width:50},{Text:' Viewuuid ', Dataindex:' Viewuuid ', Width:50},{text: ' thumbnail path ', Dataindex: ' Thumbpath ', Width: renderer: function (v) { return ' <image style= "width:185px; height:70px;" src= "' +v+ '" /> ' }}, {text:Name, Dataindex:' Name ', Width:100}, {text:Style, Dataindex:' Style ', Width:100}, {text:Type, Dataindex:' Housetype ', Width:100}, {text:Space, Dataindex:' Space ', Width:100},{Text:' Create Time ', Dataindex:' Createtime ', Width:100}], Selmodel: {seltype:' Checkboxmodel '}, Dockeditems: [{xtype:' Toolbar ', items: [' and ', {text:Query, Iconcls:' FA Fa-search ', reference:' Btn_search ', Handler:' Search '}, {text:' Empty condition ', Iconcls:' FA Fa-search ', listeners: {click:' Reset '} }]}, {xtype:' Pagingtoolbar ', Store:' Userpanoram. Userpanoram ', Dock:' Bottom ', DisplayInfo:true}], listeners: {beforerender:' Gridbeforerender ', Render:' Search ' } }]});
2. Effects
Place a picture in a grid in EXTJS6